<template>
  <p-sub-menu
    ref="subMenu"
    :level="level"
    :parent="parent"
    placement="right"
  >
    <template slot="title">
      {{ menuitem.name }}
      <!-- 只有顶级菜单才显示图标 -->
      <i
        v-if="menuitem.type == 'dir' && level === 0"
        class="el-icon-arrow-right"
      ></i>
    </template>
    <template v-for="item in menuitem.children">
      <p-menu-item
        :icon="item.iconClass"
        v-if="item.isShow && !(item.children && item.children.length)"
        @click="handleOpenFunc(item)"
        :key="item.resId"
        >{{ item.name }}</p-menu-item
      >
      <nav-sub-menus
        :menuitem="item"
        :level="level + 1"
        v-if="item.isShow && item.children && item.children.length"
        :key="item.resId"
      ></nav-sub-menus>
    </template>
  </p-sub-menu>
</template>
<script>
import { PMenu, PSubMenu, PMenuItem } from "../menus";
export default {
  name: "NavSubMenus",
  inject: ["addTab", "showTab", "hideTab", "hideMenus"],
  components: {
    PMenu,
    PSubMenu,
    PMenuItem,
  },
  props: {
    menuitem: {
      type: Object,
    },
    level: {
      type: Number,
    },
    parent: {
      type: Object,
    },
  },
  methods: {
    async handleOpenFunc(item) {
      let me = this;
      if (item.type == "link") {
        window.open(item.resUrl, item.name);
        return;
      } else if (item.type == "sso") {
        item.ssoUrl = await me.$store.dispatch("user/openSSOFuncPage", {
          serviceUrl: item.resUrl,
        });
      }
      me.addTab(item); //inject 提供的方法只能 传一个参数
      me.$refs.subMenu.hide();

      setTimeout(() => {
        me.hideMenus && me.hideMenus();
      }, 100);
    },
  },
};
</script>