<template>
  <div class="wrapper" id="navbar">
    <el-scrollbar class="el-scrollbar">
      <el-menu :default-active="$router.currentRoute.path" class="el-menu-vertical-demo" router>
        <!-- router属性 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
        <template v-for="(item,bindex) in currentRouterArr">
          <div :key="bindex">
            <el-menu-item :index="item.redirect" :data-id="item.path" v-if="item.meta.selected == 'true' && item.children.length == 1">
              <span slot="title">
                <i :class="item.meta.icon"></i>
                {{item.meta.title}}
              </span>
            </el-menu-item>
            <!-- 多个子导航 -->
            <el-submenu :index="item.path" v-if="item.children && item.children.length > 1" >
              <span slot="title">
                <i :class="item.meta.icon"></i>
                {{item.meta.title}}
              </span>
              <el-menu-item-group>
                <el-menu-item
                  :index="sitem.path"
                  v-for="(sitem,sindex) in  item.children"
                  :key="sindex"
                >
                  <i :class="sitem.meta.icon"></i>
                  {{sitem.meta.title}}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </div>
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import { State, Getter, Mutation, Action } from "vuex-class";
import { Component, Vue, Provide , Watch} from "vue-property-decorator";
import Layout from "@/views/Layout/index.vue";
import METHOD from "@/utils/methods";
@Component({
  components: {}
})
export default class Navbar extends Vue {
  @Getter("moudleArr") getModuleArr: any;
  @Provide() currentRouterArr:any  = [];
  @Watch("$route") handleRouteChange(router:any): any {
    this.renderNavBar()
  }
  renderNavBar(){
    let that = this;
    that.currentRouterArr = that.getModuleArr;
  }
  created() {
    let that = this;
    that.renderNavBar();
  }
}
</script>
<style lang="scss" scoped>
#navbar {
  $bgColor:#5f5f61;
  $txtColor:#c9c9c9;
  width: 200px;
  height: 100%;
  overflow: hidden;
  .el-menu-item {
    &:hover {
      background: #9fd0ff;
      color: $bgColor;
      i {
        color: $bgColor;
      }
    }
    background: #414d58;
    color: $txtColor;
    i {
      color: $txtColor;
    }
  }
  .el-menu-item.is-active {
    background: #9fd0ff;
    color: $bgColor;
    i {
      color: $bgColor;
    }
  }
  .el-submenu {
    background: #414d58;
    .el-submenu__title {
      &:hover {
        background: #9fd0ff;
        color: $bgColor;
        i {
          color: $bgColor;
        }
      }
      color: $txtColor;
      i {
        color: $txtColor;
      }
    }
    .el-menu-item-group__title {
      display: none;
    }
    .el-menu-item.is-active {
      background: #1f272e;
      color: $txtColor;
    }
  }
}
</style>
<style lang="scss">
.el-submenu__title{
  color: #c9c9c9 !important;
}
.el-menu-item-group__title{
  display:none
}
</style>