<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">
      <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>
    </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: "订单",
        },
      ],
    };
  },
  mounted() {
    let userInfo = this.getLocalStorage();
    this.userInfo = userInfo;
    this.navList = userInfo.UserMenu[0].ChildMenu[0].ChildMenu;
    let $this = this;
    this.MsgBus.$on("setLeftNav", function(val) {
      $this.activeIndex = 0;
      $this.navList = userInfo.UserMenu[0].ChildMenu[val].ChildMenu;
    });
  },
  methods: {
    changeMenu: function(item, ind) {
      this.activeIndex = ind;
      this.$router.push({
        path: item.MenuUrl,
      });
    },
  },
};
</script>
