<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 && item.subs.length">
                    <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
        }
    },
    data() {
        return {
            items: [],
            // items:[{title:'组件',icon:'el-icon-menu',index:'item',subs:[{title:'讨论组件',icon:'el-icon-setting',index:'discuss-list'},{title:"问卷管理",icon:"el-icon-setting",index:"question-naire"},{title:"举报管理",icon:"el-icon-setting",index:"report-set"}]},]
        }
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    },
    created() {
        vm = this
        const navs = sessionStorage.getItem('DISCUSS_CENTER_NAVS')

        vm.getNav()
    },
    methods: {
      getNav() {
        this.POST('/basic-data/menu/list', { systemType: 26 }).then(res => {
          if (res.code == '000000') {
            const { vueMenuDtos } = res.data;

            this.items = vueMenuDtos;
            sessionStorage.setItem('DISCUSS_CENTER_NAVS', JSON.stringify(vueMenuDtos));
            // 做当前路由无权限时处理
            this.checkAuth(this.$route.path.split('/')[1], vueMenuDtos);
          }
        });
      },
      checkAuth(path, navs) {
        let navList = getNavs(navs);

        function getNavs(arr) {
          let nvs = [];
          for (let i = 0; i < arr.length; i++) {
            const nav = arr[i];
            const subs = nav.subs;

            if (subs.length) {
              nvs = nvs.concat(getNavs(subs));
            } else {
              nvs.push(nav.index);
            }
          }
          return nvs;
        }
        // debugger
        if (navList.indexOf(path) == -1) {
          this.$router.push(`/${navList[0]}`);
        }
      }
    }
}
</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>


