<template>
	<div class="wrap">
		<!-- <div class="box1">
      <div class="box-header">
        <div class="header-left"></div>
        <div class="title">政令时序及战略里程碑</div>
        <div class="header-right">
          <img src="./assets/icons/header-icon.png" alt="" />
        </div>
      </div>
      <div class="box1-main">
        <div class="box1-line-box"></div>
        <div
          class="box1-item"
          :class="{ box1ItemFooter: index % 2 }"
          v-for="(item, index) in timeLineList"
          :key="index"
        >
          <div class="point" :class="{ pointFooter: index % 2 }">
            <img src="./assets/icons/box1-point.png" alt="" />
          </div>
          <div class="time" :class="{ timeFooter: index % 2 }">
            {{ item.time }}
          </div>
          <div class="box1-item-header">
            <div class="title">{{ item.title }}</div>
            <div class="icon">
              <img src="./assets/icons/box1-icon1.png" alt="" />
            </div>
          </div>
          <div class="box1-item-content">
            {{ item.content }}
          </div>
        </div>
      </div>
      <div class="box1-footer">
        <div class="box1-footer-left">
          <img src="./assets/icons/box1-icon2.png" alt="" />
        </div>
        <div class="box1-footer-center">
          {{
            "近两年美国AI领域核心政令与事件聚焦于安全治理与竞争领导权。拜登政府2023年10月签署首份AI行政令，强制要求强大AI系统进行安全测试并共享结果。2025年特朗普政府转向，签署《赢得竞赛：美国AI行动计划》，核心转为放松监管、加速创新与基础设施建设，并推动美国AI技术栈全球出口。其间，美国持续升级对华AI芯片出口管制，并积极介入全球AI安全治理议程"
          }}
        </div>
        <div class="box1-footer-right">
          <img src="./assets/icons/box1-icon3.png" alt="" />
        </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="left">
					<div
						class="left-item"
						:class="{ leftItemActive: box2LeftActiveIndex === index }"
						v-for="(item, index) in decreeList"
						:key="index"
					>
						<div class="time">{{ item.time }}</div>
						<div class="title">{{ item.title }}</div>
					</div>
				</div>

				<div class="right">
					<div class="info-box">
						<div class="info-left">
							<img :src="decreeList[box2LeftActiveIndex].img" alt="" />
						</div>
						<div class="info-right">
							<div class="info-item">
								<div class="item-left">{{ "政令全称：" }}</div>
								<div class="item-right1">
									<div class="item-right-text">
										{{ decreeList[box2LeftActiveIndex].totalTitle }}
									</div>
									<div class="item-right-icon">
										<img src="./assets/icons/open-icon.png" alt="" />
									</div>
								</div>
							</div>
							<div class="info-item">
								<div class="item-left">{{ "英文全称：" }}</div>
								<div class="item-right">
									{{ decreeList[box2LeftActiveIndex].eTotalTitle }}
								</div>
							</div>
							<div class="info-item">
								<div class="item-left">{{ "签署时间：" }}</div>
								<div class="item-right">
									{{ decreeList[box2LeftActiveIndex].signTime }}
								</div>
							</div>
							<div class="info-item">
								<div class="item-left">{{ "签署总统：" }}</div>
								<div class="item-right">
									{{ decreeList[box2LeftActiveIndex].signPerson }}
								</div>
							</div>
						</div>
					</div>
					<div class="list-box">
						<div class="list-header">
							<div class="icon">
								<img src="./assets/icons/box2-list-header-icon.png" alt="" />
							</div>
							<div class="title">{{ "政令主要内容" }}</div>
						</div>
						<div class="list-main">
							<div class="list-item" v-for="(val, idx) in decreeList[box2LeftActiveIndex].list" :key="idx">
								<div class="id">{{ idx + 1 }}</div>
								<div class="title">{{ val.title }}</div>
								<div class="open">
									<img src="./assets/icons/open-icon.png" alt="" />
								</div>
							</div>
						</div>
					</div>
					<div class="list-footer">
						<div class="footer-left">
							{{ `共${decreeList[box2LeftActiveIndex].list.length}项动态` }}
						</div>
						<div class="footer-right">
							<el-pagination
								@current-change="handleCurrentChange"
								:pageSize="pageSize"
								:current-page="currentPage"
								background
								layout="prev, pager, next"
								:total="decreeList[box2LeftActiveIndex].list.length"
							/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

import box2InfoImg from "./assets/icons/box2-info.png";

const pageSize = ref(10);
const currentPage = ref(1);

const box1BtnActive = ref(1);

