<style scoped>
/deep/.el-menu{
  border-right: none !important
}
.iconText{
  margin-right: 10px;
}
</style>
<style>
  .home-nav {
    width: 100%;
    height: 100%;
    /* font-family: perfectFont; */
    user-select: none;
  }

  .log-box {
    width: 100%;
    height: 13.19%;
  }

  .log-box {
    background-color: #f4f5f9;
  }

  .log-box>div {
    height: 100%;
    width: 100%;
    background: #3d3b4f;
    /* border-radius:0px 40px 40px 0px; */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .log-box img {
    width: 42px;
  }

  .home-nav .home-menu-box {
    height: 86.81%;
    overflow: hidden;
  }

  .home-nav .home-menu {
    padding: 0 8px;
    height: 100%;
    overflow-y: scroll;
  }

  .home-nav .home-menu .home-menu-item {
    color: rgba(255, 255, 255, 1);
    font-size: 13px;
    cursor: pointer;
    transition: all linear 0.2s;
    background-color: #f4f5f9;
    border-radius: 4px;
    overflow: hidden;
    font-family: "perfectFont";
  }

  .home-nav .home-menu .home-menu-item>div {
    padding: 0 0 0 15px;
    background-color: #3d3b4f;
    height: 50px;
    line-height: 50px;
  }

  .home-nav .home-menu .home-menu-item.active {
    background-color: #3d3b4f;
  }

  .home-nav .home-menu .home-menu-item.active>div {
    /* font-weight: bold; */
    color: #fff;
    opacity: 1;
    transition: all linear 0.2s;
    background-color: #409efe;
    /* border-radius: 19px 0 0 19px; */
  }

  .home-nav .home-menu .home-menu-item>div .iconfont {
    padding-right: 10px;
  }
</style>
<template>
  <div class="home-nav">
    <div class="log-box" :class="[activeIndex !== 0 ? 'fillet-none' : '']">
      <div>
        <img src="../../assets/img/logo.png" alt />
      </div>
    </div>
    <div class="home-menu-box" style="overflow-y: scroll;">
      <!-- <ul class="home-menu">
        <li class="home-menu-item" v-for="(item, index) in navList" :key="index"
          :class="[index === activeIndex ? 'active' : '']" @click="changeMenu(item, index)">
          <div>
            <i class="iconfont" :class="[item.MenuStyle ? JSON.parse(item.MenuStyle).icon : '']"></i>
            <span>{{item.MenuName}}</span>
          </div>
        </li>
      </ul> -->
      <el-menu
        class="el-menu-vertical-demo"
        background-color="#3d3b4f"
        text-color="#fff"
        active-text-color="#409efe" :router="true"
        :default-active="$route.path">
        <template v-for="(item,index) in navList">
          <template v-if="item.GCode!='默认'">
            <el-submenu :index="item.list&&item.list.length>0&&item.list[0].MenuUrl?item.list[0].MenuUrl:String(index)">
              <template slot="title">
                <span>{{ item.GCode }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="Child.MenuUrl" v-for="(Child,i) in item.list" :route="{path:Child.MenuUrl}"
                >
                <i class="iconfont iconText"
                :class="[Child.MenuStyle.icon]"></i>
                <span>{{ Child.MenuName }}</span>
              </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </template>
          <template v-else>
            <template v-for="(Child,i) in item.list">
              <el-menu-item :index="Child.MenuUrl" @click="goUrl(Child)"
                >
                <i class="iconfont iconText"
                :class="[Child.MenuStyle.icon]"></i>
                <span>{{ Child.MenuName }}</span>
              </el-menu-item>
            </template>
          </template>
        </template>
      </el-menu>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        activeIndex: 0,
        navList: [{
            class: "iconfont iconyibiaopan",
            name: "仪表盘",
            path: "/Home",
          },
          {
            class: "iconfont icondaiban",
            name: "待办事项",
            path: "/waitMatter",
          },
          {
            class: "iconfont iconxiansuo",
            name: "线索",
            path: "/clueManagement",
          },
          {
            class: "iconfont iconkehu",
            name: "客户",
            path: "/customerManage",
          },
          {
            class: "iconfont iconkehu1",
            name: "联系人",
            path: "/contactsManagement",
          },
          {
            class: "iconfont icongonghaiguanli",
            name: "公海",
            path: "/watersManagement",
          },
          {
            class: "iconfont iconshangji",
            name: "商机",
            path: "/businessManagement",
          },
          {
            class: "iconfont iconhetong",
            name: "合同",
          },
          {
            class: "iconfont iconchanpin1",
            name: "产品",
          },
          {
            class: "iconfont icondingdan1",
            name: "订单",
          },
        ],
      };
    },
    watch:{
      '$route':{
        handler(n,o){

        },
        deep: true,
        immediate: true
      }
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.userInfo = userInfo;
      if (userInfo && userInfo.UserMenu && userInfo.UserMenu.length > 0) {
        for(let i=0;i<userInfo.UserMenu.length;i++){
            for(let j=0;j<userInfo.UserMenu[i].ChildMenu.length;j++){
              for(let z=0;z<userInfo.UserMenu[i].ChildMenu[j].NewChildMenu.length;z++){
                for(let y=0;y<userInfo.UserMenu[i].ChildMenu[j].NewChildMenu[z].list.length;y++){
                  if(userInfo.UserMenu[i].ChildMenu[j].NewChildMenu[z].list[y].MenuStyle){
                    userInfo.UserMenu[i].ChildMenu[j].NewChildMenu[z].list[y].MenuStyle = JSON.parse(userInfo.UserMenu[i].ChildMenu[j].NewChildMenu[z].list[y].MenuStyle)
                  }
                }
              }
            }
          }
        this.navList = userInfo.UserMenu[0].ChildMenu[0].NewChildMenu;
       
      }

      let $this = this;
      this.MsgBus.$on("setLeftNav", function (val) {
        $this.activeIndex = 0;
        if (userInfo && userInfo.UserMenu && userInfo.UserMenu.length > 0) {
          $this.navList = userInfo.UserMenu[0].ChildMenu[val].NewChildMenu;
        }
      });
    },
    methods: {
      goUrl(item){
        if(!item.MenuUrl) return
        this.$router.push({
          path: item.MenuUrl,
        });
      },
      changeMenu: function (item, ind) {
        this.activeIndex = ind;
        this.$router.push({
          path: item.MenuUrl,
        });
      },
    },
  };
</script>