<template>
    <transition 
        appear               
		name="animate__animated animate__move"
		enter-active-class="animate__slideInDown"
        leave-active-class="animate__slideOutUp">
        <div class="widget-bigScreenHeader">
            <div class='header'>
                <div class='title'>
                    <div class="sysIcon"></div>
                    <div class="titleInfo">
                        <div class="maintitle">
                            <div class="caption">{{title}}</div>
                            <div class="splitLine"></div>
                            <el-select ref='stlectTree' v-model="treeSelectText" placeholder="" :popper-append-to-body="false">
                                <el-option :value="treeValue.value" :label="treeValue.label" style="max-width: 260px;height: auto;padding:0;">
                                    <el-tree :data="datas"
                                        :props="defaultProps"
                                        :expand-on-click-node="false"
                                        default-expand-all=""
                                        node-key="pbsTree"
                                        highlight-current
                                        @node-click="nodeClick"
                                        ref="tree" 
                                    />
                                </el-option>
                            </el-select>
                        </div>
                        <div class="subtitle">{{subtitle}}</div>
                    </div>
                </div>
                <div class="menu" v-show="treeValue.value=='3'">
                    <ul class="main">
                        <li v-for="item in menuList" :key="item.name">
                            <a  :name='item.name' 
                            :class="(currentActive===item.label)?'pick-on':''"
                            @click="currentActive=item.label"
                            >{{item.label}}</a>
                        </li>
                    </ul>
                </div>
                <div class="otherItem">
                    <div class="specificTime" >{{specificTime}}</div>
                    <div class="entrySys" @click="enterSys()">{{operationName}}</div>
                </div>
            </div>  
            <div class="underline"></div>
        </div>
    </transition>
</template>

