<template>
    <div class="homepage">
        <div class="header">
            <h1><span v-text="system_name"></span></h1>
            <div>
                <span class="date" v-text="myDate.day"></span>&emsp;&emsp;
                <span class="week" v-text="myDate.week"></span>
            </div>
        </div>
        <div class="content">
            <div class="left-content">
                <div class="leftModule bk-homeapge-animation" v-for="(item, index) in modules.leftModule">
                    <div :class="['module-info', isSelected == index ? ('selectedModule-left' + index) : '', 'left-div-' + index]"
                        @click="choiceModule(index)">
                        <div class="info-description">
                            <div v-text="item.name"></div>
                            <div v-text="item.description"></div>
                        </div>
                    </div>
                    <div style="position: absolute;top:50%;right: 3.1%;" :id="'left' + index"></div>
                </div>
            </div>
            <div class="center-content">
                <div class="pulse"></div>
                <div class="pulse1"></div>
                <div class="pulse2"></div>
                <div class="center-img"></div>
                <div style="position: absolute;top:48%;left: calc(50% - 240px);" id="left11"></div>
                <div style="position: absolute;top:52.5%;left: calc(50% - 240px);" id="left22"></div>
                <div style="position: absolute;top:56%;left: calc(50% - 240px);" id="left33"></div>
                <div style="position: absolute;top:48%;right: calc(50% - 250px);" id="right11"></div>
                <div style="position: absolute;top:52.5%;right: calc(50% - 250px);" id="right22"></div>
                <div style="position: absolute;top:56%;right: calc(50% - 250px);" id="right33"></div>
            </div>
            <div class="right-content">
                <div class="rightModule bk-homeapge-animation" v-for="(item, index) in modules.rightModule">
                    <div :class="['module-info', isSelected == (index + 3) ? ('selectedModule-right' + index) : '', 'right-div-' + index]"
                        @click="choiceModule(index + 3)">
                        <div class="info-description">
                            <div v-text="item.name"></div>
                            <div v-text="item.description"></div>
                        </div>
                    </div>
                    <div style="position: absolute;top:50%;left: 3.1%;" :id="'right' + index"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LeaderLine from "../util/leader-line.min";
import dayjs from 'dayjs';
import { querySystemName } from '@/api/index';
export default {
    name: 'homepage',
    data() {
        return {
            isSelected: -1,
            modules: {
                leftModule: [
                    { id: 1, name: '目标对象库', description: 'Target Object Library' },
                    { id: 2, name: '战法策略库', description: 'Method Strategy Library' },
                    { id: 3, name: '信息制品库', description: 'Infomation product Library' },
                ],
                rightModule: [
                    { id: 4, name: '导调控制模块', description: 'Pilot Control Module' },
                    { id: 5, name: '学习训练模块', description: 'Learning And Training Module' },
                    { id: 6, name: '新技术实验模块', description: 'New Technology Experiment Module' },
                ]
            },
            line1: null,
            line2: null,
            line3: null,
            line4: null,
            line5: null,
            line6: null,
            myDate: {
                day: null,
                week: null
            },
            system_name: ''
        }
    },
    methods: {
        choiceModule(index) {
            let arr = this.query_selector('.leader-line');
            if (arr.length > 0) {
                arr.forEach(element => {
                    element.remove();
                });
            }
            this.isSelected = index;
            this.$store.commit("activeIndex", index);
            this.$router.push("/");
        },
        query_selector(selector) {
            return Array.from(document.querySelectorAll(selector));
        }
    },
    activated() {
        this.$nextTick(() => {
            const styleOption = {
                startPlugColor: '#1a9ee0',
                endPlugColor: '#00cda0',
                gradient: true,
                size: 2,
                dash: { animation: true },
                endPlug: 'behind',
            }
            const styleOption1 = {
                ...styleOption,
                startSocket: 'right',
                endSocket: 'left'
            }
            const styleOption2 = {
                ...styleOption,
                startSocket: 'left',
                endSocket: 'right'
            }
            this.line1 = new LeaderLine({
                ...styleOption1,
                start: document.getElementById('left0'),
                end: document.getElementById('left11'),
            });
            this.line2 = new LeaderLine({
                ...styleOption1,
                start: document.getElementById('left1'),
                end: document.getElementById('left22'),
            });
            this.line3 = new LeaderLine({
                ...styleOption1,
                start: document.getElementById('left2'),
                end: document.getElementById('left33'),
            });
            this.line4 = new LeaderLine({
                ...styleOption2,
                start: document.getElementById('right0'),
                end: document.getElementById('right11'),
            });
            this.line5 = new LeaderLine({
                ...styleOption2,
                start: document.getElementById('right1'),
                end: document.getElementById('right22'),
            });
            this.line6 = new LeaderLine({
                ...styleOption2,
                start: document.getElementById('right2'),
                end: document.getElementById('right33'),
            });
        })

        //获取时间
        this.myDate.day = dayjs().format('YYYY年MM月DD日');
        const weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        this.myDate.week = weekList[dayjs().get('day')]
    },
    mounted() {
        querySystemName().then(res => {
            res.forEach(item => {
                this.system_name += item.name;
            });
        })

        let arr = this.$store.state.navList[0].children.filter((e) => e.path == '/sjgl');
        this.$store.state.navList[0].children.forEach((item) => {
            if (item.children.length > 0) {
                item.children.forEach((items) => {
                    if (arr.length > 0) {
                        items.meta.gly = true
                    } else {
                        items.meta.gly = false
                    }
                    items.meta.type_name = "_" + item.name;
                })
            }
        });
        this.manager_module = this.$store.state.navList[0].children.filter(
            (e) => e.meta.type == "1"
        );
        this.modules.leftModule = this.manager_module.slice(0, 3);
        this.modules.rightModule = this.manager_module.slice(3, 6);
        console.log(this.modules);
        this.$store.commit("homeModule", this.manager_module);
        this.visualizingIndex = this.manager_module.length;
        this.manager_module_backstage = this.$store.state.navList[0].children.filter(
            (e) => e.meta.type == "0"
        );
        this.manager_module_search_qz = this.$store.state.navList[0].children.filter(
            (e) => e.meta.type == "3"
        );
    }
}
</script>

