<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
    },
    authList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      items: []
      // items: [{ title: '协议管理', icon: 'el-icon-history-push', index: 'protocol-list' }]
    };
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    }
  },
  created() {
    vm = this;
    const navs = sessionStorage.getItem('PROT_CENTER_NAVS');

    if (navs != null) {
      vm.items = JSON.parse(navs);
    } else {
      vm.getNav();
    }
  },
  watch: {},
  methods: {
    getNav() {
      this.POST('basic-data/menu/list', { systemType: 29 }).then(res => {
        if (res.code == '000000') {
          const { vueMenuDtos } = res.data;

          this.items = vueMenuDtos;
          sessionStorage.setItem('PROT_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;
      }
      if (navList.indexOf(path) == -1) {
        this.$router.push(`/${navList[0]}`);
      }
    }
  }
};
</script>
<style lang="scss">
@mixin el-icon-config {
  width: 18px;
  height: 18px;
  margin: 0 8px 0 3px;
  background-size: 18px 18px;
}
.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;
    // }
    // APP推送历史
    .el-icon-history-push {
      background: url("../../assets/image/history-push.png");
      @include el-icon-config;
    }
    .is-active .el-icon-history-push {
      background: url("../../assets/image/history-push-selected.png");
      @include el-icon-config;
    }
    // 策略管理
    .el-icon-stratety-manage {
      background: url("../../assets/image/stratety-manage.png");
      @include el-icon-config;
    }
    .is-active .el-icon-stratety-manage {
      background: url("../../assets/image/stratety-manage-selected.png");
      @include el-icon-config;
    }
    // 黑名单
    .el-icon-blacklist {
      background: url("../../assets/image/blacklist.png");
      @include el-icon-config;
    }
    .is-active .el-icon-blacklist {
      background: url("../../assets/image/blacklist-selected.png");
      @include el-icon-config;
    }
  }
}
</style>


