<template>
	<!--如果没有子元素，那么直接显示-->
	<a-menu-item v-if="props.menu.isShow && menuChildren.length === 0" :key="props.menu.id" @click.stop="clickMenu(props.menu)">
		<template #icon>
			<a-icon v-if="props.menu.icon" :icon="props.menu.icon" class="icon_color" />
		</template>
		<div class="menu-header">{{ props.menu.menuName }}</div>
	</a-menu-item>

	<!--如果有元素，显示子元素-->
	<a-sub-menu v-else-if="props.menu.isShow" :key="props.menu.id">
		<template #icon>
			<a-icon v-if="props.menu.icon" :icon="props.menu.icon" class="icon_color" />
		</template>
		<template #title>
			<div class="menu-header">{{ props.menu.menuName }}</div>
		</template>

		<template v-for="subMenu of menuChildren">
			<!--如果有子元素，直接显示菜单-->
			<menu-item v-if="subMenu.children.length > 0" :key="subMenu.id" :menu="subMenu" @onItemClick="clickMenu" />
			<!--非子元素，显示-->
			<a-menu-item v-else-if="subMenu.isShow" :key="subMenu.id" @click.stop="clickMenu(subMenu)">
				{{ subMenu.menuName }}
			</a-menu-item>
		</template>
	</a-sub-menu>
</template>

<script lang="ts" setup>
import { SystemMenu } from '../../../entity/system/system-menu'
import { AIcon } from '../../../components/AIcon'

let props = defineProps<{ menu: SystemMenu }>()

// 事件抛出去，组件尽量不处理业务
let emits = defineEmits<{ (e: 'onItemClick', menu: SystemMenu): void }>()

// 子元素
let menuChildren = props.menu.children || []

/**
 * 点击菜单
 * @param item
 */
function clickMenu(item: SystemMenu) {
	emits('onItemClick', item)
}
</script>
<script lang="ts">
export default {
	name: 'MenuItem'
}
</script>

<style scoped></style>
