<template>
  <template v-for="menu in props.menus" :key="menu.path">
    <!--            没有二级导航-->
    <el-menu-item
      v-if="fnIsShowMenuItem(menu)"
      :index="fnMenuItemIndex(menu)"
      :route="fnMenuItemRoute(menu)"
      @click="resetQueryCriteria"
    >
      <component
        :is="'icon-' + menu.meta?.icon"
        v-if="menu.meta?.icon"
        theme="filled"
        fill="#a5b2c2"
        size="18"
        :stroke-width="3"
        style="margin-right: 15px"
      />
      <span>{{ menu.meta?.title }}</span>
    </el-menu-item>
    <!--            有二级导航-->
    <el-sub-menu v-else-if="fnIsShowSubmenu(menu)" :index="menu.path">
      <template #title>
        <component
          :is="'icon-' + menu.meta?.icon"
          v-if="menu.meta?.icon"
          theme="filled"
          fill="#bfcbd9"
          size="18"
          :stroke-width="3"
          style="margin-right: 10px"
        />
        <span>{{ menu.meta?.title }}</span>
      </template>
      <!--                递归调用当前组件生成导航-->
      <layout-menu :menus="menu.children" />
    </el-sub-menu>
  </template>
</template>

<script setup>
import { resetQueryCriteria } from "../../hooks/useQueryCriteria/index.js";
import { ElMenuItem, ElSubMenu } from 'element-plus'
import "element-plus/es/components/menu-item/style/css";
import "element-plus/es/components/sub-menu/style/css";

defineOptions({
  name: "LayoutMenu",
});
const props = defineProps({
  menus: { type: Array, default: () => [] },
});
const fnIsShowMenuItem = (menu) => {
  if (menu.meta?.isMenu === false) {
    return false;
  }
  if (menu.meta?.isSubMenu === false) {
    return true;
  } else {
    return !menu.children || menu.children.length === 0;
  }
};
const fnIsShowSubmenu = (menu) => {
  if (menu.meta?.isMenu === false) {
    return false;
  }
  if (menu.meta?.isSubMenu === false) {
    return false;
  } else {
    return menu.children && menu.children.length > 0;
  }
};
const fnMenuItemIndex = (menu) => {
  if (menu.name && menu.props) return menu.name;
  return menu.path;
};
const fnMenuItemRoute = (menu) => {
  if (menu.name && menu.props) return { name: menu.name };
  return { path: menu.path };
};
</script>

<style scoped lang="scss"></style>