const timeLineList = ref([
	{
		time: "2025年1月",
		title: "《AI扩散暂行最终规则》发布",
		content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
	},
	{
		time: "2025年5月",
		title: "特朗普宣布撤销拜登AI规则",
		content: "特朗普政府宣布撤销拜登AI规则，计划推出新规。"
	},
	{
		time: "2025年7月23日",
		title: "特朗普签署EO 14320",
		content: "特朗普签署EO 14320，推动美国AI技术栈出口。"
	},
	{
		time: "2025年7月31日",
		title: "中国网信办约谈英伟达",
		content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。"
	},
	{
		time: "2025年8月",
		title: "英伟达H20发放出口许可证",
		content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。"
	}
]);

const decreeList = ref([
	{
		time: "2023",
		title: "拜登人工智能政令",
		img: box2InfoImg,
		totalTitle: "关于安全、可靠和可信地开发和使用人工智能的行政命令",
		eTotalTitle: "Executive Order on the Safe, Secure, and Trustworthy Development and Use of Artificial Intelligence",
		signTime: "2025年7月23日",
		signPerson: "乔·拜登（Joe Biden）",
		list: [
			{
				title: "要求强大AI系统开发者与政府分享安全测试结果（“红队测试”）；制定生物合成筛查标准防范风险；建立AI生成内容鉴别标准"
			},
			{
				title: "优先支持隐私保护技术（PET）研发；评估各机构如何收集和使用商业信息；制定评估隐私保护技术有效性的指南。"
			},
			{
				title: "为解决算法歧视提供明确指导；确保刑事司法系统中AI使用的公平性；协调调查和起诉AI相关的民权侵犯行为。"
			},
			{
				title: "推动医疗保健领域负责任地使用AI；创造资源支持教育工作者部署AI教育工具。"
			},
			{
				title: "制定减轻AI对工人潜在危害的原则和最佳实践；编写AI对劳动力市场潜在影响的报告。"
			},
			{
				title: "通过“国家AI研究资源”（NAIRR）试点促进研究；为小型开发者和企业家提供技术援助和资源；简化相关领域高技能人才的签证流程。"
			},
			{
				title: "扩大在AI领域的国际合作；与国际伙伴和标准组织加速制定AI标准。"
			},
			{
				title: "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。"
			},
			{
				title: "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。"
			},
			{
				title: "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。"
			}
		]
	},
	{
		time: "2023",
		title: "拜登人工智能政令",
		img: "",
		totalTitle: "",
		eTotalTitle: "",
		signTime: "",
		signPerson: "",
		list: []
	},
	{
		time: "2025",
		title: "特朗普撤销拜登AI规则",
		img: "",
		totalTitle: "",
		eTotalTitle: "",
		signTime: "",
		signPerson: "",
		list: []
	},
	{
		time: "2023",
		title: "美国AI行动计划",
		img: "",
		totalTitle: "",
		eTotalTitle: "",
		signTime: "",
		signPerson: "",
		list: []
	},
	{
		time: "2024",
		title: "对中国AI芯片限制",
		img: "",
		totalTitle: "",
		eTotalTitle: "",
		signTime: "",
		signPerson: "",
		list: []
	}
]);

const box2LeftActiveIndex = ref(0);
</script>

