<template>
	<a-sub-menu :key="menuInfo.name">
		<!-- 是否需要显示icon-->
		<template #icon v-if="menuInfo.meta.icon">
			<base-svg-icon :name="menuInfo.meta.icon" />
		</template>
		<template #title>{{ menuInfo.meta.title }}</template>
		<template v-for="item in menuInfo.children" :key="item.name">
			<template v-if="!item.children || item.meta.hideChildrenInMenu">
				<!-- 是否需要在菜单中隐藏-->
				<template v-if="!item.meta.hideMenu">
					<a-menu-item :key="item.name">
						{{ item.meta.title }}
					</a-menu-item>
				</template>
			</template>
			<template v-else>
				<sub-menu :menu-info="item" :key="item.name" />
			</template>
		</template>
	</a-sub-menu>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'SubMenu',
	props: {
		menuInfo: {
			type: Object,
			default: () => ({}),
		},
	},
})
</script>