<script>
import Config from './config.json'
import { getUserMenu } from '@/api/user'
export default {
    name:"bigScreenHeader",//大屏头部菜单栏
    data(){
        return{
            title:null,//标题
            subtitle:null,//副标题
            menuList:[],//菜单栏配置
            currentActive:'',//当前激活模块
            specificTime:null,//系统当前时间
            operationName:null,
            //
            treeSelectText: '三峡发展',
            treeValue: {
                value:null,
                label:null,
            },
            datas: [{
                name: '三峡发展',
                value:'1',
                children: [{
                    name: '三峡分公司',
                    value:'2',
                    children: [{
                        name: '宜昌两网二期',
                        value:'3',
                    }]
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'name'
            }
        }
    },
    computed:{
        config(){
            return Config
        },
        routerData(){
            return this.$store.state.routeSetting.addRoutes
        }
    },
    mounted(){
        this.getUserActiveModule();
        this.title=this.config.title
        this.subtitle=this.config.subtitle
        // this.menuList=this.config.menuList
        this.showCurrentTime()
        this.getEnterText()
    },
    watch:{
        treeValue:{
            handler(val,oval){

            },
            deep:true
        },
        currentActive:{
            handler(n,o){
                this.activeModule(n)
                this.$store.state.bigScreen.currentActive=n
            },
            // immediate:true
        },
    },
    methods:{
        // 点击tree节点
        nodeClick(item) {
            const {name,value} = item
            this.$set(this.treeValue, 'value', value)
            this.$set(this.treeValue, 'label', name)
            this.treeSelectText = name
            this.$refs.stlectTree.blur()
        },
        //获取用户激活模块
        getUserActiveModule(){
            const userId = sessionStorage.getItem('userId') || this.$store.state.user.userId
            getUserMenu(userId)
            .then((res) => {
                let arr = res.result.filter((item)=>item.type ==='groupPage')
                let sort=0
                arr[0].childrens.forEach(item => {
                    if(item.statusFlag==='1'){
                        if(item.sort>sort){
                            this.menuList.push({
                                name:item.name,
                                label:item.label
                            })
                        }else{
                            this.menuList.unshift({
                                name:item.name,
                                label:item.label
                            })   
                        }
                        sort=item.sort
                    }
                });
                // this.currentActive=this.menuList[0].label
            })
            .catch((err) => {
                console.log(err)
            })
        },
        //进入系统
        enterSys(){
            if(!this.routerData.some((item) => item.label === '首页')&&!this.routerData.some((item) => item.label === '地图')){
                this.logout()
            }else{
                this.$router.push({ path: '/' })
            }
        },
        async logout() {
            await this.$store.dispatch('user/logout')
            this.$router.push('/login')
        },
        getEnterText(){
            if(!this.routerData.some((item) => item.label === '首页')&&!this.routerData.some((item) => item.label === '地图')){
                this.operationName='退出系统'
            }else{
                this.operationName='进入系统'
            }
        },
        //当前激活模块
        activeModule(module){
            this.$parent.showMonitoringCenter=module=='工程全景'?true:false
            this.$parent.showOverviewData=module=='管网工程'?true:false
        },
        showCurrentTime(){
            this.specificTime=getnow();
            //时间显示
            function getnow(){
                let mynow = new Date();//默认的获取的是当前时间
                //通过调用日期对象的方法来重新获取当前的日期时间
                //mynow.setFullYear(2016);
                let year = mynow.getFullYear();//获取年
                let month = mynow.getMonth()+1;//获取月
                let day = mynow.getDate();//获取日
                let hour =mynow.getHours();//获取小时
                let minute =mynow.getMinutes();//获取分钟
                let second =mynow.getSeconds();//获取秒
                let strdate = year+"年"
                +(month < 0 ?"00" : ("0"+month).slice(-2))+"月"
                +(day < 0 ?"00" : ("0"+day).slice(-2))+"日 "
                +(hour < 0 ?"00" : ("0"+hour).slice(-2))+":"
                +(minute < 0 ?"00" : ("0"+minute).slice(-2))+":"
                +(second < 0 ?"00" : ("0"+second).slice(-2))+"";
                return strdate
            }
            //动态显示时间
            setInterval(()=>{
                this.specificTime=getnow();
            },100)
        },
    }
}
</script>

<style lang='scss' scoped>
.animate__slideInDown,.animate__slideOutUp{
    animation-duration: 3s;//动画持续时间
    animation-delay: 0s;//动画延迟时间
}
.widget-bigScreenHeader{
    width: 100%;
    position: absolute;
    z-index: 3;
    background: linear-gradient(#021a2a, rgba(2,26,42,0.3));
    font-family: Source Han Sans CN;
    //public size
    $size30:.15625rem /* 30/192 */;
    $size28:.145833rem /* 28/192 */;
    $size20:.104167rem /* 20/192 */;
    $size17:.088542rem /* 17/192 */;
    $size16:.083333rem /* 16/192 */;
    $size14:.072917rem /* 14/192 */;
    $size10: .052083rem /* 10/192 */;
    $size8: .041667rem /* 8/192 */;
    $size3: .015625rem /* 3/192 */;
    $size1:.005208rem /* 1/192 */;
    .header {
        width: 100%;
        height: .375rem /* 72/192 */;
        display: flex;
        flex-flow: row nowrap;
        .title {
            padding: 0 $size20;
            display: flex;
            justify-content: center;
            align-items: center;
            filter: hue-rotate(0deg);
            transition: all 1s linear;
            .sysIcon{
                background: url("~@/views/groupPage/images/标题/sysIcon.png") no-repeat;
                background-size: 100% 100%;
                width: .239583rem /* 46/192 */;
                height: .239583rem /* 46/192 */;
                margin-right: .052083rem /* 10/192 */;
            }
            .titleInfo{
                display: flex;
                flex-flow: column;
                justify-content: space-around;
                height: 60%;
                .maintitle{
                    display: flex;
                    align-items: center;
                    .caption{
                        white-space: nowrap;
                        font-size: $size20;
                        font-weight: bold;
                        color: #FFFFFF;
                        text-shadow: 0 0 10px rgba(65, 105, 225,0.3),0 0 20px rgba(65, 105, 225,0.3),0 0 30px rgba(65, 105, 225,0.3),0 0 40px rgba(65, 105, 225,0.3);
                    }
                    .splitLine{
                        width: .005208rem /* 1/192 */;
                        height:60%;
                        background: #FFFFFF;
                        opacity: 0.6;
                        margin: 0 .0625rem /* 12/192 */;
                    }
                    /deep/ .el-select {
                        width: 1.041667rem /* 200/192 */;
                        font-size: .104167rem /* 20/192 */;
                        font-weight: 500;
                        font-family: Source Han Sans CN-MEDIUM;
                        .el-input__inner{
                            font-family: Source Han Sans CN-MEDIUM;
                            padding: 0;
                            background: transparent;
                            border: none;
                            color: #2BA7FF;
                        }
                        .el-input {
                            font-size: inherit;
                        }
                        // .el-input__suffix{
                        //     right: .15625rem /* 30/192 */;
                        // }
                        .el-select__caret{
                            display: flex;
                            align-items: center;
                        }
                        .el-icon-arrow-up:before {
                            content: '';
                            display: block;
                            width: 0;
                            height: 0;
                            border-top: 10px solid #2BA7FF;
                            border-right: 7px solid transparent;
                            border-left: 7px solid transparent;
                            transform: rotate(180deg);
                        }
                    }
                    /deep/ .el-tree{
                        background: #023C5D;
                        color: #F9FDFF;
                        .el-tree-node__content{
                            background: transparent;
                        }
                        .el-tree-node__content:hover{
                            background: transparent;
                            color: #2BA7FF;
                        }
                    }
                    /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
                            background: transparent;
                            color: #2BA7FF;
                    }
                }
                .subtitle{
                    font-size:.057292rem /* 11/192 */;
                    font-weight: 400;
                    color: #FEFFFF;
                }
            }
        }
        .menu{
            // width: 60%;
            white-space: nowrap;
            ul {
                list-style: none;
                padding: $size10;
                margin: 0 0 0 $size10;
            }
            .main {
                width: 100%;
                display: flex;
            }
            .main > li {
                margin: $size8 $size20;
                float: left;
            }
            .main > li a{
                text-align: center;
            }
            a {
                text-decoration: none;
                color: #FEFEFE;
                text-transform: capitalize;
                display: block;
                padding: $size10 0;
                transition: background-color 0.5s ease-in-out;
                font-size: $size16;
                font-weight: 400;
            }
            a:hover,.pick-on {
                cursor: pointer;
                color: #0EA7FF;
                font-weight: bold;
                border-bottom: 2px solid;
            }
        }
        .otherItem{
            width: 20%;
            height: 100%;
            font-size: $size14;
            font-weight: 400;
            display: flex;
            align-items: center;
            position: absolute;
            right: 20px;
            .specificTime{
                flex: 2;
                top: 25%;
                text-align: center;
                font-weight: 400;
                color: #A8D3F1;
            }
            .entrySys {
                flex: 0.6;
                color: #A8D3F1;
                background: url("~@/views/groupPage/images/entrySys.png") no-repeat;
                background-size: 100% 100%;
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                white-space: nowrap;
            }
            .entrySys:hover {
                cursor: pointer;
                color: #A8D3F1;
                background: url("~@/views/groupPage/images/entrySysHover.png") no-repeat;
                background-size: 100% 100%;
            }
        }
    }
    .underline{
        width: 9.796875rem /* 1881/192 */;
        height: .010417rem /* 2/192 */;
        background: url("~@/views/groupPage/images/标题/顶部线.png") no-repeat center center;
        background-size: 100% 100%;
        margin: 0 $size20;
    }
}
</style>