<!-- GJ概览页 -->
<template>
	<div class="content-main">
		<!-- 头部按钮 -->
		<div class="content-title">
			<div v-for="(value, index) in pageList" :key="index" @click="page = value">
				<div class="content-title-item" :style="{ background: page === value ? 'rgba(5, 95, 194, 1)' : '' }">
					<img class="title-icon" :src="`src/assets/images/icon/gjOverPreview-icon-${index + 1}.png`" />
					{{ value }}
				</div>
			</div>
		</div>

		<div class="content-box">
			<div class="title-text">主要国家科技动向监测</div>
			<div class="title-text-small">
				提供关于国家科技安全战略、各国科技政策体系、核心科技领域及动态风险的系统性、可视化综合信息视图。
			</div>

			<div class="box">
				<!-- 科技动向速递 -->
				<div class="item">
					<div class="item-header">
						<img class="item-header-icon" src="@/assets/images/icon/gjOverPreview-icon-4.png" />
						<div class="item-header-text">科技动向速递</div>
						<div class="item-header-more">更多 +</div>
					</div>
					<div class="item-header-divider" />
					<div class="item-content">
						<div class="item-card" :style="{
							background: `url(${technologicalTrends.image}) no-repeat center/cover`,
						}">
							<div class="item-card-content">
								<div class="item-card-title">
									<span class="item-card-title-text">
										{{ technologicalTrends.imageTitle.title }}
									</span>
									<span class="item-card-title-time">
										{{ technologicalTrends.imageTitle.time }}
									</span>
								</div>
								<div class="item-card-title-txt">
									{{ technologicalTrends.imageTitle.txt }}
								</div>
							</div>
						</div>

						<div class="item-card-right">
							<div style="overflow: auto;height: 400px;">
								<div v-for="(item, index) in technologicalTrends.data" :key="index" style="height: 46px;">
									<div class="list-row">
										<div class="item-list-punblier">{{ item.tag1 }}</div>
										<div class="item-list-content">{{ item.text }}</div>
										<div class="item-list-time">{{ item.time }}</div>
										<div class="item-list-punblier">{{ item.tag2 }}</div>
									</div>
									<div class="item-header-divider" />
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 风险信号 -->
				<div class="item">
					<div class="item-header">
						<img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" />
						<div class="item-header-text" style="background-color: #ce4f51">风险信号 <div class="num">{{ warningList.length
						}}</div>
						</div>

					</div>
					<div class="item-header-divider" />
					<div class="warning-wrap">
						<div v-for="(item, index) in warningList" :key="index" class="waring-item">
							<div class="waring-row">
								<div class="waring-status" :style="{
									color: item.status === 0 ? '#CE4F51' : item.status === 1 ? '#FA8C16' : '#52C41A',
									backgroundColor: item.status === 0 ? '#FFF1F0' : item.status === 1 ? '#FFF7E6' : '#F6FFED',
								}">
									{{
										item.status === 0
											? '特别重大'
											: item.status === 1
												? '重大风险'
												: '一般风险'
									}}
								</div>
								<div class="waring-text">{{ item.title }}</div>
								<div class="waring-time">{{ item.time }}</div>
							</div>
							<!-- <div class="item-header-divider" /> -->
						</div>
					</div>
					<div class="item-btn" @click="handleToMoreRiskSignal">
						<div class="icon">
							<img src="@/assets/images/more-signal.png" alt="" />
						</div>
						<div class="text">{{ "查看更多" }}</div>
					</div>
				</div>
			</div>

			<div class="title-text">主要国家科技博弈分析</div>
			<div class="title-text-small">
				从国家层面科技安全风险产生机理出发，围绕国家博弈“支撑资源—博弈手段—胜负标准”，开展风险监测分析工作
			</div>

			<MeansAnalysis />
			<ResourceAnalysis />
			<AdvantagesAnalysis />
			<div style="width: 100%;height: 100px;"></div>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import MeansAnalysis from './component/MeansAnalysis.vue';
import ResourceAnalysis from './component/ResourceAnalysis.vue'
import AdvantagesAnalysis from './component/AdvantagesAnalysis.vue'
const page = ref('首页');
const pageList = ['首页', '科技动向感知', '中美博弈概览'];

const technologicalTrends = ref({
	image: '/testData/gjOverPreview-data-1.png',
	imageTitle: {
		title: '欧盟投资73亿欧元推进数字化转型',
		time: '一小时前',
		txt: '2025年9月14日，欧盟委员会宣布通过“地平线欧洲”2025年工作计划投入约73亿欧元的专项资金，增强欧洲的科研创新引擎和',
	},
	data: [
		{ tag1: '科研仪器', text: '欧盟投资73亿欧元推进数字化转型', time: '1小时前', tag2: '新能源' },
		{ tag1: '创新主体', text: '美财政部发布拟议规则限制对华网...', time: '3小时前', tag2: '人工智能' },
		{ tag1: '科技人才', text: '美NIST发布《美国关键和新兴技术....', time: '昨天', tag2: '量子科技' },
		{ tag1: '创新主体', text: '美《开创未来先进计算生态系统:战...', time: '昨天', tag2: '人工智能' },
		{ tag1: '科研仪器', text: '欧盟启动初代“数字地球”系统..', time: '昨天', tag2: '量子科技' },
		{ tag1: '科研仪器', text: '美NSF投建国家AI可编程云实验室网...', time: '昨天', tag2: '新能源' },
		{ tag1: '科研仪器', text: '英启动全球顶尖科技人才引进计划瞄...', time: '昨天', tag2: '新能源' },
		{ tag1: '科研仪器', text: '美国家科学基金会致力改进下一代无...', time: '昨天', tag2: '新能源' },
	],
});

