<template>
  <div class="content">
    <Menu
      :active-name="activeMenu"
      :open-names="openMenu"
      @on-select="menuSelect($event, navgationData)"
    >
      <Submenu
        v-if="!item.page"
        v-for="(item, index) of navgationData"
        :key="index"
        :name="index"
      >
        <template slot="title">
          <div class="sort">
            <svg class="icon icon-nav" aria-hidden="true">
              <use style="font-size:20px" :xlink:href="item.icon"></use>
            </svg>
            <span>{{ item.title }}</span>
          </div>
        </template>
        <MenuItem
          v-if="_item.page"
          v-for="(_item, _index) of item.sub"
          :key="_index"
          :name="index + '-' + _index"
        >
          <svg class="icon icon-nav" aria-hidden="true">
            <use style="font-size:20px" :xlink:href="_item.icon"></use>
          </svg>
          {{ _item.title }}
        </MenuItem>
        <Submenu v-else :name="index + '-' + _index">
          <template slot="title">
            <svg class="icon icon-nav" aria-hidden="true">
              <use style="font-size:20px" :xlink:href="_item.icon"></use>
            </svg>
            {{ _item.title }}
          </template>
          <MenuItem
            v-if="__item.page"
            v-for="(__item, __index) of _item.sub"
            :key="__index"
            :name="index + '-' + _index + '-' + __index"
          >
            <svg class="icon icon-nav" aria-hidden="true">
              <use style="font-size:20px" :xlink:href="__item.icon"></use>
            </svg>
            {{ __item.title }}</MenuItem
          >

          <Submenu v-else :name="index + '-' + _index + '-' + __index">
            <template slot="title">
              <svg class="icon icon-nav" aria-hidden="true">
                <use style="font-size:20px" :xlink:href="_item.icon"></use>
              </svg>
              {{ __item.title }}
            </template>
            <MenuItem
              v-if="___item.page"
              v-for="(___item, ___index) of __item.sub"
              :key="___index"
              :name="index + '-' + _index + '-' + __index + '-' + ___index"
            >
              <svg class="icon icon-nav" aria-hidden="true">
                <use style="font-size:20px" :xlink:href="___item.icon"></use>
              </svg>
              {{ ___item.title }}</MenuItem
            >
            <Submenu
              v-else
              :name="index + '-' + _index + '-' + __index + '-' + ___index"
            >
              <template slot="title">
                <svg class="icon icon-nav" aria-hidden="true">
                  <use style="font-size:20px" :xlink:href="item.icon"></use>
                </svg>
                {{ ___item.title }}
              </template>
              <MenuItem
                v-for="(____item, ____index) of ___item.sub"
                :key="____index"
                :name="
                  index +
                    '-' +
                    _index +
                    '-' +
                    __index +
                    '-' +
                    ___index +
                    '-' +
                    ____index
                "
                >{{ ____item.title }}</MenuItem
              >
            </Submenu>
          </Submenu>
        </Submenu>
      </Submenu>
      <MenuItem v-else="item.page" :name="index">
        <svg class="icon icon-nav" aria-hidden="true">
          <use style="font-size:20px" :xlink:href="item.icon"></use>
        </svg>
        {{ item.title }}
      </MenuItem>
    </Menu>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  props: {
    navgationData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      activeMenu: '',
      openMenu: [],
      c: "#icongongyiluxian",
    };
  },
  created() {
    if (sessionStorage.getItem("open-menu")) {
      this.undata_side_navData();
      let open = sessionStorage.getItem("open-menu");
      this.activeMenu = open;
      let first = parseInt(open[0]);
      this.openMenu.push(first);
      // for (open=open.substring(0,open.length-2); 1 < open.length; open=open.substring(0,open.length-2)) {
      //   this.openMenu.unshift(open)
      // }
      // //第一位为啥一定要数字？
      //   this.openMenu.unshift(parseInt(open))
    }
  },
  mounted() {},
  methods: {
    ...mapActions(["undata_side_navData"]),
    menuSelect(name, data) {
      this.$emit("menuSelect", name, data);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  overflow-y: scroll;
  overflow-x: hidden;
}
.sort {
  display: flex;
  align-items: center;
  .icon-nav {
    margin-right: 5px;
    font-size: 16px;
  }
}
</style>
