<template>
	<div class="menu-wrapper">
		<div class="menu-item" @click="handleToOverview">
			<div class="menu-item-icon">
				<img src="@/assets/icons/home-header-icon1.png" alt="" />
			</div>
			<div class="menu-item-text">{{ "首页" }}</div>
		</div>
		<div
			class="menu-item"
			@click="handleToGjOverview"
			@mouseenter="handleIsShowCountryMore(true)"
			@mouseleave="handleIsShowCountryMore(false)"
		>
			<div class="menu-item-icon1">
				<img src="@/assets/icons/home-header-icon2.png" alt="" />
			</div>
			<div class="menu-item-text">{{ "国家" }}</div>
		</div>
		<div class="menu-item">
			<div class="menu-item-icon2">
				<img src="@/assets/icons/home-header-icon3.png" alt="" />
			</div>
			<div class="menu-item-text">{{ "领域" }}</div>
		</div>
		<div class="menu-item">
			<div class="menu-item-icon3">
				<img src="@/assets/icons/home-header-icon4.png" alt="" />
			</div>
			<div class="menu-item-text">{{ "要素" }}</div>
		</div>
		<div class="menu-item">
			<div class="menu-item-icon4">
				<img src="@/assets/icons/home-header-icon5.png" alt="" />
			</div>
			<div class="menu-item-text">{{ "事件" }}</div>
		</div>
	</div>
	<div
		class="more-wrapper"
		v-if="isShowCountryMore"
		@mouseenter="handleIsShowCountryMore(true)"
		@mouseleave="handleIsShowCountryMore(false)"
	>
		<div class="left">
			<div class="left-header">
				<div class="title">{{ "中美科技博弈概览" }}</div>
				<div class="icon">
					<img src="@/assets/icons/more.png" alt="" />
				</div>
			</div>
			<div class="left-main">
				<div class="item" v-for="(item, index) in leftList" :key="index" @click="handleClickItem(item)">
					<div class="icon"></div>
					<div class="text">{{ item.name }}</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="right-header">
				<div class="title">{{ "风险检测" }}</div>
				<div class="icon">
					<img src="@/assets/icons/more.png" alt="" />
				</div>
			</div>
			<div class="right-main">
				<div class="item" v-for="(item, index) in rightList" :key="index">
					<div class="icon"></div>
					<div class="text">{{ item.name }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import router from "@/router";

const isShowCountryMore = ref(false);

const handleIsShowCountryMore = isShow => {
	isShowCountryMore.value = isShow;
};

const handleToOverview = () => {
	router.push({
		path: "/overview"
	});
};

const handleToGjOverview = () => {
	router.push({
		path: "/gjOverview"
	});
};

const leftList = ref([
	{
		name: "科技法案",
		path: "/billHome"
	},
	{
		name: "政令",
		path: "/decree"
	},
	{
		name: "美国科技智库",
		path: "/thinkTank"
	},
	{
		name: "出口管制",
		path: "/exportControl"
	},
	{
		name: "投融资限制",
		path: "/finance"
	},
	{
		name: "市场准入限制",
		path: "/marketAccessRestrictions"
	},
	{
		name: "合作限制",
		path: "/cooperationRestrictions"
	},
	{
		name: "规则限制",
		path: "/ruleRestrictions"
	},
	{
		name: "美国主要创新主体",
		path: "/innovationSubject"
	},
	{
		name: "美国科技人物观点",
		path: "/technologyFigures"
	},
	{
		name: "美国科研资助体系",
		path: "/scientificFunding"
	}
]);

const handleClickItem = item => {
	const curRoute = router.resolve({
		path: item.path
	});
	window.open(curRoute.href, "_blank");
};

const rightList = ref([
	{
		name: "科技战略布局",
		path: ""
	},
	{
		name: "创新体系位势分析",
		path: ""
	}
]);
</script>

<style lang="scss" scoped>
.menu-wrapper {
	width: 644px;
	height: 64px;
	display: flex;
	justify-content: space-between;

	.menu-item {
		display: flex;
		gap: 11px;
		width: 112px;
		height: 64px;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		&:hover {
			background: var(--color-main-active);
		}
		.menu-item-icon {
			// margin-top: 2px;
			width: 22px;
			height: 22px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.menu-item-icon1 {
			// margin-top: 4px;
			width: 24px;
			height: 24px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.menu-item-icon2 {
			// margin-top: 4px;
			width: 24px;
			height: 22px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.menu-item-icon3 {
			// margin-top: 2px;
			width: 20px;
			height: 20px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.menu-item-icon4 {
			width: 22px;
			height: 20px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.menu-item-text {
			// margin-top: 16px;
			height: 32px;
			color: rgba(255, 255, 255, 1);
			font-family: Microsoft YaHei;
			font-style: Bold;
			font-size: 24px;
			font-weight: 700;
			line-height: 32px;
			letter-spacing: 0px;
			text-align: left;
		}
	}
}
.more-wrapper {
	position: absolute;
	z-index: 99999;
	top: 64px;
	left: 0;
	width: 100%;
	height: 299px;
	background: rgb(249, 249, 249);
	display: flex;
	.left {
		margin-top: 35px;
		margin-left: 179px;
		width: 769px;
		height: 218px;
		.left-header {
			display: flex;
			height: 26px;
			align-items: center;
			.title {
				width: 160px;
				height: 26px;
				color: var(--color-main-active);
				font-family: Microsoft YaHei;
				font-style: Bold;
				font-size: 20px;
				font-weight: 700;
				line-height: 26px;
				letter-spacing: 0px;
				text-align: left;
			}
			.icon {
				margin-top: -8px;
				margin-left: 8px;
				width: 10px;
				height: 10px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.left-main {
			height: 192px;
			display: flex;
			flex-wrap: wrap;

			.item {
				margin-top: 18px;
				display: flex;
				width: 256px;
				height: 36px;
				align-items: center;
				border-radius: 4px;
				cursor: pointer;
				&:hover {
					background: var(--color-bg-hover);
					.icon {
						background: var(--color-main-active) !important;
					}
					.text {
						color: var(--color-main-active) !important;
						font-weight: 700;
						font-size: 20px;
					}
				}
				.icon {
					width: 6px;
					height: 6px;
					border-radius: 3px;
					background: rgba(95, 101, 108, 1);
				}
				.text {
					margin-left: 10px;
					height: 24px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-style: Regular;
					font-size: 18px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: left;
				}
			}
		}
	}
	.right {
		margin-top: 35px;
		margin-left: 53px;
		width: 192px;
		height: 116px;
		.right-header {
			display: flex;
			height: 26px;
			align-items: center;
			.title {
				width: 80px;
				height: 26px;
				color: var(--color-main-active);
				font-family: Microsoft YaHei;
				font-style: Bold;
				font-size: 20px;
				font-weight: 700;
				line-height: 26px;
				letter-spacing: 0px;
				text-align: left;
			}
			.icon {
				margin-top: -8px;
				margin-left: 8px;
				width: 10px;
				height: 10px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.right-main {
			.item {
				margin-top: 18px;
				display: flex;
				width: 256px;
				height: 36px;
				align-items: center;
				border-radius: 4px;
				cursor: pointer;
				&:hover {
					background: var(--color-bg-hover);
					.icon {
						background: var(--color-main-active) !important;
					}
					.text {
						color: var(--color-main-active) !important;
						font-weight: 700;
						font-size: 20px;
					}
				}
				.icon {
					width: 6px;
					height: 6px;
					border-radius: 3px;
					background: rgba(95, 101, 108, 1);
				}
				.text {
					margin-left: 10px;
					height: 24px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-style: Regular;
					font-size: 18px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: left;
				}
			}
		}
	}
}
</style>