<template>
  <el-sub-menu
    :index="generatorPath(item.path)"
    popper-append-to-body
  >
    <template #title>
      <el-icon>
        <component :is="item.meta ? item.meta.icon || MenuIcon : MenuIcon" />
      </el-icon>
      <span>{{ item.meta ? item.meta.title : item.name }}</span>
    </template>
    <slot></slot>
  </el-sub-menu>
</template>

<script lang="ts">
import { isExternal } from "../../utils";
import path from "path";
import store from "../../store";
import { defineComponent } from "vue";
import { Operation as MenuIcon } from "@element-plus/icons";
export default defineComponent({
  name: "SubMenuItem",
  components: { MenuIcon },
  props: {
    fullPath: {
      type: String,
      default: "",
    },
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    function generatorPath(childPath: string) {
      if (isExternal(props.fullPath)) {
        return props.fullPath;
      }
      if (isExternal(childPath)) {
        return childPath;
      }
      return path.resolve(props.fullPath, props.item.path);
    }
    return {
      state: store.state,
      generatorPath,
      MenuIcon,
    };
  },
});
</script>