const warningList = ref([
	{ title: '美国大而美法案落地，总统签署通过', time: '一天前', status: 2 },
	{ title: '美大而美法案7月1日以51:50的票数胜出', time: '一天前', status: 2 },
	{ title: '首次提出“限制外国敏感实体获取补', time: '一天前', status: 1 },
	{ title: '首次提出“限制外国敏感实体获取补偿', time: '一天前', status: 1 },
	{ title: '首次提出“限制外国敏感实体获取补偿', time: '一天前', status: 0 },
]);

// 查看更多风险信号
const handleToMoreRiskSignal = () => {
	const route = router.resolve("/riskSignal");
	window.open(route.href, "_blank");
};
</script>

<style lang="scss" scoped>
.content-main {
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: Microsoft YaHei;
}

.content-title {
	cursor: pointer;
	height: 64px;
	color: #fff;
	display: flex;
	font-size: 20px;
	font-weight: 700;
	line-height: 64px;

	background: url('@/assets/images/bg/header-bg.png');
	padding-left: 160px;

	.content-title-item {
		display: flex;
		align-items: center;
		padding: 0 16px;

		.title-icon {
			width: 24px;
			height: 24px;
			margin-right: 8px;
		}
	}
}

.content-box {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	padding: 0 160px;

	.title-text {
		margin-top: 56px;
		color: rgba(5, 95, 194, 1);
		font-size: 32px;
		font-weight: 700;
		text-align: center;
	}

	.title-text-small {
		margin-top: 8px;
		color: rgba(59, 65, 75, 1);
		font-size: 20px;
		text-align: center;
	}
}

.box {
	margin-top: 57px;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 16px;
	height: 507px;
}

.item {
	height: 500px;
	box-sizing: border-box;
	border: 1px solid #fff;
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
	background: rgba(255, 255, 255, 0.65);

	.item-header {
		height: 48px;
		display: flex;
		align-items: center;

		.item-header-icon {
			width: 20px;
			height: 20px;
			margin: 0 15px;
		}

		.item-header-text {
			/* 原有样式不变 */
			display: flex;
			align-items: center;
			/* 垂直居中 */
			justify-content: center;
			/* 水平居中（可选） */
			gap: 8px;
			/* 文字与圆点之间的距离，按需调 */

			/* 其余保持原样 */
			width: 150px;
			height: 48px;
			/* 建议把高度写死，方便对齐 */
			background: #055fc2;
			color: #fff;
			font: bold 20px/1 Microsoft YaHei;
			text-align: center;

			.num {
				display: inline-flex;
				/* 或 flex */
				align-items: center;
				justify-content: center;
				width: 24px;
				height: 24px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.3);
				font-size: 14px;
			}
		}




		.item-header-more {
			margin-left: auto;
			margin-right: 20px;
			color: rgba(59, 65, 75, 1);
			font-size: 16px;
			cursor: pointer;
		}
	}

	.item-header-divider {
		width: 100%;
		height: 1px;
		background: #eaecee;
	}

	.item-content {
		height: calc(100% - 50px);
		display: flex;
		padding: 20px;

		.item-card {
			width: 50%;
			position: relative;
			border: 1px solid #fff;
			border-radius: 10px;
			box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.3);

			.item-card-content {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 110px;
				background: rgba(0, 0, 0, 0.5);
				padding: 6px;
				border-radius: 0 0 10px 10px;

				.item-card-title {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;

					.item-card-title-text {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-right: 8px;
						color: #fff;
						font-size: 20px;
						font-weight: 700;
					}

					.item-card-title-time {
						white-space: nowrap;
						color: rgba(255, 255, 255, 0.65);
						font-size: 16px;
					}
				}

				.item-card-title-txt {
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #fff;
					font-size: 16px;
				}
			}
		}

		.item-card-right {
			width: 50%;
			padding-left: 10px;

			.list-row {
				display: flex;
				align-items: center;
				margin: 10px 0;
				height: 40px;



				.item-list-punblier {
					width: 68px;
					height: 22px;
					line-height: 22px;
					border-radius: 4px;
					background: rgba(231, 243, 255, 1);
					text-align: center;
					font-size: 14px;
					color: rgba(5, 95, 194, 1);
					margin-right: 5px;
				}

				.item-list-content {
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.item-list-time {
					width: 68px;
					text-align: right;
					color: rgba(132, 136, 142, 1);
				}
			}
		}
	}

	.warning-wrap {
		padding: 30px 23px;
		height: 350px;
		overflow: hidden;

		.waring-row {
			display: flex;
			align-items: center;
			height: 47px;

			.waring-status {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				padding: 2px;
				font-size: 12px;
				text-align: center;
			}

			.waring-text {
				color: rgba(59, 65, 75, 1);
				width: calc(100% - 120px);
				padding: 0 16px;
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 48px;
				text-align: justify;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				border-bottom: 1px solid #eaecee;
			}

			.waring-time {
				width: 68px;
				color: rgba(132, 136, 142, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 48px;
				letter-spacing: 0px;
				text-align: right;
				border-bottom: 1px solid #eaecee;
			}
		}
	}

	.item-btn {
		width: 460px;
		height: 42px;
		margin: 0 auto 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6px;
		background: rgba(5, 95, 194, 1);
		color: #fff;
		font-size: 16px;
		cursor: pointer;

		.icon {
			width: 16px;
			height: 16px;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>