<template>
  <div class="ivu-shrinkable-menu">
    <!-- 一级菜单 -->
    <Menu ref="sideMenu" width="220px" theme="dark" @on-open-change="selectNav" @on-select="changeMenu" :open-names="currNav" :active-name="this.$route.name">
      <router-link to="/home" v-if="this.$store.state.app.curModel == 1 && hasHome">
        <li class="ivu-menu-submenu">
          <div class="ivu-menu-submenu-title">
            <iconpark-icon size="20" style="margin-right: 8px" name="icon-daping-normal"></iconpark-icon>
            商城数据大屏
          </div>
        </li>
      </router-link>
      <Submenu v-for="(item, i) in navList" :key="i" :name="item.name">
        <template #title>
          <iconpark-icon size="20" style="margin-right: 8px" :name="item.icon"></iconpark-icon>
          {{ item.title }}
        </template>
        <template>
          <MenuItem :name="menuItem.name" v-for="menuItem in menuList.filter(fItem => fItem.name == item.name)[0].children" :key="menuItem.name">
            <iconpark-icon size="20" style="margin-right: 8px" :name="menuItem.icon"></iconpark-icon>
            {{menuItem.title}}
          </MenuItem>
        </template>
      </Submenu>
    </Menu>
  </div>
</template>

<script>
// import util from "@/libs/util.js";
export default {
  name: "shrinkableMenu",
  data() {
    return {
      hasHome: false
    }
  },
  computed: {
    menuList() {
      return this.$store.state.app.menuList;
    },
    navList() {
      let newNavList = []
      // ['settings','user','pay','operation','base','wx']
      if(this.$store.state.app.curModel == 1) {
        newNavList = this.$store.state.app.navList.filter(item => !['settings','user','pay','operation','base','wx','home','logic'].includes(item.name))
      } else {
        newNavList = this.$store.state.app.navList.filter(item => ['user','pay','operation','base','wx','logic'].includes(item.name))
      }
      let hasHome = false
      this.$store.state.app.navList.map(item => {
        if(item.name == 'home') {
          hasHome = true
        }
      })
      this.hasHome = hasHome
      return newNavList
    },
    currNav() {
      return this.getStore("currNav").split(',') || []
    }
  },
  watch: {
    // 监听路由变化
    $route: {
      handler: function (val, oldVal) {
      }
    }
  },
  methods: {
    changeMenu(name) { //二级路由点击
      this.$router.push({
        name: name
      });
    },
    selectNav(name) { // 一级路由点击事件
      window.localStorage.setItem('currNav', name)
    },
  }
};
</script>
<style lang="scss" scoped>
.ivu-shrinkable-menu {
    height: calc(100% - 60px);
    width: 220px;
    display: flex;
}
</style>
