<template>
	<a-menu mode="inline" v-model:openKeys="openSubMenu" @openChange="onOpenChange" inlineCollapsed
		v-model:selectedKeys="selectedMenu" style="background: #19be6b; height: '90vh';color: #fff;">
		<template v-for="(item,index) in menuList">
			<template v-if="!item.children">
				<a-menu-item :key="item.path" @click="onMenu(item.path)">
					<template #icon>
						<component :is="item.meta.icon"></component>
					</template>
					<span>{{item.meta.title}}</span>
				</a-menu-item>
			</template>
			<template v-else>
				<a-sub-menu :key="item.path">
					<template #icon>
						<component :is="item.meta.icon"></component>
					</template>
					<template #title>{{item.meta.title}}</template>
					<template v-for="(twoItem, twoIndex) in item.children">
						<a-sub-menu v-if="twoItem.children.length > 0" :key="twoItem.path">
							<template #title>
								{{twoItem.meta.title}}
							</template>
							<a-menu-item v-for="(threeItem, threeIndex) in twoItem.children" :key="threeItem.path"
								@click="onMenu(threeItem.path)">{{ threeItem.meta.title }}</a-menu-item>
						</a-sub-menu>
						<a-menu-item v-else @click="onMenu(twoItem.path)" :key="twoItem.path">
							{{ twoItem.meta.title }}
						</a-menu-item>
					</template>
				</a-sub-menu>
			</template>
		</template>
	</a-menu>
</template>
<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue';
	import { useMenu } from '@/hooks/useMenu';
	let { menuList, onMenu, routerCur, routerArrayCur } = useMenu();
	
	const selectedMenu = computed(() => {
		let newSelectedMenu = [routerCur()];
		return newSelectedMenu;
	})

	const openSubMenu = computed(() => {
		console.log(routerArrayCur())
		let newOpenSubMenu = routerArrayCur();
		return newOpenSubMenu;
	})

	const onOpenChange = (openKeys) => {
		const latestOpenKey : string = openKeys.length > 0 ? openKeys[openKeys.length - 1] : undefined;
		if (latestOpenKey) {
			openSubMenu.value = latestOpenKey ? [latestOpenKey] : [];
		} else {
			openSubMenu.value = [];
		}
	}
</script>
<style lang="less" scoped>
	::-webkit-scrollbar {
		/* 设置滚动条宽度 */
		width: 0px;
		height: 0px;
	}

	.ant-menu {
		background-color: #f0f2f5;
		/* 修改菜单的背景颜色 */
	}

	.ant-menu .ant-sub-menu {
		color: #000000;
	}
</style>