<template>
	<el-popover placement="right" :width="popWidtn" trigger="hover" v-model:visible="showPop" popper-class="menuItem-popover">
		<template #reference>
			<li
				class="itemThree el-sub-menu el-menu-item"
				role="menuitem"
				tabindex="-1"
				:class="[isCollapse ? 'close' : 'open', isactive ? 'is-active' : '']"
			>
				<slot name="header"></slot>
				<i class="el-icon el-sub-menu__icon-arrow" :style="showPop ? 'transform: rotateZ(180deg);' : 'transform: none;'">
					<SvgIcon name="ele-ArrowLeft" />
				</i>
			</li>
		</template>
		<div class="pathBox wrap" :class="chils.length > 4 ? 'warp' : ''">
			<div class="path" v-for="val in chils" :key="val.path" :class="fullPath === val.path ? 'active' : ''">
				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
					<div @click="pushRouter(val)" class="path-inner">
						<SvgIcon :name="val.meta.icon" v-if="val.meta?.icon" class="icons" />
						<span :title="val.meta.title">{{ val.meta.title }}</span>
					</div>
				</template>
				<template v-else>
					<a class="w100 path-inner" @click.prevent="onALinkClick(val)">
						<SvgIcon :name="val.meta.icon" />
						{{ val.meta.title }}
					</a>
				</template>
			</div>
		</div>
	</el-popover>
</template>

<script setup lang="ts" name="navMenuSubItemThree">
import { computed, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { verifyUrl } from '/@/utils/toolsValidate';

// 定义父组件传过来的值
const props = defineProps({
	chil: {
		type: Array,
		default: () => [],
	},
});
// 获取父级菜单数据
const router = useRouter();
const route = useRoute();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const isCollapse = computed(() => {
	return themeConfig.value.isCollapse;
});

const showPop = ref(false);
const chils = computed(() => {
	return <any>props.chil;
});
const fullPath = computed(() => {
	return route.fullPath;
});
const popWidtn = ref(0);
// 路由跳转
const pushRouter = (val: any) => {
	router.push(val.path);
	showPop.value = false; // 隐藏pop
};
// 打开外部链接
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}`);
};
watch(
	() => chils,
	(val) => {
		if (val.value.length === 1) {
			popWidtn.value = 640 * 0.25;
		} else if (val.value.length === 2) {
			popWidtn.value = 640 * 0.5;
		} else if (val.value.length === 3) {
			popWidtn.value = 640 * 0.75 + 2;
		} else if (val.value.length >= 4) {
			popWidtn.value = 645;
		}
	},
	{ immediate: true }
);
const isactive = ref(false);
watch(
	() => props.chil,
	(val) => {
		let a = val.filter((item: any) => item.path == route.fullPath);
		if (a.length) isactive.value = true;
		else isactive.value = false;
	}
);
</script>
<style lang="scss" scoped>
.itemThree {
	display: flex;
	align-items: center;
	height: var(--el-menu-item-height);
	line-height: var(--el-menu-item-height);
	font-size: var(--el-menu-item-font-size);
	color: var(--el-menu-text-color);
	list-style: none;
	cursor: pointer;
	position: relative;
	transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration), color var(--el-transition-duration);
	box-sizing: border-box;
	white-space: nowrap;
	height: 56px !important;
	line-height: 56px !important;
	color: var(--hotline-bg-menuBarColor);

	&.close {
		padding: 0 var(--el-menu-base-level-padding);
	}

	&.open {
		padding-left: calc(var(--el-menu-base-level-padding) + var(--el-menu-level) * var(--el-menu-level-padding));
	}

	&:focus {
		color: #fff;
		background-color: var(--hotline-color-menu-hover) !important;
	}

	&:hover {
		color: #fff;
		background-color: var(--hotline-color-menu-hover) !important;
	}

	&.is-active {
		color: #fff;
		background-color: var(--hotline-color-menu-hover) !important;
	}
}

.warp {
	flex-wrap: wrap;
}
.pathBox {
	display: flex;
	.path {
		border-right: 1px solid var(--el-border-color);
		width: 150px;
		.icons {
			font-size: 14px !important;
			display: inline-block;
			vertical-align: middle;
			margin-right: 5px;
			width: 24px;
			text-align: center;
		}
		&-inner {
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			height: 56px !important;
			line-height: 56px !important;
			box-sizing: border-box;
			transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration), color var(--el-transition-duration);
			&:hover {
				background-color: var(--hotline-bg-main-color) !important;
			}
		}
		&:nth-child(4n) {
			border: none;
		}
		&:last-child {
			border: none;
		}
		span {
			display: inline-block;
			max-width: 100px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			vertical-align: bottom;
		}

		&.active {
			color: var(--el-color-primary);
		}
	}
}
</style>
<style lang="scss">
.menuItem-popover{
	padding: 10px 20px !important;
}
</style>
