<template>
	<div class="container-fluid">
		<ul>
			<li v-for="(route, index) in routes" :key="index">
				<h5>{{ route.title }}</h5>
				<ul>
					<li v-for="child in route.children" :key="child.path">
						<RouterLink :to="child.path">
							{{ `${child.path}【${String(child.name)}】` }}
						</RouterLink>
					</li>
				</ul>
			</li>
		</ul>

		<RouterView />
	</div>
</template>

<script lang="ts" setup>
import { pageRoutes } from '@/router/module/pageRoutes';
import { onMounted, ref } from 'vue';

const routes = ref<any>([]);

/**
 * * 获取路由数据
 */
const getRouteList = () => {
	const routesTree = pageRoutes.reduce((acc, route) => {
		const title = route.path.split('/')[1];
		const formatRoute = { name: route.name, path: route.path };

		if (acc[title]) {
			acc[title].children.push(formatRoute);
		} else {
			acc[title] = { title, children: [formatRoute] };
		}
		return acc;
	}, {});

	routes.value = Object.values(routesTree);
};

onMounted(() => {
	getRouteList();
});
</script>

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