<template>
	<a-sub-menu v-if="menuInfo.children && menuInfo.children.length" :key="menuInfo.path">
		<template #icon>
			<icon-font v-if="menuInfo.icon" :type="menuInfo.icon" />
		</template>
		<template #title>
			{{ menuInfo.name }}
		</template>
		<template v-for="item in menuInfo.children" :key="item.keyPath">
			<template v-if="!item.children">
				<a-menu-item :key="item.path">
					<template #icon>
						<icon-font v-if="item.icon" :type="item.icon" />
					</template>
					<router-link v-if="!item.url" :to="{ path: item.path }">
						<span class="ant-pro-menu-item">
							<span class="ant-pro-menu-item-title">{{ item.name }}</span>
						</span>
					</router-link>
					<a v-else :href="item.url" target="_blank">{{ item.name }}</a>
				</a-menu-item>
			</template>
			<template v-else>
				<sub-menu :key="item.path" :menu-info="item" />
			</template>
		</template>
	</a-sub-menu>
	<a-menu-item v-else :key="menuInfo.path + ''">
		<template #icon>
			<icon-font v-if="menuInfo.icon" :type="menuInfo.icon"></icon-font>
		</template>
		<span>
			<router-link v-if="!menuInfo.url" :to="{ path: menuInfo.path }">
				<span class="ant-pro-menu-item">
					<span class="ant-pro-menu-item-title">{{ menuInfo.name }}</span>
				</span>
			</router-link>
			<a v-else :href="menuInfo.url" target="_blank">{{ menuInfo.name }}</a>
		</span>
	</a-menu-item>
</template>
<script lang="ts" setup>
	import { PropType } from 'vue'
	import { MenuNode } from './menu'
	const props = defineProps({
		menuInfo: {
			type: Object as PropType<MenuNode>,
			required: true,
		},
	})

	const { menuInfo } = toRefs(props)
</script>
