<template>
    <aside :class="collapsed?'menu-collapsed':'menu-expanded'" id="leftAside">
        <!--导航菜单-->
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose"
                 @select="handleselect"
                 unique-opened router :collapse="collapsed">
            <template v-for="(item,index) in getCurSide" v-if="!item.hidden">
                <el-submenu :index="index+''" v-if="!item.leaf" :key="index">
                    <template slot="title"><i :class="item.iconCls"></i><span>{{ item.name }}</span></template>
                    <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path"
                                  v-if="!child.hidden">{{ child.name }}
                    </el-menu-item>
                </el-submenu>
                <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path" :key="index"><i
                    :class="item.iconCls"></i><span>{{ item.children[0].name }}</span></el-menu-item>
            </template>
        </el-menu>
    </aside>
</template>
<script>
import util from "@/common/js/util";
export default {
    data() {
        return {
            getCurSide: this.$store.state.global.menuTree,
            path: '',
        }
    },
    mounted() {
        let treeData = localStorage.getItem('menuTree') || [];
        let currentTreeData = JSON.parse(treeData);
        // this.getCurSide = this.recursionMenu(currentTreeData);
    },
    computed: {
        collapsed() {
            return this.$store.state.global.collapsed
        },
        dynamicTags() {
            return this.$store.state.global.dynamicTags
        }
    },
    methods: {
        getMenu() {
            return {
                path: '',
                name: '',
                iconCls: '',
                leaf: true,
                children: []
            };
        },
        getChildren(childrenData) {
            let children = [];
            childrenData.forEach(item => {
                children.push({path: item.path, name: item.name});
            });
            return children;
        },
        recursionMenu(treeData) {
            let that = this;
            let menumData = [];
            treeData.forEach(item => {
                let menum = that.getMenu();
                menum.path = item.path;
                menum.name = item.name;
                menum.iconCls = item.icon;
                let children = item.children;
                if (children != null && children.length > 0 && item.type <= 2) {
                    menum.leaf = false;
                    menum.children = that.getChildren(children);
                }
                if (menum.leaf) {
                    menum.children = [{path: item.path, name: item.name}];
                }
                menumData.push(menum);
            });
            return menumData;
        },
        handleselect(key) {
					util.handleselect(key,this,1)
            // let isHas = this.dynamicTags.some((item) => {
            //     return item.path == key
            // })
            // this.getCurSide.map((item) => {
            //     item.children.map((v) => {
            //         if (v.path === key && !isHas) {
            //             this.dynamicTags.map((m) => {
            //                 return m.type = 'info'
            //             })
            //             this.dynamicTags.push(v)
            //         }
            //     })
            // })
            // if (this.dynamicTags.length > 1) {
            //     this.dynamicTags.map((m) => {
            //         if (key == m.path) {
            //             this.$set(m, 'type', '')
            //         } else {
            //             this.$set(m, 'type', 'info')
            //         }
            //     })
            // }
            // this.$store.commit('getTopMenu', this.dynamicTags);
        },
    }
}
</script>
<style scoped lang="less">
aside {
    // position: absolute;
    // top: 0px;
    // bottom: 0px;
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 180px;
        min-height: 400px;
    }

    .el-menu {
        height: 100%;
    }

    .collapsed {
        width: 60px;

        .item {
            position: relative;
        }

        .submenu {
            position: absolute;
            top: 0px;
            left: 60px;
            z-index: 99999;
            height: auto;
            display: none;
        }
    }
}

.menu-collapsed {
    flex: 0 0 60px;
    width: 60px;
    z-index: 2000;
}

.menu-expanded {
    flex: 0 0 180px;
    width: 180px;
    z-index: 2000;
}
</style>