<template>
	<a-menu
		:selected-keys="keys"
		:open-keys="keys"
		class="side-menu"
		:theme="theme"
		mode="inline"
		:inline-indent="12"
		:style="{ height: '100%', borderRight: 0 }"
	>
		<template v-for="m in menuTree" :key="m.keyPath">
			<sub-menu v-if="m.children?.length" :menu-info="m"></sub-menu>
			<a-menu-item v-else :key="m.path + ''">
				<icon-font v-if="m.icon" :type="m.icon"></icon-font>
				<span>
					<router-link v-if="!m.url" :to="{ path: m.path }">
						<span class="ant-pro-menu-item">
							<span class="ant-pro-menu-item-title">{{ m.name }}</span>
						</span>
					</router-link>
					<a v-else :href="m.url" target="_blank">{{ m.name }}</a>
				</span>
			</a-menu-item>
		</template>
	</a-menu>
</template>
<script lang="ts" setup>
	import { useAppStore } from '@/stores/app'
	import SubMenu from './sub-menu.vue'
	import XEUtils from 'xe-utils'
	import { fliteredMenuTree } from './menu'
	import { useRoute } from 'vue-router'

	const app = useAppStore()

	// const router = useRouter()

	const theme = computed(() => {
		return app.layout.navTheme === 'light' ? 'light' : 'dark'
	})
	const menuTree = computed(() => {
		// 重新去计算路由的菜单
		// router.currentRoute();
		return fliteredMenuTree()
	})
	const route = useRoute()
	const keys = computed(() => {
		const matched = route.matched.map((item) => item.name)
		return XEUtils.filterTree(menuTree.value, (item) => matched.includes(item.key)).map((item) => item.path)
	})
</script>
