<template>
	<template v-for="val in chils">
		<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
			<template #title>
				<SvgIcon :name="val.meta.icon" />
				<span>{{ $t(val.meta.title) }}</span>
			</template>
			<sub-item :chil="val.children" />
		</el-sub-menu>
		<el-menu-item :index="val.path" :key="val.path" v-else @click="handleMenuClick($event, val)">
			<template v-if="!val.meta.isLink">
				<SvgIcon :name="val.meta.icon" />
				<span>{{ $t(val.meta.title) }}</span>
			</template>
			<template v-else>
				<a :href="val.meta.isLink" target="_blank" rel="opener" @click.stop>
					<SvgIcon :name="val.meta.icon" />
					{{ $t(val.meta.title) }}
				</a>
			</template>
		</el-menu-item>
	</template>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
export default defineComponent({
	name: 'navMenuSubItem',
	props: {
		chil: {
			type: Array,
			default: () => [],
		},
	},
	setup(props) {
		// 获取父级菜单数据
		const chils = computed(() => {
			return props.chil;
		});
		// 处理菜单点击事件
		const handleMenuClick = (event: Event, menuItem: any) => {
			// 如果是外链，阻止路由跳转
			if (menuItem.meta?.isLink) {
				event.preventDefault();
				event.stopPropagation();
			}
		};
		return {
			chils,
			handleMenuClick,
		};
	},
});
</script>
