<template>
    <div id="user">
        <div class="left-nav">
            <el-menu default-active="1" class="el-menu-vertical-demo second-router" @open="handleOpen" @close="handleClose" background-color="transparent" text-color="#fff" @select="handleSelect">
                <template v-for="(item, index) in module">
                    <el-menu-item :class="index == choice_status ? 'change-bg' : 'change-bg1'" :index="(index + 1).toString()" @click="href_choice(item, index)">
                        <div>
                            <i :class="item.icon"></i>
                            <span v-text="item.name"></span>
                        </div>
                    </el-menu-item>
                </template>
            </el-menu>
        </div>
        <div class="right-nav">
            <keep-alive>
                <router-view> </router-view>
            </keep-alive>
        </div>
    </div>
</template>

<style lang="scss">
#user {
    width: 100%;
    height: 100%;
    margin: 0;
    // padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    .left-nav {
        width: 7.5%;
        // min-width: 144px;
        height: 100%;
        float: left;
        background: url(../../assets/img/main/24.png) no-repeat;
        background-size: 100% 100%;
    }

    .left-nav > ul {
        width: 100%; 
        margin-top: 70%;
        border-right: none !important;
    }

    .el-menu-item:hover,
    .el-menu-item:focus {
        outline: none;
        background-color: transparent !important;
    }

    .bottom {
        background-size: 100% 100%;
    }

    .right-nav {
        width: 92.5%;
        height: 100%;
        float: left;
        background: url(../../assets/img/main/25.png) no-repeat;
        background-size: 100% 100%;
    }
}
</style>

<script>
import li_hover from "../../assets/img/main/04.png";
import bottom from "../../assets/img/main/bottom.png";
export default {
    name: 'user',
    data() {
        return {
            li_hover: li_hover,
            bottom: bottom,
            module: [
            //     { icon: "el-icon-user-solid", text: "用户管理", href: "yhgl" },
            //     { icon: "el-icon-s-grid", text: "角色管理", href: "jsgl" }
            ],
            index: 0,
            choice_status: 0,
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        href_choice(item, index) {
            this.choice_status = index;
            this.$router.push(item.path);
        },
        handleSelect(key, keyPath) { },
    },
    mounted() {
       this.module = this.$store.state.navList[0].children.
       filter(e=>e.meta && e.meta.code == this.$route.meta.parentCode)[0].children.
       filter(e=>e.icon);
    },
    computed:{
        // module(){
        //     // return this.$store.state.navList[0].children.//一级目录
        //     // filter(n=>n.icon)//过滤掉默认
        //     // [6].children.filter(n=>n.icon);//
        //    return this.$store.state.navList[0].children.
        //     filter(e=>e.meta && e.meta.code == this.$route.meta.parentCode)[0].children.
        //     filter(e=>e.icon);
        // }
    }
}
</script>