<script setup lang="ts">
import { createGetRoutes, setupLayoutsResult } from '@/plugins/router';
import type { MenuItem } from 'primevue/menuitem';
import { routes } from 'vue-router/auto-routes';
const router = useRouter();

const menuItems = computed(() => {
  let flatArray: MenuItem[] = createGetRoutes(router)()
    .filter((route) => !route.path.includes('/:'))
    .map((route) => ({
      id: route.path,
      label: `${(route.name as string) || route.path}`,
    }));

  flatArray = flatArray.map((item, index) => {
    let id = item.id;
    if (flatArray.some((item) => item.id.startsWith(`${id}/`))) {
      id = `${id}/index`;
    }
    // 去掉最前面的 /
    id = id.replace(/^\//, '');

    let parentId = id.replace(/\/[^/]+$/, '');
    if (parentId === id) {
      parentId = '_ROOT_';
    }
    return {
      ...item,
      parentId,
    };
  });
  const groupItems = flatArray.reduce(
    (acc, flatArrItem) => {
      if (
        !acc.some((item) => item.id === flatArrItem.parentId) && //
        flatArrItem.parentId !== '_ROOT_'
      ) {
        let groupItemParentId = flatArrItem.parentId.replace(/\/[^/]+$/, '');
        if (groupItemParentId === flatArrItem.parentId) groupItemParentId = '_ROOT_';
        acc.push({
          id: flatArrItem.parentId,
          label: `Group ${flatArrItem.parentId}`,
          parentId: groupItemParentId,
        });
      }
      return acc;
    },
    [] as Record<string, string>[],
  );
  console.debug(`groupItems :>> `, groupItems);
  const tree = arrayToTree(flatArray.concat(groupItems), { id: 'id', parentId: 'parentId', rootId: '_ROOT_' });

  // 递归把 children 改为 items
  function _convertChildrenToItems(tree: MenuItem[]): MenuItem[] {
    return tree.map((item) => {
      if (item.children.length) {
        item.items = _convertChildrenToItems(item.children);
      } else {
        item.command = (event) => {
          router.push({ name: item.label as never });
        };
      }
      delete item.children;
      return item;
    });
  }
  return _convertChildrenToItems(tree);
});

const list = [
  {
    title: 'routes',
    json: routes,
  },
  {
    title: 'setupLayoutsResult',
    json: setupLayoutsResult,
  },
  {
    title: 'createGetRoutes(router)()',
    json: createGetRoutes(router)().map((route) => ({
      ...route,
      instances: undefined,
      leaveGuards: undefined,
      updateGuards: undefined,
      enterCallbacks: undefined,
      components: undefined,
    })),
  },
  {
    title: 'router.getRoutes()',
    json: router.getRoutes().map((route) => ({
      ...route,
      instances: undefined,
      leaveGuards: undefined,
      updateGuards: undefined,
      enterCallbacks: undefined,
      components: undefined,
    })),
  },
  {
    title: 'menuItems',
    json: menuItems.value,
  },
];
</script>
<template>
  <Tabs value="MenuTest" scrollable>
    <TabList>
      <Tab value="MenuTest"> MenuTest </Tab>
      <Tab v-for="item in list" :key="item.title" :value="item.title">{{ item.title }}</Tab>
    </TabList>
    <TabPanels>
      <TabPanel value="MenuTest">
        <PanelMenu :model="menuItems" />
      </TabPanel>
      <TabPanel v-for="item in list" :key="item.title" :value="item.title">
        <pre>{{ item.json }}</pre>
      </TabPanel>
    </TabPanels>
  </Tabs>
</template>

<style scoped></style>
