<template>
    <div class="layout-side-menu-wrap">
        <div class="side-menu-container">
            <el-menu class="flex-grow-1" mode="horizontal"
                    :default-active="defaultActive"
                    @open="handleOpen"
                    @close="handleClose"
            >
                <MenuTree v-for="(item, i) in menuTree" :key="i" :menu="item" :index="i" />
            </el-menu>
        </div>

    </div>
</template>
<script>
    import { mapState } from 'vuex'
    // import router from '@/router'
    export default {
        components: {
            MenuTree: () => import('./MenuTree')
        },
        data() {
            return {
                defaultActive: '/',
                menuTree:[]
            }
        },
        computed: {
            ...mapState({
                routes: (state) => state.routes,
            }),
        },
        watch: {
            routes(val){
                // console.log('watch',val)
                this.defaultActive = val
            }
        },
        created() 
        {
            if(JSON.parse(sessionStorage.getItem('userInfo')))
            {
                let resources = JSON.parse(sessionStorage.getItem('userInfo')).resources
                this.menuTree = resources[0].children
                this.defaultActive = this.routes
            }
            if(this.menuTree.length>0)
            {
                // 判断当前登录人角色，如果是普通调解员，则默认展示区域且不可选择
                let identifier = this.$store.state.userinfo.roleIdentifierList
                if(identifier.includes('manager') || identifier.includes('admin'))
                {
                    // 案件管理员
                    this.menuTree.unshift({children:[],id:0,menuIcon:"menu-home",name:"调解首页",nameEn:"",pid:0,prefix:"mediate",sort:0,type:1,typeName:"",url:"/workbench"})
                }
                else
                {
                    // 调解员
                    this.menuTree.unshift({children:[],id:0,menuIcon:"menu-home",name:"调解首页",nameEn:"",pid:0,prefix:"mediate",sort:0,type:1,typeName:"",url:"/workbenchcm"})
                }
            }
            else
            {
                this.menuTree.push({children:[],id:0,menuIcon:"menu-home",name:"调解首页",nameEn:"",pid:0,prefix:"mediate",sort:0,type:1,typeName:"",url:"/workbenchcm"})
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>
<style lang="scss">
    .layout-side-menu-wrap {
        // width: 240px;
        height: 100%;
        .side-menu-container {
            height: calc(100%);
            border-right: 1px solid #E4E7ED;
        }
        .el-menu{
            border-right: 0 !important;
        }
        .side-menu-help{
            width: 100%;
            height: $height56;
            padding-left: 20px;
        }
    }
</style>
