<template>
  <div>
    <!-- <doCreateMenu :menuList="constantRoutes.options.routes[1].children[0].children" /> -->
    <menuDoCreateMenu :menuList="menuRoutes" :is-collapse="isCollapse" />
  </div>
</template>

<script lang="ts" setup>
import menuDoCreateMenu from '@/components/menu/menuDoCreateMenu.vue';
import constantRoutes from '@/router/newIndex';
import { type RouteRecordRaw } from 'vue-router';
import { onMounted, ref } from 'vue';

interface Props {
  isCollapse?: boolean;
}

withDefaults(defineProps<Props>(), {
  isCollapse: false
});

let treeData: any[] = [];
const menuRoutes = ref<any[]>([]);

function loadMenuData(constantRoutes: Readonly<RouteRecordRaw[]>, treeData: any[]) {
  constantRoutes.forEach((route) => {
    // 没有子节点
    if (!route.children && !route.meta?.bottomHidden) {
      treeData.push({
        id: route.name as string,
        label: route.meta?.title as string
      });
    }

    //只有一个子节点
    if (route.children && route.children?.length === 1 && !route.meta?.bottomHidden) {
      treeData.push({
        id: route.children[0].name as string,
        label: route.children[0].meta?.title as string
      });
    }

    //多个子节点
    if (route.children && route.children?.length > 1 && !route.meta?.bottomHidden) {
      const parentNode = {
        id: route.children[0].name as string,
        label: route.children[0].meta?.title as string,
        children: []
      };
      loadMenuData(route.children, parentNode.children);
      treeData.push(parentNode);
    }
  });
}

const emit = defineEmits(['getMenuList']);

onMounted(() => {
  loadMenuData(constantRoutes.options.routes, treeData);
  menuRoutes.value = Array.from(constantRoutes.options.routes);
  emit('getMenuList', treeData);
});
</script>

<style scoped></style>
