<template>
	<el-menu :default-active="activeIndex" mode="horizontal"
		active-text-color="#fff"
		:collapse="false" 
		router 
		class="justify-end">
		<el-menu-item index="/index">首页</el-menu-item>
		<el-sub-menu index="2">
		    <template #title>关于我们</template>
		    <el-menu-item index="/leaderSpeech">总经理致辞</el-menu-item>
		    <el-menu-item index="/developHistory">发展历程</el-menu-item>
		    <el-menu-item index="/qualificHonors">资质荣誉</el-menu-item>
			<el-menu-item index="/corporateCulture">企业文化</el-menu-item>
		</el-sub-menu>
		<el-sub-menu index="3">
		    <template #title>解决方案</template>
		    <el-menu-item index="/fleetMana">船舶综合管理</el-menu-item>
		    <el-menu-item index="/IntelligentCabin">船舶智能化应用</el-menu-item>
		    <el-menu-item index="/digitalTwin">船舶数字孪生</el-menu-item>
			<el-menu-item index="/aiVideo">AI视频监控</el-menu-item>
			<el-menu-item index="/smartHelmet">智能安全帽</el-menu-item>
		</el-sub-menu>
		<el-sub-menu index="4">
		    <template #title>硬件支持</template>
			<el-menu-item index="/videoAlgorithmBox">AI视频算法盒子</el-menu-item>
		    <el-menu-item index="/smartGlasses">智能AR眼镜</el-menu-item>
		    <el-menu-item index="/safetyHelmet">智能安全帽</el-menu-item>
			<el-menu-item index="/compressionBox">智能视频压缩盒子</el-menu-item>
		</el-sub-menu>
		<el-menu-item index="/saleService">售后服务</el-menu-item>
		<el-menu-item index="/collaborationCases">合作案例</el-menu-item>
		<el-menu-item index="/contactUs">联系我们</el-menu-item>
	</el-menu>
</template>

<script setup>
	const { proxy } = getCurrentInstance();
	const sidebarRouters = computed(() => proxy.$store.getters.sidebarRouters);
	const activeIndex = computed(() => {
		const { meta, path } = proxy.$route;
		if(meta.activeMenu) {
			return meta.activeMenu;
		}
		return path;
	});
</script>

<style lang="scss" scoped>
	@import "@/assets/styles/mixin.scss";
	@import "@/assets/styles/variables.module.scss";
	.el-menu--horizontal{
		border: none;
	}
	.el-menu-item.is-active,
	.el-menu--horizontal>.el-menu-item,
	::v-deep .el-sub-menu .el-sub-menu__title,
	.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
	::v-deep .el-menu--horizontal .el-menu .el-sub-menu.is-active>.el-sub-menu__title{
		color: #fff !important;
		background-color: #0071aa !important;
	}
</style>