<template>
	<div class="wrap">
		<div class="box1">
			<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="box1-main">
				<div class="left">
					<div
						class="left-item"
						:class="{ leftItemActive: siderActiveIndex === index }"
						v-for="(item, index) in siderList"
						:key="index"
						@click="handleClickSider(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="decreeInfo.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">
										{{ decreeInfo.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">
									{{ decreeInfo.eTotalTitle }}
								</div>
							</div>
							<div class="info-item">
								<div class="item-left">{{ "签署时间：" }}</div>
								<div class="item-right">
									{{ decreeInfo.signTime }}
								</div>
							</div>
							<div class="info-item">
								<div class="item-left">{{ "签署总统：" }}</div>
								<div class="item-right">
									{{ decreeInfo.signPerson }}
								</div>
							</div>
						</div>
					</div>
					<div class="list-box">
						<div class="list-header">
							<div class="icon">
								<img src="./assets/icons/box1-list-header-icon.png" alt="" />
							</div>
							<div class="title">{{ "政令主要内容" }}</div>
						</div>
						<div class="list-main">
							<div class="list-item" v-for="(val, idx) in decreeInfo.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">
							{{ `共${decreeInfo.list.length}项动态` }}
						</div>
						<div class="footer-right">
							<el-pagination
								@current-change="handleCurrentChange"
								:pageSize="pageSize"
								:current-page="currentPage"
								background
								layout="prev, pager, next"
								:total="decreeInfo.list.length"
							/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

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

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

const siderList = ref([
	{
		time: "2023",
		title: "拜登人工智能政令"
	},
	{
		time: "2023",
		title: "拜登人工智能政令"
	},
	{
		time: "2025",
		title: "特朗普撤销拜登AI规则"
	},
	{
		time: "2023",
		title: "美国AI行动计划"
	},
	{
		time: "2024",
		title: "对中国AI芯片限制"
	}
]);
const siderActiveIndex = ref(0);
const handleClickSider = index => {
	siderActiveIndex.value = index
}

const decreeInfo = ref({
	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专业人才并为相关领域员工提供培训。"
		}
	]
});


</script>

<style lang="scss" scoped>
.wrap {
	height: 100%;
	overflow: hidden;
	.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: 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);
		.box1-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>