<template>
    <div :class="{ nav_container: true, nav_hide: isHide }">
        <ul class="nav_list">
            <li :class="{ nav_item: true, nav_bg: selNavId == v.id }" v-for="(v,k) in navList" :key="k"
                @click="handleNav(v)">
                <div class="icon_box">
                    <img class="img_sel" v-if="selNavId==v.id" src="@/assets/bigScreen/leftNav/icon_22.png" alt="">
                    <img class="img_icon" v-else src="@/assets/bigScreen/leftNav/icon_1.png" alt="">
                </div>
                <span class="nav_name">{{ v.name }}</span>
            </li>
        </ul>
        <div :class="{ more_box: true, more_hide: !isHide }" @click="handleHide">
            <!-- <img v-if="isHide" src="@/assets/bigScreen/leftNav/nav_right.png" alt="">
            <img v-else src="@/assets/bigScreen/leftNav/nav_left.png" alt=""> -->
        </div>
    </div>
</template>

<script>
export default {
    name: 'LeftNav',
    props: {
        selNavId:{
            default: '0',
            type: String
        }
    },
    components: {

    },
    data(){
        return {
            navList: [
                { id: '1', name: this.$dictLabel('node_title1'), path: '/crad', paths: ['crad',] },
                { id: '2', name: this.$dictLabel('node_title2'), path: '/xmind', paths: ['xmind',] },
                { id: '3', name: this.$dictLabel('node_title3'), path: '/matrix', paths: ['matrix'] },
                { id: '4', name: this.$dictLabel('node_title4'), path: '/homeIndex', paths: ['homeIndex'] },
                { id: '5', name: this.$dictLabel('node_title5'), path: '/entrance', paths: ['entrance'] },
            ],
            // selNavId: '0',
            // activePath: 'home',
            isHide: true,
        }
    },
    computed: {
        
    },
    watch: {
        '$route': {
            handler(to, from){
                // console.log('路由变化:', to, from)
                // const path = this.$route.path;  //  当前页面路由
                const toPath = to.path;  //  当前页面路由 地址
                if (!this.activePath) {
                    this.activePath = this.$cache.session.get('activePath');
                }
                // if (!toPath.includes(this.activePath)) {
                //     this.isHide = true
                //     this.navList.forEach(item => {
                //         if (toPath.includes(item.path)) {
                //             this.activePath = item.path
                //             this.$cache.session.set('activePath', v.path);
                //             // this.selNavId = item.id
                //             this.handleNav(item)
                //         }
                //     });
                // } else {
                // }
            },
        immediate: true,  //  立即执行
        // deep: true, // 开启深度监听
        },
    },
    created() {
        if (this.$cache.session.get('activePath')) {
            this.activePath = this.$cache.session.get('activePath');
        }
        // this.activePath = this.$cache.session.get('activePath');
        // this.taskId = this.$route.query.id
        // this.navList = [
        //     { id: 1, name: this.$dictLabel('node_title1'), path: '/crad' },
        //     { id: 2, name: this.$dictLabel('node_title2'), path: '/xmind' },
        //     { id: 3, name: this.$dictLabel('node_title3'), path: '/matrix' },
        //     { id: 4, name: this.$dictLabel('node_title4'), path: '/home' },
        //     { id: 5, name: this.$dictLabel('node_title5'), path: '/entrance' },
        // ]
    },
    mounted(){
        // this.setNavList();
    },
    methods: {
        handleNav(v){
            console.log(this.$route);
            const nowPath = this.$route.path
            
            if (v.path && nowPath !== v.path) {
                this.$router.push(v.path)
                // this.selNavId = v.id
                this.activePath = v.path
                this.$cache.session.set('activePath', v.path);
                this.isHide = true
            }
        },
        handleHide(){
            this.isHide = !this.isHide
        }
    }
}
</script>

<style lang="scss" scoped>
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav_container {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    z-index: 99999;
    width: 263px;
    height: 778px;
    background-image: url('~@/assets/bigScreen/leftNav/bg_nav.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-family: SourceHanSansSC;
    box-sizing: border-box;
    padding-top: 140px;
    padding-left: 20px;
    overflow: hidden;
    .nav_list{
        width: fit-content;
        height: fit-content;
        .nav_item{
            // width: 221px;
            width: 156px;
            height: 54px;
            font-size: 18px;
            font-weight: bold;
            color: #8af3ff;
            border-bottom: 2px solid transparent;
            border-image-source: url('~@/assets/bigScreen/leftNav/nav_line.png');
            border-image-slice: 2;
            border-image-repeat: round; /* 让图片平铺填充整个边框 */

            display: flex;
            align-items: center;
            cursor: pointer;
            .icon_box{
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                .img_sel{
                    width: 30px;
                    height: 30px;
                }
                .img_icon{
                    width: 12px;
                    height: 12px;
                }
                img{
                    user-select: none;
                    pointer-events: none;
                }
            }
            .nav_name{
                margin-left: 10px;
            }
        }
        .nav_item+.nav_item{
            margin-top: 20px;
        }
        .nav_bg{
            background-image: url('~@/assets/bigScreen/leftNav/sel_nav_bg.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .nav_name{
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), /* 白色发光 */
                // 0 0 20px rgba(255, 255, 255, 0.6), 
                // 0 0 30px rgba(255, 255, 255, 0.4); /* 多重发光效果 */
            }
        }
    }
    .more_box{
        width: 38px;
        height: 38px;
        position: absolute;
        top: 50%;
        right: 36px;
        transform: translateY(-50%);
        background-image: url('~@/assets/bigScreen/leftNav/nav_right.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        // img{
        //     user-select: none;
        // }
    }
    .more_hide{
        background-image: url('~@/assets/bigScreen/leftNav/nav_left.png');
    }
}
.nav_hide{
    transform: translate(-180px, -50%);
}
</style>