<!--ZM博弈概览页-->
<template>
	<div class="home-wrapper">
		<img :src="background" alt="" class="background-img" />
		<!-- <div class="home-header">
			<div class="header-left">
				<HeaderMenu></HeaderMenu>
			</div>
			<div class="header-right">
				<div class="header-search-box">
					<div class="header-search-left">
						<div class="input-box">
							<el-input v-model="searchText" @keyup.enter="handleSearch" />
						</div>
						<div class="icon" @click="handleSearch">
							<img src="./assets/images/search-icon.png" alt="" />
						</div>
					</div>
					<div class="header-search-right" @click="handleToSearch">
						<div class="header-img-box"><img src="./assets/images/search-btn.png" alt="" /></div>
					</div>
				</div>
			</div>
		</div> -->
		<div class="content-box">
			<!-- 导航栏 -->
			<div class="content-nav">
				<div class="nav-title">中美科技博弈概览</div>
				<div class="nav-btn">
					<div v-for="item in navList" :key="item.name" class="btn-item" @click="handleScrollTo(item.id)">
						<span>{{ item.name }}</span>
						<img :src="right" alt="" />
					</div>
				</div>
			</div>
			<!-- 最新风险动态 -->
			<commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px; margin-bottom: 36px"></commonTitle>
			<newRisk></newRisk>
			<!-- 最新科技要闻 -->
			<!-- <commonTitle id="tech-news" title="最新科技要闻" style="margin-top: 64px;"></commonTitle> -->
			<!-- 美对华“四全”打压 -->
			<div id="us-pressure" class="us-pressure-section">
				<div class="data-select">
					<div
						v-for="item in dateList"
						:key="item.type"
						class="date-item"
						:class="{ active: activeDate === item.type }"
						@click="handleDateClick(item.type)"
					>
						<img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
						<span>{{ item.name }}</span>
					</div>
				</div>
				<commonTitle title="美对华“四全”打压" style="margin-bottom: 36px"></commonTitle>
			</div>
			<fourSuppress></fourSuppress>
			<!-- 中美博弈概况 -->
			<commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px; margin-bottom: 36px"></commonTitle>
			<gameProfile></gameProfile>
			<div class="bottom-info">
				<div class="info-item">
					<div class="info-item-left">
						<img :src="logo1" alt="" />
						<div class="info-item-left-content">
							<p>地址：北京市海淀区复兴路某某某某某某 邮编：100000</p>
							<p>办公电话：000-88888888 办公传真：000-88888888</p>
							<p>中国中国中国中国中国北京 版权所有 京ICP备00000000号</p>
						</div>
					</div>
					<div class="info-item-right">
						<img class="img1" :src="logo2" alt="" />
						<img class="img2" :src="logo3" alt="" />
						<div class="text2">{{ "中国某某某某某某某某部" }}</div>
						<div class="text3">{{ "中国某某某某某某某某所" }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import background from "./assets/images/backgroundBT.png";
import HeaderMenu from "@/components/headerMenu.vue";
import right from "./assets/icons/right.png";
import commonTitle from "./commonTitle/comTitle.vue";
import week from "./assets/icons/week.png";
import weekActive from "./assets/icons/week-active.png";
import month from "./assets/icons/month.png";
import monthActive from "./assets/icons/month-active.png";
import year from "./assets/icons/year.png";
import yearActive from "./assets/icons/year-active.png";
import logo1 from "./assets/images/logo1.png";
import logo2 from "./assets/images/logo2.png";
import logo3 from "./assets/images/logo3.png";
// 组件引入
import newRisk from "./components/newRisk/index.vue";
import fourSuppress from "./components/fourSuppress/index.vue";
import gameProfile from "./components/gameProfile/index.vue";

const router = useRouter();

const navList = ref([
	{ name: "最新风险动态", id: "risk-dynamic" },
	{ name: "最新科技要闻", id: "tech-news" },
	{ name: "美对华“四全”打压", id: "us-pressure" },
	{ name: "中美博弈概况", id: "zm-overview" }
]);

const handleScrollTo = id => {
	if (id === "tech-news") {
		const route = router.resolve("/newsBrief");
		window.open(route.href, "_blank");
		return;
	}
	const element = document.getElementById(id);
	const container = document.querySelector(".content-box");
	if (element && container) {
		const targetOffsetTop = element.offsetTop - container.offsetTop;
		container.scrollTo({
			top: targetOffsetTop,
			behavior: "smooth"
		});
	}
};

const searchText = ref("");
const handleSearch = () => {
	if (!searchText.value.trim()) {
		ElMessage.warning("请输入搜索关键词");
		return;
	}
	const curRoute = router.resolve({
		path: "/searchResults",
		query: {
			searchText: searchText.value.trim()
		}
	});
	window.open(curRoute.href, "_blank");
};
// 跳转到综合检索页面
const handleToSearch = () => {
	const route = router.resolve("/comprehensiveSearch");
	window.open(route.href, "_blank");
};

const dateList = ref([
	{ name: "本周", type: "week", icon: week, activeIcon: weekActive },
	{ name: "本月", type: "month", icon: month, activeIcon: monthActive },
	{ name: "今年", type: "year", icon: year, activeIcon: yearActive }
]);
const activeDate = ref("week");
const handleDateClick = type => {
	activeDate.value = type;
};
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.home-wrapper {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	.background-img {
		width: 100%;
		height: 700px;
		position: absolute;
		left: 0;
		z-index: -1;
	}
	// .home-header {
	// 	height: 64px;
	// 	flex-shrink: 0;
	// 	z-index: 100;
	// 	background: url("./assets/images/header-bg.png") no-repeat center center;
	// 	background-size: 100% 100%;
	// 	box-sizing: border-box;
	// 	padding: 0 160px;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	.header-right {
	// 		.header-search-box {
	// 			display: flex;
	// 			gap: 12px;
	// 			justify-content: flex-end;

	// 			.header-search-left {
	// 				width: 360px;
	// 				height: 36px;
	// 				line-height: 36px;
	// 				border-radius: 4px;
	// 				background: rgba(255, 255, 255, 0.3);
	// 				display: flex;

	// 				.input-box {
	// 					width: 324px;
	// 					:deep(.el-input) {
	// 						.el-input__wrapper {
	// 							background-color: transparent !important;
	// 							box-shadow: none !important;
	// 							padding: 0 12px;
	// 						}
	// 						.el-input__inner {
	// 							color: #fff;
	// 							height: 36px;
	// 							line-height: 36px;
	// 							&::placeholder {
	// 								color: rgba(255, 255, 255, 0.6);
	// 							}
	// 						}
	// 					}
	// 				}

	// 				.icon {
	// 					width: 36px;
	// 					height: 36px;
	// 					border-radius: 4px;
	// 					cursor: pointer;
	// 					&:hover {
	// 						background: rgba(255, 255, 255, 0.5);
	// 					}

	// 					img {
	// 						width: 100%;
	// 						height: 100%;
	// 					}
	// 				}
	// 			}

	// 			.header-search-right {
	// 				width: 36px;
	// 				height: 36px;
	// 				line-height: 36px;
	// 				border-radius: 4px;
	// 				background: rgba(255, 255, 255, 0.3);
	// 				cursor: pointer;

	// 				.header-img-box {
	// 					width: 19px;
	// 					height: 24px;
	// 					margin: 5px auto;

	// 					img {
	// 						width: 100%;
	// 						height: 100%;
	// 					}
	// 				}
	// 			}
	// 		}
	// 	}
	// }

	.content-box {
		flex: 1;
		width: 100%;
		overflow-y: auto;
		padding-top: 48px;
		.us-pressure-section {
			position: relative;
			margin-top: 64px;
			.data-select {
				width: 120px;
				height: 144px;
				position: absolute;
				top: 80px;
				left: 0; /* 临时改为0，检查是否能显示 */
				background-color: rgba(255, 255, 255, 0.65);
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
				padding: 2px 2px 2px 0px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				z-index: 10;

				.date-item {
					display: flex;
					align-items: center;
					padding-left: 18px;
					height: 46px;
					cursor: pointer;
					border-top-right-radius: 10px;
					border-bottom-right-radius: 10px;

					img {
						width: 18px;
						height: 18px;
						margin-right: 18px;
					}

					span {
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						color: rgb(95, 101, 108);
					}

					&.active {
						background-color: rgba(231, 243, 255, 1);
						span {
							font-weight: 700;
							color: rgb(5, 95, 194);
						}
					}
				}
			}
		}
		.content-nav {
			.nav-title {
				font-size: 48px;
				font-weight: 400;
				line-height: 62px;
				letter-spacing: 0px;
				text-align: center;
				color: rgb(5, 95, 194);
				font-family: YouSheBiaoTiHei;
				margin-bottom: 14px;
			}

			.nav-btn {
				display: flex;
				justify-content: center;
				gap: 16px;

				.btn-item {
					display: flex;
					align-items: center;
					padding: 10px 24px 10px 32px;
					background: #ffffff;
					border: 1px solid rgba(255, 255, 255, 1);
					border-radius: 50px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					cursor: pointer;
					transition: all 0.3s;

					// &:hover {
					//     background: rgba(255, 255, 255, 0.8);
					//     transform: translateY(-2px);
					// }

					span {
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
						line-height: 26px;
						color: rgb(5, 95, 194);
						margin-right: 16px;
					}

					img {
						width: 6px;
						height: 12px;
					}
				}
			}
		}
		.bottom-info {
			width: 100%;
			height: 176px;
			margin-bottom: 80px;
			background-color: rgb(247, 248, 249);
			.info-item {
				width: 1601px;
				height: 176px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.info-item-left {
					display: flex;
					align-items: center;
					img {
						width: 134px;
						height: 91px;
						margin-right: 27px;
					}
					.info-item-left-content {
						font-size: 16px;
						font-weight: 400;
						line-height: 32px;
						color: rgb(59, 65, 75);
						font-family: Microsoft YaHei;
					}
				}
				.info-item-right {
					display: flex;
					align-items: center;
					position: relative;
					height: 60px;
					.text2 {
						left: 60px;
						position: absolute;
						width: 237px;
						height: 37px;
						background: #fff;
						color: rgba(34, 41, 52, 1);
						font-family: Source Han Sans CN;
						font-style: Bold;
						font-size: 20px;
						font-weight: 700;
						line-height: 37px;
						letter-spacing: 0px;
						text-align: center;
					}
					.text3 {
						left: 385px;
						top: 12px;
						position: absolute;
						width: 237px;
						height: 37px;
						background: #fff;
						color: rgba(34, 41, 52, 1);
						font-family: Source Han Sans CN;
						font-style: Bold;
						font-size: 20px;
						font-weight: 700;
						line-height: 37px;
						letter-spacing: 0px;
						text-align: center;
					}
					.img1 {
						width: 300px;
						height: 48.8px;
						margin-right: 24px;
					}
					.img2 {
						width: 300px;
						height: 43.5px;
					}
				}
			}
		}
	}
}
</style>
