<!-- 中M博弈概览页 -->
<template>
	<div class="content-main">
		<!-- 面包屑 -->
		<div class="content-title"><span>国家科技安全</span>> <span>中美博弈概览 </span></div>
		<!-- 中美博弈最新动态内容-->
		<div class="content-box">
			<div class="title-text">中美博弈最新动态 </div>
			<div class="title-text-small">
				提供半导体、AI、量子等关键领域的竞争动态、政策追踪与产业链分析，实时把握中美博弈全局
			</div>
			<div class="box">
				<div class="item left">
					<div class="item-header">
						<img class="item-header-icon" src="@/assets/images/icon/overview-card-header-icon.png" />
						<div class="item-header-text">机构动态</div>
						<div class="item-header-more">更多 +</div>
					</div>
					<div class="item-header-divider"></div>
					<div class="item-content">
						<div class="item-card" style="">
							<div class="item-card-btn-left" @click="changeOrganizationNews('left')">
								<img class="item-btn-icon" src="@/assets/images/icon/card-btn-left.png" />

							</div>
							<!-- 机构动态内容-->
							<div class="item-card-content">
								<div class="item-card-content-header">
									<div style="width: calc(100% - 80px);">
										<div class="item-card-content-title">
											{{ organizationNews[organizationNewsShow].title }}
										</div>
										<div class="item-card-content-title-small">
											{{ organizationNews[organizationNewsShow].time + ' ' + organizationNews[organizationNewsShow].adress }}
										</div>
									</div>
									<img class="item-card-content-title-image" :src="organizationNews[organizationNewsShow].image" alt="">
								</div>
								<div class="item-header-divider"></div>
								<div class="item-card-content-text  ">
									{{ organizationNews[organizationNewsShow].content }}
								</div>
								<div style="display: flex">
									<div class="item-card-content-tag" v-for="tag,index in organizationNews[organizationNewsShow].tag" :key="index"
										:style="{ color: tag.textColor, background: tag.color, borderColor: tag.color }">
										{{ tag.text }}
									</div>
								</div>
							</div>
							<div class="item-card-btn-right" @click="changeOrganizationNews('right')">
								<img class="item-btn-icon" src="@/assets/images/icon/card-btn-right.png" />
							</div>

						</div>
						<div class="item-card-right ">
							<div class="item-list">
								<div v-for="organizationItem,index in organizationList" :key="index" style="height: 40px">
									<div style="display: flex;margin: 10px">
										<div class="item-list-punblier">
											{{ organizationItem.punblier }}
										</div>
										<div class="item-list-content">
											{{ organizationItem.content }}
										</div>
										<div class="item-list-time">
											{{ organizationItem.time }}
										</div>
									</div>
									<div class="item-header-divider"></div>
								</div>

							</div>
						</div>
					</div>
				</div>
				<!--风险信号-->
				<div class="item left">
					<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>
					</div>
					<div class="item-header-divider"></div>
					<div style="padding: 30px 10px;height: 350px;">
						<div class="waring-item" v-for="(item, index) in warningList" :key="index">
							<div style="display: flex;height: 40px;">
								<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>
					<div class="item-btn">
						查看更多
					</div>
				</div>
				<!--新闻资讯-->
				<div class="item right">
					<div class="item-header">
						<img class="item-header-icon" src="@/assets/images/icon/news-card-header-icon.png" />
						<div class="item-header-text" style="background:  rgba(255, 255, 255, 0.65) ;color:#055FC2">新闻资讯</div>
						<div class="item-header-more" style=" color:#055FC2">更多 +</div>
					</div>
					<div class="item-header-divider"></div>
					<div class="news-box">
						<div v-for="item,index in newsList" :key="index" class="news-box-item">
							<div style="	display: flex;">
								<img :src="item.image" />
								<div style="padding: 0 10px ;">
									<div class="news-box-title">
										{{ item.title }}
									</div>
									<div class="news-box-title-small">
										{{ item.time + item.publier }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--人物动态-->
				<div class="item right">
					<div class="item-header">
						<img class="item-header-icon" src="@/assets/images/icon/people-card-header-icon.png" />
						<div class="item-header-text" style="background:  rgba(255, 255, 255, 0.65) ;color:#055FC2">人物动态</div>
						<div class="item-header-more" style=" color:#055FC2">更多 +</div>
					</div>
					<div class="item-header-divider"></div>
					<div class="character-box">
						<div class="character-item" v-for="item,index in characterDynamics" :key="index">
							<img :src="item.image" class="character-image" />
							<div class="talk-box">
								<div style="display: flex;">
									<div class="talk-title">
										{{ item.name }}
									</div>
									<div style="width: 60%;text-align: right;">
										{{ item.position + '.' + item.time }}
									</div>
								</div>
								{{ item.talk }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div>
				<Thematicanalysis />
				<ResourceSupport />
				<strengthComparison />
			</div>

		</div>

	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Thematicanalysis from "./component/Thematicanalysis.vue";
import ResourceSupport from "./component/ResourceSupport.vue";
import strengthComparison from "./component/strengthComparison.vue";
import router from "@/router";
import { color } from "echarts";
const organizationNews = ref([
	{
		title: "1美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
		time: "2025年9月16日",
		adress: "美国白宫",
		image: "/testData/organizationNews-image1.png",
		content:
			"9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需",
		tag: [
			{
				color: "#FFF1F0",
				textColor: " rgba(245, 34, 45, 1)",
				text: "人工智能"
			},
			{
				color: "#E6F4FF",
				textColor: "  rgba(22, 119, 255, 1)",
				text: "通信网络"
			}
		]
	},
	{
		title: "2美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
		time: "2025年9月16日",
		adress: "美国白宫",
		image: "/testData/organizationNews-image1.png",
		content:
			"9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需",
		tag: [
			{
				color: "#F5222D",
				textColor: " #FFF1F0",
				text: "人工智能"
			},
			{
				color: "#E6F4FF",
				textColor: "  #1677FF",
				text: "通信网络"
			}
		]
	},
	{
		title: "3美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
		time: "2025年9月16日",
		adress: "美国白宫",
		image: "/testData/organizationNews-image1.png",
		content:
			"9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需",
		tag: [
			{
				color: "#FFF1F0",
				textColor: " rgba(245, 34, 45, 1)",
				text: "人工智能"
			},
			{
				color: "#E6F4FF",
				textColor: "  rgba(22, 119, 255, 1)",
				text: "通信网络"
			}
		]
	}
]); //机构动态
const organizationNewsShow = ref(0); //机构动态当前展示条目

const organizationList = ref([
	{
		time: "1小时前",
		content:
			"特朗普于美国独立日签署法案，​公法编号Pub. L. No. 119-21。白宫举行庆典，B-2轰炸机飞越上空，象征“美国新时代”开启。",
		punblier: "国会"
	},
	{
		time: "10小时前",
		content: "众议院最终表决218票赞成 vs 214票反对，修订版法案以4票优势通过，2名共和党议员倒戈，民主党全员反对。",
		punblier: "商务部"
	},
	{
		time: "11小时前",
		content: "民主党领袖杰弗里斯发表 ​8小时45分钟​ 演讲（众议院现代史最长），抗议法案“劫贫济富”，但仍未阻止表决。",
		punblier: "财政部"
	},
	{
		time: "一天前",
		content: "众议院以 ​219:213​ 通过程序规则，为最终表决铺路。此前4名共和党议员反对程序规则，议长约翰逊紧急游说挽回1票。",
		punblier: "FCC"
	},
	{
		time: "周三",
		content:
			"参议院最终表决投票51:50​，副总统万斯（JD Vance）投出关键票打破平局。3名共和党参议员倒戈（蒂利斯、保罗、柯林斯）。",
		punblier: "白宫"
	}
]); //机构动态

//风险信号
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 newsList = ref([
	{
		image: "/testData/news-1.png",
		title: " 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ",
		time: "11-4",
		publier: "华盛顿纽约"
	},
	{
		image: "/testData/news-1.png",
		title: " 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ",
		time: "11-4",
		publier: "华盛顿纽约"
	},
	{
		image: "/testData/news-1.png",
		title: " 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ",
		time: "11-4",
		publier: "华盛顿纽约"
	},
	{
		image: "/testData/news-1.png",
		title: " 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ",
		time: "11-4",
		publier: "华盛顿纽约"
	},
	{
		image: "/testData/news-1.png",
		title: " 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ",
		time: "11-4",
		publier: "华盛顿纽约"
	},
	{
		image: "/testData/news-1.png",
		title: " 美国联邦政府停摆持续临时拨款法案再次“闯关”失败美政府即将刷新“停摆”纪录 ",
		time: "11-4",
		publier: "华盛顿纽约"
	}
]);

//人物动态
const characterDynamics = ref([
	{
		image: "/testData/united_states 1.png",
		name: "詹姆斯·刘易斯",
		position: "商务部某办公室主任",
		time: "一天前",
		talk: "指出美国在AI赋能科学，特别是“自驱实验室”等自动化科研设施上的投资不足，呼吁进行系统性战略投资"
	},
	{
		image: "/testData/united_states 2.png",
		name: "迈克尔·霍洛维茨",
		position: "某计划署主席",
		time: "一天前",
		talk: "评价特朗普政府《AI国家行动计划》，认为其关键在于通过技术出口和基础设施建设主动抢占全球AI主导权。"
	},
	{
		image: "/testData/united_states 1.png",
		name: "詹姆斯·戴维·万斯",
		position: "副总统",
		time: "一天前",
		talk: "提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。"
	}
]);

function changeOrganizationNews(type) {
	if (type === "left") {
		organizationNewsShow.value === 0 ? "" : (organizationNewsShow.value = organizationNewsShow.value - 1);
	} else {
		organizationNews.value === organizationNews.value.length - 1
			? ""
			: (organizationNewsShow.value = organizationNewsShow.value + 1);
	}
}
onMounted(() => {});
</script>

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

	.content-title {
		height: 64px;
		color: #fff;
		font-family: Microsoft YaHei;
		font-size: 20px;
		font-weight: 700;
		line-height: 26px;
		line-height: 64px;
		background: url("../../assets/images/bg//header-bg.png");
		box-sizing: border-box;
		padding-left: 160px;
	}

	.content-box {
		width: 100%;
		height: 100%;
		overflow: auto;
		padding: 0 10%;

		.title-text {
			font-size: 32px;
			font-weight: 700;
			line-height: 42px;
			margin: 40px;
			text-align: center;
		}

		.title-text-small {
			font-size: 20px;
			font-weight: 400;
			line-height: 30px;
			margin: 40px;
			text-align: center;
		}

		/* 父级：2×2 网格，固定间距 */
		.box {
			display: grid;
			grid-template-columns: 2fr 1fr;
			/* 左列宽是右列的 2 倍 */
			grid-auto-rows: 1fr;
			/* 两行等高 */
			gap: 16px;
			/* 横竖间距都是 16 px */
			height: 1000px;
			/* 示例：撑满视口，可改 */
		}

		/* 子级：仅上色居中，方便观察 */
		.item {
			height: 450px;
			justify-content: center;
			box-sizing: border-box;
			border: 1px solid var(--主色/白色主色, rgba(255, 255, 255, 1));
			border-radius: var(---, 10px);
			/* 业务系统/模块阴影 */
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.65);

			.item-header {
				height: 48px;
				width: 100%;
				display: flex;

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

				.item-header-text {
					width: 112px;
					background: #055fc2;
					color: #ffffff;
					font-family: Microsoft YaHei;
					font-size: 20px;
					line-height: 48px;
					text-align: center;
				}

				.item-header-more {
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					line-height: 48px;
					text-align: center;
					margin-left: calc(100% - 200px);
					width: 50px;
					margin-left: calc(100% - 250px);
				}
			}

			.item-header-divider {
				/* 矩形 249 */
				width: 100%;
				height: 1px;
				background: #eaecee;
			}

			.item-card-content-tag {
				width: 74px;
				height: 24px;
				padding: 1px 8px 1px 8px;
				margin: 2px;
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;
				letter-spacing: 0px;
				text-align: justify;
				box-sizing: border-box;
				border: 1px;
				border-radius: 4px;
			}

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

				.item-card {
					width: 50%;
					height: 100%;
					display: flex;
					box-sizing: border-box;
					border: 1px solid var(--主色/白色主色, rgba(255, 255, 255, 1));
					border-radius: 10px;
					/* 业务系统/模块阴影 */
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 0.3);

					.item-card-btn-left {
						height: 100%;
						width: 24px;
						padding-top: calc(50% - 20px);
					}

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

						.item-card-content-header {
							display: flex;

							.item-card-content-title {
								color: var(rgba(59, 65, 75, 1));

								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
								letter-spacing: 0px;
								text-align: justify;
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								text-overflow: ellipsis;
								word-break: break-all;
							}

							.item-card-content-title-small {
								color: var(rgba(95, 101, 108, 1));

								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}

						.item-card-content-title-image {
							height: 50px;
							width: 50px;
						}

						.item-card-content-text {
							color: var(rgba(95, 101, 108, 1));

							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
							letter-spacing: 0px;
							text-align: left;

							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 7;
							text-overflow: ellipsis;
							word-break: break-all;
						}
					}

					.item-btn-icon {
						height: 48px;
						width: 100%;
						margin-top: calc(50% - 24px);
					}

					.item-card-btn-right {
						height: 100%;
						width: 24px;
						padding-top: calc(50% - 20px);
					}
				}

				.item-card-right {
					width: 50%;
					height: 100%;
					display: flex;

					.item-list {
						padding: 10px;

						.item-list-punblier {
							width: 64px;
							height: 22px;
							border-radius: 4px;
							background: rgba(231, 243, 255, 1);
							text-align: center;
							padding: 1px 4px 1px 4px;
							color: rgba(5, 95, 194, 1);

							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 20px;
							letter-spacing: 0px;
							margin-right: 5px;
						}

						.item-list-content {
							width: calc(100% - 150px);
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							text-overflow: ellipsis;
							word-break: break-all;
						}

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

							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: right;
						}
					}
				}
			}

			.waring-item {
				.waring-status {
					width: 40px;
					height: 40px;
					border-radius: 50%;
					font-size: 14px;
					margin-right: 5px;
				}

				.waring-text {
					color: rgba(59, 65, 75, 1);
					width: calc(100% - 180px);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 30px;
					letter-spacing: 0px;
					text-align: justify;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					word-break: break-all;
				}

				.waring-time {
					width: 68px;
					color: rgba(132, 136, 142, 1);

					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: right;
				}
			}

			.item-btn {
				/* Buttons按钮/主按钮/亮色/默认 */
				width: 460px;
				height: 42px;
				margin: 0 20px;
				/* 自动布局 */
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				gap: 8;
				padding: 5px 16px 5px 16px;

				border-radius: 6px;
				background: rgba(5, 95, 194, 1);
				color: rgba(255, 255, 255, 1);

				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: center;
			}

			/* 新闻资讯 */
			.news-box {
				display: grid;
				grid-template-columns: 1fr 1fr;
				/* 两列，等宽 */
				gap: 10px;
				height: 400px;
				overflow: hidden;

				.news-box-item {
					padding: 20px;

					.news-box-item-img {
						/* 矩形 265 */
						width: 96px;
						height: 72px;
					}

					.news-box-title {
						color: rgba(59, 65, 75, 1);

						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
						overflow: hidden;
						display: -webkit-box;
						/* 旧语法，但必须写 */
						-webkit-box-orient: vertical;
						/* 垂直排列 */
						-webkit-line-clamp: 2;
						/* 限制两行 */
						text-overflow: ellipsis;
						/* 兜底，部分旧机需要 */
						/* 可选：防止单词过长撑开 */
						word-break: break-all;
					}

					.news-box-title-small {
						color: rgba(95, 101, 108, 1);

						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: left;
					}
				}
			}

			/* 人物动态 */
			.character-box {
				.character-item {
					display: flex;
					padding: 17px;

					.character-image {
						/* united_states 1 */
						width: 36px;
						height: 36px;
						border-radius: 50%;
					}

					.talk-box {
						height: 98px;
						width: 100%;
						padding: 17px;
						color: rgba(59, 65, 75, 1);

						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;

						background-image: url("../../assets/images/bg/characterDynamics-bg.png");
						background-repeat: no-repeat;
						/* 不重复 */
						background-size: 100% 100%;
						/* 自动拉伸并覆盖整个元素，保持比例 */
						background-position: center center;

						.talk-title {
							width: 40%;
							color: rgba(59, 65, 75, 1);

							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
					}
				}
			}
		}
	}
}
</style>
