<template>
    <el-container class="myContainer">
        <el-header class="myHeader">
            <el-menu default-active="1" class="second-router" mode="horizontal" @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>
        </el-header>
        <el-main class="myMain">
            <keep-alive>
                <router-view> </router-view>
            </keep-alive>
        </el-main>
    </el-container>
</template>

<style lang="scss">
.myContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;

    .myHeader {
        width: 100%;
        height: 40px !important;
        padding: 0px 60px;

        .el-menu.el-menu--horizontal {
            border: none;

            &>.el-menu-item {
                height: 40px;
                line-height: 40px;
                border-bottom: none !important;

                &:not(:first-child) {
                    margin-left: 10px;
                }
            }
        }
    }

    .myMain {
        width: 100%;
        height: calc(100% - 40px);
        padding: 0px 20px !important;
        background-color: transparent;
    }
}
</style>

<script>
import li_hover from "../../assets/img/main/04.png";
import bottom from "../../assets/img/main/bottom.png";
export default {
    name: 'wfzy',
    provide() {
        return {
            reload: this.reload
        }
    },
    data() {
        return {
            li_hover: li_hover,
            bottom: bottom,
            module: [],
            index: 0,
            choice_status: 0,
            isRouterAlive: true
        }
    },
    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) { },
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            })
        }
    },
    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);

        for (let i = 0; i < this.module.length; i++) {
            if (this.module[i].name == this.$route.name) {
                this.choice_status = i;
            }
        }
    },
    computed: {
        // module(){
        //     // return this.$store.state.navList[0].children.//一级目录
        //     // filter(n=>n.icon)//过滤掉默认
        //     // [3].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>