<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"
										v-if="decreeInfo.totalTitle"
										@click="handleToDecreeDetail(decreeInfo)"
									>
										<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.signOrg }}
								</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 showList" :key="idx">
								<div class="id">{{ idx + 1 }}</div>
								<div class="title">{{ val.content }}</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, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import { getDecreeMainContent } from "@/api/decree/introduction";
import { getDecreeRelateOrder } from "@/api/decree/deepdig";

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

const allData = ref([]);
const relateId = ref(0);

const route = useRoute();

const pageSize = ref(10);
const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
};
const showList = computed(() => {
	const startIndex = (currentPage.value - 1) * pageSize.value;
	const endIndex = startIndex + pageSize.value;
	return decreeInfo.value.list.slice(startIndex, endIndex);
});

const siderList = ref([
	// {
	// 	time: "",
	// 	title: ""
	// },
	// {
	// 	time: "2023",
	// 	title: "拜登人工智能政令"
	// },
	// {
	// 	time: "2025",
	// 	title: "特朗普撤销拜登AI规则"
	// },
	// {
	// 	time: "2023",
	// 	title: "美国AI行动计划"
	// },
	// {
	// 	time: "2024",
	// 	title: "对中国AI芯片限制"
	// }
]);
const siderActiveIndex = ref(0);
const handleClickSider = async index => {
	siderActiveIndex.value = index;
	decreeInfo.value.img = allData.value[index].imageUrl;
	decreeInfo.value.totalTitle = allData.value[index].name;
	decreeInfo.value.eTotalTitle = allData.value[index].ename;
	decreeInfo.value.signTime = allData.value[index].postDate;
	decreeInfo.value.signOrg = allData.value[index].proposeOrgName;

	relateId.value = allData.value[index].id;

	const params1 = {
		currentPage: 0,
		pageSize: 999999,
		id: relateId.value
	};
	try {
		const res = await getDecreeMainContent(params1);
		console.log("政令主要内容", res);
		if (res.code === 200 && res.data) {
			decreeInfo.value.list = res.data.content;
		} else {
			decreeInfo.value.list = [];
		}
	} catch (error) {}
};

const decreeInfo = ref({
	id: 0,
	img: "",
	totalTitle: "",
	eTotalTitle: "",
	signTime: "",
	signOrg: "",
	list: [
		// {
		// 	content:
		// 		"要求强大AI系统开发者与政府分享安全测试结果（“红队测试”）；制定生物合成筛查标准防范风险；建立AI生成内容鉴别标准"
		// },
		// {
		// 	content: "优先支持隐私保护技术（PET）研发；评估各机构如何收集和使用商业信息；制定评估隐私保护技术有效性的指南。"
		// },
		// {
		// 	content: "为解决算法歧视提供明确指导；确保刑事司法系统中AI使用的公平性；协调调查和起诉AI相关的民权侵犯行为。"
		// }
	]
});

const handleGetRelateOrder = async () => {
	const params = {
		id: route.query.id
	};
	try {
		const res = await getDecreeRelateOrder(params);
		console.log("相关政令关联分析", res);
		if (res.code === 200 && res.data) {
			allData.value = res.data;
			siderList.value = res.data.map(item => {
				return {
					time: item.year,
					title: item.name
				};
			});
			decreeInfo.value.id = allData.value[0].id;
			decreeInfo.value.img = allData.value[0].imageUrl;
			decreeInfo.value.totalTitle = allData.value[0].name;
			decreeInfo.value.eTotalTitle = allData.value[0].ename;
			decreeInfo.value.signTime = allData.value[0].postDate;
			decreeInfo.value.signOrg = allData.value[0].proposeOrgName;
			relateId.value = allData.value[0].id;
			const params1 = {
				currentPage: 0,
				pageSize: 999999,
				id: relateId.value
			};
			try {
				const res = await getDecreeMainContent(params1);
				console.log("政令主要内容", res);
				if (res.code === 200 && res.data) {
					decreeInfo.value.list = res.data.content;
				} else {
					decreeInfo.value.list = [];
				}
			} catch (error) {}
		} else {
			allData.value = [];
			siderList.value = [];
			decreeInfo.value.id = 0;
			decreeInfo.value.img = "";
			decreeInfo.value.totalTitle = "";
			decreeInfo.value.eTotalTitle = "";
			decreeInfo.value.signTime = "";
			decreeInfo.value.signOrg = "";
			decreeInfo.value.list = [];
		}
	} catch (error) {
		allData.value = [];
		siderList.value = [];
		decreeInfo.value.id = 0;
		decreeInfo.value.img = "";
		decreeInfo.value.totalTitle = "";
		decreeInfo.value.eTotalTitle = "";
		decreeInfo.value.signTime = "";
		decreeInfo.value.signOrg = "";
		decreeInfo.value.list = [];
	}
};

const handleToDecreeDetail = item => {
	const route = router.resolve({
		path: "/decreeLayout/overview/introduction",
		query: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};

onMounted(() => {
	handleGetRelateOrder();
});
</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;
		max-height: 898px;
		min-height: 788px;
		border-radius: 10px;
		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 {
						width: 200px;
						margin-left: 17px;
						margin-top: 17px;
						height: 30px;
						line-height: 30px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						letter-spacing: 0px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.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: -15px;
						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: 242px;
						height: 136px;
						margin-top: 25px;
						margin-left: 28px;
						img {
							width: 100%;
							// height: 100%;
						}
					}
					.info-right {
						margin-left: 20px;
						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: 769px;
								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;
									cursor: pointer;
									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 {
						min-height: 420px;
						max-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;
							cursor: pointer;
							&:hover {
								background: var(--color-bg-hover);
							}
							.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>