<style lang="scss" scoped>
.wrap {
	.box-header {
		height: 56px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 18px;
			width: 8px;
			height: 20px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}
		.title {
			margin-left: 14px;
			margin-top: 14px;
			height: 26px;
			line-height: 26px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
		}
		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 52px;
			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%;
				}
			}
		}
	}
	.box1 {
		margin: 27px auto 16px;
		width: 1600px;
		height: 492px;
		border-radius: 4px;
		box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
		background: rgba(255, 255, 255, 1);
		.box1-main {
			margin-top: 17px;
			margin-left: 22px;
			width: 1556px;
			height: 330px;
			overflow-x: auto;
			overflow-y: hidden;
			display: flex;
			position: relative;
			.box1-line-box {
				position: absolute;
				left: 0;
				top: 135px;
				height: 8px;
				width: 1556px;
				background: url("./assets/icons/line-bg.png") repeat;
			}
			.box1-item {
				width: 315px;
				height: 142px;
				position: relative;
				box-sizing: border-box;
				padding-left: 20px;
				margin-left: 10px;
				border-left: 1px solid #0a57a6;
				.box1-item-header {
					display: flex;
					width: 315px;
					.title {
						// width: 262px;
						height: 26px;
					}
					.icon {
						margin-left: 10px;
						margin-top: 5px;
						width: 16px;
						height: 16px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
				.box1-item-content {
					width: 288px;
					min-height: 48px;
					max-height: 96px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
				}
				.point {
					position: absolute;
					left: -11px;
					bottom: -11px;
				}
				.pointFooter {
					position: absolute;
					left: -11px;
					top: -11px;
				}
				.time {
					height: 24px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
					position: absolute;
					bottom: -36px;
					left: 0;
				}
				.timeFooter {
					height: 24px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
					position: absolute;
					top: -36px;
					left: 0;
				}
			}
			.box1ItemFooter {
				margin-top: 138px;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
			}
		}
		.box1-footer {
			margin-left: 22px;
			margin-top: 10px;
			width: 1556px;
			height: 64px;
			box-sizing: border-box;
			padding: 6px 12px;
			display: flex;
			border: 1px solid rgba(231, 243, 255, 1);
			border-radius: 4px;
			background: rgba(246, 251, 255, 1);
			display: flex;
			.box1-footer-left {
				width: 19px;
				height: 20px;
				margin-top: 16px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.box1-footer-center {
				width: 1463px;
				height: 48px;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 2px;
				margin-left: 15px;
				color: var(--color-main-active);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
			}
			.box1-footer-right {
				width: 24px;
				height: 24px;
				border-radius: 12px;
				background: #e7f3ff;
				margin-top: 14px;
				margin-left: 13px;
				img {
					margin-left: 6px;
					margin-top: 6px;
					width: 12px;
					height: 12px;
				}
			}
		}
	}
	.box2 {
		margin: 16px auto;
		width: 1600px;
		height: 898px;
		border-radius: 4px;
		box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
		background: rgba(255, 255, 255, 1);
		.box2-main {
			display: flex;
			margin-top: 5px;
			.left {
				margin-left: 21px;
				width: 300px;
				.left-item {
					width: 300px;
					height: 64px;
					border-radius: 4px;
					display: flex;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 18px;
					font-weight: 400;
					cursor: pointer;
					&:hover {
						background: rgba(246, 250, 255, 1);
					}
					.time {
						width: 45px;
						height: 24px;
						line-height: 24px;
						margin-left: 18px;
						margin-top: 20px;
					}
					.title {
						margin-left: 17px;
						margin-top: 17px;
						height: 30px;
						// color:  var(--color-main-active);
						// font-family: Microsoft YaHei;
						// font-size: 16px;
						// font-weight: 700;
						line-height: 30px;
					}
				}
				.leftItemActive {
					color: var(--color-main-active);
					font-weight: 700;
					background: rgba(246, 250, 255, 1);
					&::after {
						position: relative;
						content: "";
						width: 5px;
						height: 48px;
						background: var(--color-main-active);
						right: -70px;
						top: 8px;
					}
				}
			}
			.right {
				margin-left: 36px;
				.info-box {
					margin-left: 28px;
					width: 1180px;
					height: 188px;
					box-sizing: border-box;
					border: 1px solid rgba(231, 243, 255, 1);
					background: rgba(246, 250, 255, 1);
					display: flex;
					.info-left {
						width: 97px;
						height: 136px;
						margin-top: 25px;
						margin-left: 28px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.info-right {
						margin-left: 35px;
						margin-top: 22px;
						.info-item {
							display: flex;
							height: 30px;
							margin-bottom: 8px;
							.item-left {
								margin-top: 3px;
								width: 100px;
								height: 24px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
							}
							.item-right {
								width: 899px;
								height: 30px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
							}
							.item-right1 {
								display: flex;
								.item-right-text {
									height: 30px;
									color: var(--color-main-active);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 30px;
								}
								.item-right-icon {
									margin-left: 13px;
									margin-top: 7px;
									width: 16px;
									height: 16px;
									img {
										width: 100%;
										height: 100%;
									}
								}
							}
						}
					}
				}
				.list-box {
					margin-left: 36px;
					.list-header {
						display: flex;
						height: 56px;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						.icon {
							margin-top: 21px;
							margin-left: 17px;
							width: 19px;
							height: 19px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.title {
							margin-top: 16px;
							margin-left: 16px;
							height: 30px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 30px;
						}
					}
					.list-main {
						height: 540px;
						overflow-x: hidden;
						overflow-y: auto;
						.list-item {
							width: 1180px;
							height: 54px;
							box-sizing: border-box;
							border-radius: 4px;
							background: rgba(255, 255, 255, 1);
							border-bottom: 1px solid rgba(234, 236, 238, 1);
							display: flex;
							.id {
								width: 24px;
								height: 24px;
								margin-left: 15px;
								margin-top: 15px;
								border-radius: 12px;
								background: #e7f3ff;
								text-align: center;
								line-height: 24px;
								color: #0a57a6;
							}
							.title {
								margin-left: 13px;
								margin-top: 12px;
								height: 30px;
								width: 1100px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
							}
							.open {
								width: 16px;
								height: 16px;
								margin-top: 20px;
								img {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
				.list-footer {
          margin-left: 35px;
					height: 32px;
					margin-top: 10px;
					display: flex;
					justify-content: space-between;
					.footer-left {
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 32px;
					}
				}
			}
		}
	}
}
</style>