<template>
  <div class="nav">
    <Menu ref='leftMenu' accordion :active-name="activeName" @on-select='getPathName' @on-open-change="getOpenChange" :open-names="openname">
      <div class="menuli" v-for="item of data" :key="item.menuId">
        <MenuItem :name="item.linkUrl" :to="item.linkUrl" v-if="!item.childMenus"  >
        <i class="iconfont" :class="item.imageUrl"></i>{{item.menuName}}
        </MenuItem>
        <Submenu :key="item.menuId" :name="item.menuName" v-if="item.childMenus" class="menu-submenu-title">
          <template slot="title">
            <i class="iconfont" :class="item.imageUrl" style="margin-right:6px"></i>{{item.menuName}}
          </template>
          <MenuItem class="menuli" v-for="item1 of item.childMenus" :key="item1.menuId" :name="item1.linkUrl" :to="item1.linkUrl">
            {{item1.menuName}}
          </MenuItem>
        </Submenu>
      </div>
    </Menu>
  </div>
</template>
<script>
import utils from '../../libs/utils';
export default {
  name: "Nav",
  props: ['menuId'],
  components:{
  },
  data() {
    const {currRouterName, leftMenus} = utils.toRouter();
    return {
      data: leftMenus,
      activeName: currRouterName,
      menus: [],
      activeId: 0,
      openname: [],
      // menuNameArr: []
    };
  },
  watch: {
      menuId: function (id, oldId) {
        const {currRouterName, leftMenus,currMenuId} = utils.toRouter(id);
        if(sessionStorage.getItem('routname')){
          this.activeName = sessionStorage.getItem('routname')
        } else {
          this.activeName = currRouterName ? currRouterName : leftMenus[0].childMenus[0].linkUrl
        }
        this.data = leftMenus;
        this.openname = [] //// 点击一级菜单设置子级菜单初始化关闭
        this.data.forEach((val,inx)=> {
          if (val.childMenus) {
              val.childMenus.forEach((v,i) => {
              if (v.linkUrl == this.activeName) {
                this.openname = [val.menuName]  // 页面刷新记住子集菜单展开或关闭
              }
              })
          }
        })
        // Update the DOM by 
        // if (this.$store.state.app.siderbar.opened) {
          this.$nextTick(() => {
            this.$refs.leftMenu.updateOpened();
            this.$refs.leftMenu.updateActiveName();
          })
        // }
      },
       // 菜单左侧浏览器前进或后退
      '$route' (to, from) {  
        this.activeName = to.path
      }
    },
  mounted() {
    this.menus= utils.storage('sw_user').menus;
  },
  methods: {
    //选择菜单（MenuItem）时触发
    getPathName(routname){
      let menuNameArr = []
      this.activeName = routname
      this.menus.forEach((item,i) => {
        if (item.childMenus) {
          item.childMenus.forEach((val,index) => {
            if (val.linkUrl == routname) {
                this.activeId = val.parentMenuId 
                menuNameArr.push(item.menuName) 
                menuNameArr.push(val.menuName)
            }
            if (val.childMenus) {
              val.childMenus.forEach((last,lastIndex) => {
                if (last.linkUrl == routname) {
                  menuNameArr.push(item.menuName) 
                  menuNameArr.push(val.menuName)
                  menuNameArr.push(last.menuName)
                }
              })
            }
          })
        }
     })
     this.$emit('getMenuName',this.menuNameArr);
     sessionStorage.setItem('routname', routname);
     sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr));
    },
    //当 展开/收起 子菜单时触发
    getOpenChange(name) {
        // 设置子级菜单展开
      this.openname = name
    },
  }
};
</script>
<style scoped lang="stylus">
.nav {
  width: 250px;
  // height: calc(100vh - 90px);
  height: 100%;
  background: linear-gradient(0deg, #162D60, #153876, #091B44);
}
>>> .ivu-menu {
  width: 100% !important;
  background: #122750;
  color: #F2F2F2;
  font-size: 16px;
}
>>> .ivu-menu .menuli{
}
>>> .ivu-menu .ivu-menu-item {
  font-size: 16px;
  height: 100%;
}
>>> .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover { 
  background: #2E4E89;
  color: #F2F2F2;
}
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
  background: #0185EA;
  color: #F2F2F2;
  font-size: 16px;
}
>>> .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
  width: 0;
}
>>> .ivu-menu-vertical.ivu-menu-light:after  {
  width: 0;
}
>>> .iconfont {
  font-size: 18px;
}
</style>