<template>
	<template v-for="item in menuItems" :key="item.path || item.name">
		<!-- 有子菜单 - 使用递归 -->
		<a-sub-menu v-if="item.children && item.children.length > 0" :key="`${item.path}`">
			<template #icon v-if="item.meta?.icon">
				<component :is="getIconComponent(item.meta.icon)" />
			</template>
			<template #title>{{ item.title || item.name }}</template>
			<navMenu :menu-items="item.children" :active-path="activePath" :parent-path="item.path" />
		</a-sub-menu>
		<!-- 无子菜单的菜单项 -->
		<a-menu-item v-else :key="item.path" :class="{ 'ant-menu-item-selected': item.path === activePath }" @click="handleMenuClick(item)">
			<template #icon v-if="item.meta?.icon">
				<component :is="getIconComponent(item.meta.icon)" />
			</template>
			{{ item.title || item.name }}
		</a-menu-item>
	</template>
</template>

<script setup>
import { useRouter } from 'vue-router'
import * as icons from '@ant-design/icons-vue'

defineProps({
	menuItems: {
		type: Array,
		default: () => [],
	},
	activePath: {
		type: String,
		default: '',
	},
	parentPath: {
		type: String,
		default: '',
	},
})

const router = useRouter()

// 获取图标组件
const getIconComponent = (iconName) => {
	return icons[iconName] || icons.FileTextOutlined
}

// 处理菜单点击
const handleMenuClick = (item) => {
	if (item.path) {
		router.push(item.path)
	}
}
</script>
