<template>
    <div class="homepage">
        <div class="header">
            <h1><span>东部战区心理战训练系统</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 == item.id ? ('selectedModule-left'+index) : '','left-div-'+index]"
                        @click="choiceModule(item.id)">
                        <div class="info-description">
                            <div v-text="item.title"></div>
                            <div v-text="item.eg"></div>
                        </div>
                    </div>
                    <div style="position: absolute;top:50%;right: 2.3%;" :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%;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%;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 == item.id ? ('selectedModule-right'+index) : '','right-div-'+index]"
                        @click="choiceModule(item.id)">
                        <div class="info-description">
                            <div v-text="item.title"></div>
                            <div v-text="item.eg"></div>
                        </div>
                    </div>
                    <div style="position: absolute;top:50%;left: 6.1%;" :id="'right'+index"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LeaderLine from "../util/leader-line.min";
import dayjs from 'dayjs';
export default {
    name: 'homepage',
    data() {
        return {
            isSelected: 0,
            modules: {
                leftModule: [
                    { id: 1, title: '目标对象库', eg: 'Target Object Library' },
                    { id: 2, title: '战法策略库', eg: 'Method Strategy Library' },
                    { id: 3, title: '信息制品库', eg: 'Infomation product Library' },
                ],
                rightModule: [
                    { id: 4, title: '导调控制模块', eg: 'Pilot Control Module' },
                    { id: 5, title: '学习训练模块', eg: 'Learning And Training Module' },
                    { id: 6, title: '新技术实验模块', eg: 'New Technology Experiment Module' },
                ]
            },
            line1:null,
            line2:null,
            line3:null,
            line4:null,
            line5:null,
            line6:null,
            myDate:{
                day:null,
                week:null
            }
        }
    },
    methods: {
        choiceModule(id) {
            let arr = this.query_selector('.leader-line');
            if(arr.length>0){
                arr.forEach(element => {
                    element.remove();
                });
            }
            this.isSelected = id;
            this.$store.commit("activeIndex", id-1);
            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')]
    },
}
</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>