<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-blacklist",
        //   index: "blacklist"
        // },
        // {
        //   title: "疲劳度控制",
        //   icon: "el-icon-set-up",
        //   index: "fatigue-control"
        // },
        {
          title: "协议管理",
          icon: "el-icon-history-push",
          index: "protocol-list"
        },
        {
          title: "创建协议",
          icon: "el-icon-document-add",
          index: "create-protocol"
        },
        {
          title: "查看协议",
          icon: "el-icon-chat-line-square",
          index: "protocol-detail"
        },     
        {
          title: "历史版本",
          icon: "el-icon-chat-line-square",
          index: "protocol-history"
        }
      ]
    };
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    }
  },
  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">
@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>


