<template>
  <div class="wrapper" id="navbar" style="background-color: #2F739B !important;">
    <!-- <el-scrollbar class=""> -->
    <!-- <el-scrollbar class="el-scrollbar"> -->
      <el-menu :default-active="$route.path" :unique-opened="true" class="el-menu-vertical-demo" router style="background-color: #2F739B !important;">
        <!-- router属性 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
        <!--2021/5/21 更换导航栏位置开始-->
        <!--<template v-for="(item,bindex) in currentRouterArr">
          <div :key="bindex">
            <el-menu-item :index="item.path" :data-id="item.path" v-show="item.meta.selected == 'true'">
              <span slot="title">
                <i :class="item.meta.icon"></i>
                {{item.meta.title}}
              </span>
            </el-menu-item>
            &lt;!&ndash; 多个子导航 &ndash;&gt;
            <el-submenu :index="item.path" v-if="item.children && item.children.length > 0" >
              <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>-->
        <!--2021/5/21 更换导航栏位置结束-->
        <template v-for="(item ,bindex) in getModuleArr">
          <div :key="bindex">
            <el-submenu :index="item.path" v-if="item.children && item.children.length > 0">
              <span slot="title" style="color: white;font-size: 16px">
                <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>
  </div>
</template>
<style>
  .el-submenu__title:hover{
    background: #08010033 !important;
  }
  /*.el-submenu__title span:hover{
    color: red !important;
  }*/
</style>

<style lang="scss" scoped>
#navbar {
  width: 200px;
  height: 95% !important;
  overflow: hidden;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.eventrecive{
  background:url("../../assets/eventrecive.png")no-repeat center;
  display:inline-block;
  height: 15px;
  width: 15px;
}
.needalarm{
  background:url("../../assets/needalarm.png")no-repeat center;
  display:inline-block;
  height: 15px;
  width: 15px;
}
.dealmaster{
  background:url("../../assets/dealmaster.png")no-repeat center;
  display:inline-block;
  height: 15px;
  width: 15px;
}
.numberplan{
  background:url("../../assets/numberplan.png")no-repeat center;
  display:inline-block;
  height: 15px;
  width: 15px;
}
.materialsupport{
  background:url("../../assets/materialsupport.png")no-repeat center;
  display:inline-block;
  height: 15px;
  width: 15px;
}
.basemessage{
  background:url("../../assets/basemessage.png")no-repeat center;
  display:inline-block;
  height: 15px;
  width: 15px;
}
.devicemanage{
  background:url("../../assets/devicemanage.png")no-repeat center;
  display:inline-block;
  height: 15px;
  width: 15px;
}
.urgentpractice{
  background:url("../../assets/urgentpractice.png")no-repeat center;
  display:inline-block;
  height: 15px;
  width: 15px;
}
.yingjichuzhifa{
  background:url("../../assets/yingjichuzhifa.png")no-repeat center;
  display:inline-block;
  height: 15px;
  width: 15px;
}
</style>
<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, 
    arr  =  that.getModuleArr.length > 0 ? that.getModuleArr : METHOD.titleArray,
    resArr = arr.filter((ele: any) => ele.path == that.$route.matched[0].path )
    if(resArr.length > 0)  that.currentRouterArr = resArr[0].children;
  }
  created() {
    let that = this;
    that.renderNavBar();
    // let toUrlObj = that.currentRouterArr.find( (ele:any) => ele.meta.selected == 'true');
    // if( toUrlObj.path != that.$router.currentRoute.path )that.$router.push( toUrlObj.path );
    
  }
}
</script>