<template>
  <n-menu
    :value="route.fullPath"
    :options="menuOptions"
  ></n-menu>
</template>
<script setup lang="tsx">
  import { Icon } from "@/components";
  import { INDEX_ROUTER, USER_CENTER } from "@/config/constant";
  import { type AuthMenuTree, usePermissionStore } from "@/stores/permission";
  import { isEmpty } from "lodash-es";
  import type { MenuOption } from "naive-ui";
  import { storeToRefs } from "pinia";
  import { computed } from "vue";
  import { RouterLink, useRoute } from "vue-router";
  const route = useRoute();
  const { authMenuList } = storeToRefs(usePermissionStore());

  const convertMenuOptions = (data: AuthMenuTree[]): MenuOption[] => {
    return data.map((item) => {
      const opt: MenuOption = {
        label: () =>
          item.type.value === "menu" ? (
            <RouterLink to={{ path: item.path }}>{item.name}</RouterLink>
          ) : (
            item.name
          ),
        key: item.path,
        icon: () => <Icon name={item.icon}></Icon>,
      };
      if (!isEmpty(item.children)) {
        opt.children = convertMenuOptions(item.children as AuthMenuTree[]);
      }
      return opt;
    });
  };

  const menuOptions = computed<MenuOption[]>(() => {
    const menus: MenuOption[] = convertMenuOptions(authMenuList.value);
    menus.unshift({
      label: () => (
        <RouterLink to={{ path: INDEX_ROUTER.path }}>
          {INDEX_ROUTER.meta.title}
        </RouterLink>
      ),
      key: INDEX_ROUTER.path,
      icon: () => <Icon name={INDEX_ROUTER.meta.icon}></Icon>,
    });
    const menus_ = menus.filter((item) => item.key !== USER_CENTER.path);
    return menus_;
  });
</script>
