<template>
	<!-- 无子节点：渲染为 el-menu-item -->
	<!-- <div>{{ menu }}</div> -->
	<el-menu-item
		v-if="!menu.children"
		:index="menu.path"
	>
		<el-icon><Grid /></el-icon>
		<span>{{ menu.meta.title }}</span>
	</el-menu-item>

	<!-- 有子节点：渲染为 el-sub-menu，再次递归 -->
	<el-sub-menu v-else :index="menu.path">
		<template #title>
			<el-icon v-if="menu.meta.title == '工作台'"><Platform /></el-icon>
			<el-icon v-else-if="menu.meta.title == '系统管理'"><Tools /></el-icon>
			<el-icon v-else-if="menu.meta.title == '业务服务管理'"><HelpFilled /></el-icon>
			<el-icon v-else-if="menu.meta.title == '消息管控'"><Promotion /></el-icon>
			<el-icon v-else-if="menu.meta.title == '文件批量发送短信'"><Management /></el-icon>
			<el-icon v-else-if="menu.meta.title == '故障处理'"><Briefcase /></el-icon>
			<el-icon v-else-if="menu.meta.title == 'APP消息推送扩容'"><Comment /></el-icon>
			<el-icon v-else-if="menu.meta.title == '消息内容安全校验'"><WarningFilled /></el-icon>
			<el-icon v-else-if="menu.meta.title == '异网短信迁移'"><InfoFilled /></el-icon>
			<el-icon v-else><Grid /></el-icon>
			<span>{{ menu.meta.title }}</span>
		</template>

		<TreeNode
			v-for="child in menu.children"
			:key="child.id"
			:menu="child"
		/>
	</el-sub-menu>
</template>

<script setup>
import { CaretBottom, Platform, QuestionFilled, Menu, InfoFilled, HelpFilled, WarningFilled, Briefcase, Promotion, Comment, Tools, Grid, BellFilled, Management } from '@element-plus/icons-vue'
import { reactive, ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
	menu: {
		type: Object,
		required: true
	}
})
</script>