<template>
    <div id="slidebar-container" class="slidebar-container">
        <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
            <template v-for="(item,_index) in items">
                <template v-if="item.subs">
                    <el-submenu :index=" 'index_' + _index" :key="item.index">
                        <template slot="title"><i :class="item.icon"></i>{{item.title}}</template>
                        <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="'/'+subItem.index">
                          <i class="sub-icon" :class="subItem.icon"></i>
                          {{subItem.title}}
                        </el-menu-item>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="'/'+item.index" :key="item.index">
                        <i :class="item.icon"></i>{{ item.title }}
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { setTimeout } from 'timers'
import { isNotEmptyUtils } from '../../utils/utils'
let vm = null
export default {
    props: {
        tokenValue: {
            type: String
        },
        authList: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            items: [
                {
                    title: '数据总览',
                    icon: 'el-icon-menu',
                    index: 'home',

                },{
                    title: '教培项目',
                    icon: 'el-icon-message',
                    index: 'item',
                    subs: [
                        {
                            title: '项目组件',
                            icon: 'el-icon-setting',
                            index: 'item-component'
                        },
                        {
                            title: '项目管理',
                            icon: 'el-icon-setting',
                            index: 'item-manager'
                        },
                    ]
                },{
                    title: '系统管理',
                    icon: 'el-icon-menu',
                    index: 'system',
                    subs: [
                        {
                            title: '角色管理',
                            icon: 'el-icon-setting',
                            index: 'role'
                        }
                    ]
                }, {
                  title: '随访管理',
                  icon: 'el-icon-edit-outline',
                  index: 'followup',
                  subs: [
                    {
                      title: '计划管理',
                      icon: 'el-icon-setting',
                      index: 'followup/plan-manage/plan-list'
                    },
                    {
                      title: '预约管理',
                      icon: 'el-icon-setting',
                      index: 'followup/reservation-manage/reservation-list'
                    },
                    {
                      title: '录入管理',
                      icon: 'el-icon-setting',
                      index: 'followup/record-manage/record-list'
                    }
                  ]
                }
            ]
        }
    },
    computed: {
        onRoutes() {
            return this.$route.path;
        }
    },
    created() {
        vm = this
    },
    watch: {
        authList(newVal, oldVal){
            if(!newVal.P001) { // 项目管理
                vm.items[1].subs[1].index = 'blank'
            }
            if(!newVal.P002) { // 组件管理
                vm.items[1].subs[0].index = 'blank'
            }
            if(!newVal.P003) { // 角色管理
                vm.items[2].subs[0].index = 'blank'
            }
        }
    },
    methods: {
    
    }
}
</script>
<style lang="scss">
.slidebar-container {
    display: block;
    position: absolute;
    left: 0;
    top: 64px;
    bottom: 0;
    width: 255px;
    background: #06232C;
    .el-menu {
        background: #06232C;
        border-right: none;
        .sub-icon {
            font-size: 12px;
        }
        .el-menu-item, .el-submenu__title {
            color: #8FA4AC;
        }
        .el-menu-item.is-active {
            color: #fff;
            background: #509284 !important
        }
        .el-menu-item:hover, 
        .el-submenu__title:hover, 
        .slidebar-container .el-menu .el-menu-item:hover, 
        .slidebar-container .el-menu .el-submenu__title:hover {
            color: #fff;
            background: #06232C;
        }
        // .el-menu-item:focus, .el-menu-item:hover {
        //     background: #06232C !important; 
        // }
    }
}
</style>


