<template>
	<template v-for="val in chils">
		<!-- 默认样式 -->
<!--		<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0 && isMobile">
			<template #title>
				<SvgIcon :name="val.meta.icon" />
				<span>{{ val.meta.title }}</span>
			</template>
			<sub-item :chil="val.children" />
		</el-sub-menu>
		&lt;!&ndash; pop展示第三级菜单 &ndash;&gt;
		<sub-three-item v-else-if="val.children && val.children.length > 0 && !isMobile" :key="val.path" :chil="val.children">
			<template #header>
				<SvgIcon :name="val.meta.icon" />
				<span>{{ val.meta.title }}</span>
			</template>
		</sub-three-item>-->
     <el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
			<template #title>
				<SvgIcon :name="val.meta.icon" />
        <TextTooltip :content="val.meta.title" />
			</template>
			<sub-item :chil="val.children" />
		</el-sub-menu>
		<template v-else>
			<el-menu-item :index="val.path" :key="val.path">
				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
					<SvgIcon :name="val.meta.icon" />
          <TextTooltip :content="val.meta.title" />
				</template>
				<template v-else>
					<a class="w100" @click.prevent="onALinkClick(val)">
						<SvgIcon :name="val.meta.icon" />
            <TextTooltip :content="val.meta.title" />
					</a>
				</template>
			</el-menu-item>
		</template>
	</template>
</template>

<script setup lang="ts" name="navMenuSubItem">
import {defineAsyncComponent, computed, ref} from 'vue';
import { useRouter } from 'vue-router';
import { verifyUrl } from '@/utils/toolsValidate';
import other from '@/utils/other';
// 引入组件
const SubThreeItem = defineAsyncComponent(() => import('@/layout/navMenu/subThreeItem.vue'));
const TextTooltip = defineAsyncComponent(() => import('@/components/TextTooltip/index.vue'));
// 定义父组件传过来的值
const props = defineProps({
	chil: {
		type: Array,
		default: () => [],
	},
});
const router = useRouter();
const clientWidth = ref<RefType>(0);
// 获取父级菜单数据
const chils = computed(() => {
	return <any>props.chil;
});
// 打开外部链接
const onALinkClick = (val: any) => {
	const { origin, pathname } = window.location;
	router.push(val.path);
	if (verifyUrl(val.meta.isLink)) window.open(val.meta.isLink);
	else window.open(`${origin}${pathname}#${val.meta.isLink}`);
};
const isMobile = computed(() => {
  // 判断是否是手机端
  return other.isMobile();
})
</script>