<style lang="scss">
.homepage {
    width: 100%;
    height: 100%;
    background-image: url('../assets/img/homepage/2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .header {
        width: 100%;
        height: 120px;
        background-image: url('../assets/img/homepage/1.png');
        background-size: 90% 73%;
        background-repeat: no-repeat;
        background-position: center 33px;

        h1 {
            font-size: 34px;
            letter-spacing: 7px;
            padding-top: 23px;
            margin-bottom: 0px !important;
            font-family: cursive;
            text-align: center;

            span {
                background-image: linear-gradient(to right, #498ce1, #75f8d2, #498ce1);
                color: transparent;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                filter: drop-shadow(#0ff 0px 0px 12px);
            }
        }

        div {
            margin-top: 40px;
            font-size: 13px;
            color: #75879b;
            text-align: center;
            line-height: initial;
            font-weight: 900;
            letter-spacing: 1;
        }
    }

    .content {
        width: 100%;
        height: calc(100% - 120px);
        background-image: url('../assets/img/homepage/3.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;

        .left-content {
            width: 30%;
            height: 80%;
            margin-top: 4%;
            padding: 30px;

            .leftModule {
                width: 90%;
                height: 33%;
                margin-left: 8%;
                background-image: url('../assets/img/homepage/rightModule.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                position: relative;

                .left-div-0 {
                    background-image: url('../assets/img/homepage/index0.png');
                }

                .left-div-1 {
                    background-image: url('../assets/img/homepage/index1.png');
                }

                .left-div-2 {
                    background-image: url('../assets/img/homepage/index2.png');
                }

                .module-info {
                    width: 100%;
                    height: 100%;
                    padding: 0px 20px;
                    box-sizing: border-box;
                    background-size: 120% 120%;
                    background-repeat: no-repeat;
                    background-position-x: -45px;
                    background-position-y: -23px;
                    cursor: pointer;

                    .info-description {
                        color: white;
                        float: left;
                        margin-top: 16%;
                        margin-left: 55%;

                        &>div:first-child {
                            font-size: 25px;
                            color: #6bc2ef;
                            margin-bottom: 15px;
                        }
                    }
                }

                .selectedModule-left0 {
                    background-image: url('../assets/img/homepage/index0-0.png');

                    .info-description {
                        &>div:first-child {
                            color: orange;
                        }
                    }
                }

                .selectedModule-left1 {
                    background-image: url('../assets/img/homepage/index1-0.png');

                    .info-description {
                        &>div:first-child {
                            color: orange;
                        }
                    }
                }

                .selectedModule-left2 {
                    background-image: url('../assets/img/homepage/index2-0.png');

                    .info-description {
                        &>div:first-child {
                            color: orange;
                        }
                    }
                }
            }
        }

        .center-content {
            width: 40%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            .center-img {
                width: 500px;
                max-width: 500px;
                height: 500px;
                background-image: url('../assets/img/homepage/6.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                animation: roate 50s infinite linear;
            }

            @keyframes roate {
                0% {
                    transform: rotateZ(0);
                    -ms-transform: rotateZ(0);
                    -moz-transform: rotateZ(0);
                    -webkit-transform: rotateZ(0);
                    -o-transform: rotateZ(0);
                }

                100% {
                    transform: rotateZ(360deg);
                    -ms-transform: rotateZ(360deg);
                    -moz-transform: rotateZ(360deg);
                    -webkit-transform: rotateZ(360deg);
                    -o-transform: rotateZ(360deg);
                }
            }
        }

        .pulse {
            position: absolute;
            width: 500px;
            height: 500px;
            border: 1px solid #3399ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn 5s ease-out;
            -moz-animation: warn 5s ease-out;
            animation: warn 5s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px #50a2f5;
            /* 阴影效果 */
        }

        .pulse1 {
            position: absolute;
            width: 500px;
            height: 500px;
            border: 1px solid #50a8ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn 7s ease-out;
            -moz-animation: warn 7s ease-out;
            animation: warn 7s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px #3399ff;
            /* 阴影效果 */
        }

        .pulse2 {
            position: absolute;
            width: 500px;
            height: 500px;
            border: 1px solid #50a8ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn 9s ease-out;
            -moz-animation: warn 9s ease-out;
            animation: warn 9s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px #3399ff;
            /* 阴影效果 */
        }

        @keyframes warn {
            from {
                opacity: 0.5;
                transform: scale(0);
            }

            to {
                opacity: 0;
                transform: scale(1);
            }
        }

        .right-content {
            width: 30%;
            height: 80%;
            margin-top: 4%;
            padding: 30px;

            .rightModule {
                width: 90%;
                height: 33%;
                margin-right: 8%;
                background-image: url('../assets/img/homepage/rightModule.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                position: relative;

                .right-div-0 {
                    background-image: url('../assets/img/homepage/index10.png');
                }

                .right-div-1 {
                    background-image: url('../assets/img/homepage/index11.png');
                }

                .right-div-2 {
                    background-image: url('../assets/img/homepage/index12.png');
                }

                .module-info {
                    width: 100%;
                    height: 100%;
                    padding: 0px 20px;
                    box-sizing: border-box;
                    // background-image: url('../assets/img/homepage/12.png');
                    background-size: 120% 120%;
                    background-repeat: no-repeat;
                    background-position-x: -45px;
                    background-position-y: -23px;
                    cursor: pointer;

                    .info-description {
                        color: white;
                        float: left;
                        margin-top: 16%;
                        margin-left: 55%;

                        &>div:first-child {
                            font-size: 25px;
                            color: #6bc2ef;
                            margin-bottom: 15px;
                        }
                    }
                }

                .selectedModule-right0 {
                    background-image: url('../assets/img/homepage/index10-0.png');

                    .info-description {
                        &>div:first-child {
                            color: orange;
                        }
                    }
                }

                .selectedModule-right1 {
                    background-image: url('../assets/img/homepage/index11-0.png');

                    .info-description {
                        &>div:first-child {
                            color: orange;
                        }
                    }
                }

                .selectedModule-right2 {
                    background-image: url('../assets/img/homepage/index12-0.png');

                    .info-description {
                        &>div:first-child {
                            color: orange;
                        }
                    }
                }
            }
        }

        .bk-homeapge-animation {
            position: relative;

            &::before {
                content: "";
                position: absolute;
                top: 7.6%;
                left: 4.2%;
                right: 3.2%;
                bottom: 7.6%;
                border-radius: 13px;
                border: 1px solid #17ab9e;
                animation: clippathss 12s infinite linear;
                pointer-events: none;
            }

            &::after {
                content: "";
                position: absolute;
                top: 7.6%;
                left: 4.2%;
                right: 3.2%;
                bottom: 7.6%;
                border-radius: 13px;
                border: 1px solid #1598c5;
                animation: clippathss 12s infinite linear reverse;
                pointer-events: none;
            }
        }

        @keyframes clippathss {

            0%,
            100% {
                clip-path: inset(0 0 95% 0);
            }

            25% {
                clip-path: inset(0 95% 0 0);
            }

            50% {
                clip-path: inset(95% 0 0 0);
            }

            75% {
                clip-path: inset(0 0 0 95%);
            }
        }
    }
}
</style>