<template>
  <div class="ivu-shrinkable-menu">
    <!-- 一级菜单 -->
    <Menu
      ref="sideMenu"
      width="200px"
      theme="light"
      @on-open-change="selectNav"
      @on-select="changeMenu"
      :open-names="currNav"
      :active-name="this.$route.name"
    >
      <Submenu
        @mouseover.native="handleMoveOn"
        @mouseleave.native="handleMoveOut"
        v-for="(item, i) in navList"
        :key="i"
        :name="item.name"
      >
        <template #title>
          <iconpark-icon
            size="20"
            style="margin-right: 8px"
            v-if="currNav.includes(item.name) || hover"
            name="icon-xitongshezhi-daohang-sel"
          ></iconpark-icon>
          <iconpark-icon
            v-else
            size="20"
            style="margin-right: 8px"
            :name="item.icon"
          ></iconpark-icon>
          {{ item.title }}
        </template>
        <template>
          <MenuItem
            :key="menuItem.name"
            :name="menuItem.name"
            v-for="menuItem in menuList.filter(
              (fItem) => fItem.name == item.name
            )[0].children"
          >
            <!-- <iconpark-icon
              size="20"
              style="margin-right: 8px"
              :name="menuItem.icon"
            ></iconpark-icon> -->
            {{ menuItem.title }}
          </MenuItem>
        </template>
      </Submenu>
    </Menu>
  </div>
</template>

<script>
export default {
  name: "shrinkableMenu",
  data() {
    return {
      hover: false,
    };
  },
  computed: {
    menuList() {
      return this.$store.state.app.menuList;
    },
    navList() {
      let curNavList = [];
      this.$store.state.app.navList.map((item) => {
        if (item.id == this.$store.state.app.curModel) {
          curNavList.push(item);
        }
      });
      return curNavList;
    },
    currNav() {
      this.$nextTick(() => {
        this.$refs.sideMenu.updateOpened();
        this.$refs.sideMenu.updateActiveName();
      });
      return this.$store.state.app.currNav || [];
    },
  },
  watch: {
    // 监听路由变化
    $route: {
      handler: function (val, oldVal) {
        console.log(val.name);
      },
    },
  },
  methods: {
    handleMoveOn() {
      this.hover = true;
    },
    handleMoveOut() {
      this.hover = false;
    },
    changeMenu(name) {
      //二级路由点击
      this.$router.push({
        name: name,
      });
    },
    selectNav(name) {
      // 一级路由点击事件
      this.$store.commit("setCurrNav", name);
      window.localStorage.setItem("currNav", JSON.stringify(name));
    },
  },
};
</script>
<style lang="scss" scoped>
.ivu-shrinkable-menu {
  height: calc(100% - 64px);
  width: 200px;
  display: flex;
}
</style>
