<template>
	<div class="introduction-wrap">
		<div class="left">
			<div class="box1">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">提出背景</div>
					<div class="header-btn-box">
						<div class="btn" @click="handleClickBox1Btn(1)">
							<el-button type="primary" plain v-if="box1BtnActive === 1">涉华背景</el-button>
							<el-button type="info" plain v-else>涉华背景</el-button>
						</div>
						<div class="btn" @click="handleClickBox1Btn(2)">
							<el-button type="primary" plain v-if="box1BtnActive === 2">全部背景</el-button>
							<el-button type="info" plain v-else>全部背景</el-button>
						</div>
					</div>
					<div class="header-right">
						<div class="icon">
							<img src="../assets/icons/header-right-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="../assets/icons/header-right-icon2.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-main">
					<div class="box1-item" v-for="(item, index) in backgroundList" :key="index">
						<div class="id">{{ index + 1 }}</div>
						<div class="title">{{ item.title }}</div>
						<div class="open">
							<img src="./assets/images/open-icon.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-footer">
					<div class="box1-footer-left">{{ "共计10条指令" }}</div>
					<div class="box1-footer-right">
						<el-pagination :page-size="5" background layout="prev, pager, next" :total="10" />
					</div>
				</div>
			</div>
			<div class="box2">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">相关事件</div>
					<div class="header-right">
						<div class="icon">
							<img src="../assets/icons/header-right-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="../assets/icons/header-right-icon2.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box2-main">
					<div class="box2-item" v-for="(item, index) in relatedEvents" :key="index">
						<div class="item-left">
							<img :src="item.image" alt="" />
						</div>
						<div class="item-center">
							<div class="title">{{ item.title }}</div>
							<div class="content">{{ item.content }}</div>
						</div>
						<div class="item-right">{{ item.time }}</div>
					</div>
				</div>
				<div class="box2-footer">
					<img src="./assets/images/more-icon.png" alt="" />
				</div>
			</div>
		</div>
		<div class="right">
			<div class="box3">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">法律依据</div>

					<div class="header-right">
						<div class="icon">
							<img src="../assets/icons/header-right-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="../assets/icons/header-right-icon2.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box3-main">
					<div class="box3-item" v-for="(item, index) in laws" :key="index">
						<div class="id">{{ index + 1 }}</div>
						<div class="item-header">
							<div class="name">{{ item.name }}</div>
							<div class="info">{{ item.info }}</div>
						</div>
						<div class="item-content">{{ item.content }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

import Img1 from "./assets/images/box2-img1.png";
import Img2 from "./assets/images/box2-img2.png";
import Img3 from "./assets/images/box2-img3.png";
import Img4 from "./assets/images/box2-img4.png";
import Img5 from "./assets/images/box2-img5.png";

const box1BtnActive = ref(1);

const backgroundList = ref([
	{
		title: "认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术"
	},
	{
		title: "要求美国不仅必须在开发通用和前沿AI能力方面领先，还必须确保美国的人工智能技术、标准和治理模式在全球范围内被采用"
	},
	{
		title: "要求加强与盟友的关系并确保我们持续的技术主导地位"
	},
	{
		title: "计划通过支持美国原产人工智能技术的全球部署，以维护和扩大美国在人工智能领域的领导地位"
	},
	{
		title: "目的为减少国际社会对由中国开发的人工智能技术的依赖"
	}
]);

const relatedEvents = ref([
	{
		image: Img1,
		title: "中美AI模型性能差距迅速缩小",
		content:
			"斯坦福大学《2025年人工智能指数报告》显示，中美顶尖AI模型在MMLU（大规模多任务语言理解）等主流基准测试中的性能...",
		time: "2025-08-30"
	},
	{
		image: Img2,
		title: "中国模型以更低成本实现高性能",
		content: "2025年1月，中国公司深度求索（DeepSeek）发布高性能AI推理模型R1，以其极低的训练成本和媲美顶级模型的推理能力受...",
		time: "2025-05-16"
	},
	{
		image: Img3,
		title: "美国发布《赢得AI竞赛：美国AI行动计划》​",
		content:
			"特朗普政府发布该计划，核心包括加速创新​（解除监管）、建设AI基础设施​（加速数据中心审批、保障能源供应）和引领国际...",
		time: "2025-07-23"
	},
	{
		image: Img4,
		title: "中国深入推进“人工智能+”行动",
		content: "中国国务院常务会议审议通过《关于深入实施“人工智能+”行动的意见》，大力推进AI在各领域的规模化商业化应用和和深...",
		time: "2025-07-31"
	},
	{
		image: Img5,
		title: "美国对华AI芯片出口管制持续升级",
		content:
			"美国商务部宣布撤销拜登时期的《AI扩散规则》，要求全球使用美国技术的芯片厂商停止向中国出口AI芯片，直接影响英伟达...",
		time: "2025-05-20"
	}
]);

const laws = ref([
	{
		name: "《美国法典》",
		info: "第3编第301条",
		content:
			"允许总统通过行政命令（Executive Order）​​ 或其它书面形式授权行政部门或机构的负责人​（如国务卿、财政部长等）代行本属于总统的法定职能（由国会立法授予总统的职能）。"
	},
	{
		name: "《出口管制改革法案》",
		info: "",
		content:
			"该法案授权政府出于国家安全和外交政策目的对特定技术、商品和软件的出口进行管制。确保AI技术不流向“对手国家”是其题中应有之义。"
	},
	{
		name: "《国际紧急经济权力法》",
		info: "",
		content:
			"授予总统在应对“不寻常且极其严重的威胁”时，监管商业和金融交易的广泛权力，包括实施出口管制。这在以往的贸易和科技管制中常被引用。"
	},
	{
		name: "《2019年通过外交捍卫美国商业法》",
		info: "第708(c)(3)条",
		content: "授权小企业管理局局长和OSTP主任任命其各自行政部门和机构的高级官员担任EDAG成员。"
	},
	{
		name: "《关于安全、可靠和可信地开发和使用人工智能的行政命令》",
		info: "",
		content: "要求强大AI系统的开发者与政府共享安全测试结果，并为AI安全、隐私保护、公平权利及创新竞争等方面制定标准。"
	}
]);
</script>

<style lang="scss" scoped>
.introduction-wrap {
	display: flex;
	.box-header {
		height: 56px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 20px;
			width: 8px;
			height: 16px;
			border-radius: 0 4px 4px 0;
			background: rgba(10, 87, 166, 1);
		}
		.title {
			margin-left: 22px;
			margin-top: 20px;
			height: 16px;
			line-height: 16px;
			color: rgba(10, 87, 166, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 600;
			line-height: 16px;
		}
		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 84px;
			display: flex;
			.btn {
				margin-left: 8px;
			}
		}
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			height: 28px;
			display: flex;
			gap: 4px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.left {
		width: 1150px;
		.box1 {
			margin-top: 16px;
			width: 1150px;
			height: 414px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box1-main {
				margin-left: 22px;
				height: 280px;
				.box1-item {
					width: 1101px;
					height: 48px;
					margin-bottom: 8px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 2px;
					background: rgba(255, 255, 255, 1);
					display: flex;
					.id {
						margin-top: 12px;
						margin-left: 15px;
						width: 24px;
						height: 24px;
						text-align: center;
						line-height: 24px;
						border-radius: 12px;
						background: #e7f3ff;
						color: #0a57a6;
					}
					.title {
						width: 1000px;
						line-height: 48px;
						margin-left: 13px;
					}
					.open {
						width: 16px;
						height: 16px;
						margin-top: 16px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.box1-footer {
				margin: 20px 22px;
				display: flex;
				justify-content: space-between;
				.box1-footer-left {
					height: 20px;
					color: rgba(132, 136, 142, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
			}
		}
		.box2 {
			margin-top: 16px;
			width: 1150px;
			height: 415px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box2-main {
				margin-top: 3px;
				margin-left: 31px;
				height: 310px;
				width: 1090px;
				.box2-item {
					display: flex;
					height: 60px;
					margin-bottom: 2px;
					.item-left {
						width: 64px;
						height: 48px;
						border-radius: 2px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.item-center {
						width: 892px;
						margin-left: 14px;
						.title {
							height: 30px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 30px;
							margin-top: -5px;
						}
						.content {
							height: 30px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
						}
					}
					.item-right {
						margin-top: 19px;
						margin-left: 30px;
						height: 22px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
					}
				}
			}
			.box2-footer {
				margin: 5px auto 0;
				width: 108px;
				height: 32px;
				cursor: pointer;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.right {
		margin-left: 16px;
		.box3 {
			margin-top: 16px;
			width: 576px;
			height: 845px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box3-main {
				margin-top: 9px;
				width: 520px;
				height: 720px;
				overflow-y: auto;
				.box3-item {
					margin-bottom: 24px;
					position: relative;
					.id {
						width: 24px;
						height: 24px;
						position: absolute;
						left: 28px;
						top: 1px;
						z-index: 99;
						text-align: center;
						line-height: 24px;
						margin-top: 5px;
						border-radius: 12px;
						background: #e7f3ff;
						color: #0a57a6;
					}
					.item-header {
						width: 460px;
						height: 35px;
						display: flex;
						justify-content: space-between;
						margin-left: 60px;
						.name {
							max-width: 460px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							height: 24px;
							margin-top: 5px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 700;
							line-height: 24px;
						}
						.info {
							text-align: right;
							margin-left: 10px;
							height: 24px;
							margin-top: 5px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
						}
					}
					.item-content {
						margin-left: 66px;
						border-top: 1px solid rgba(234, 236, 238, 1);
						padding-top: 3px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
					}
				}
			}
		}
	}
}
</style>