<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"
							:class="{ btnActive: box1ActiveBtn === item }"
							v-for="(item, index) in box1BtnList"
							:key="index"
							@click="handleClickBox1Btn(item)"
						>
							{{ item }}
						</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.content }}</div>
						<div class="open">
							<img src="./assets/images/open-icon.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-footer">
					<div class="box1-footer-left">{{ `共计${backgroundListNum}条指令` }}</div>
					<div class="box1-footer-right">
						<el-pagination :page-size="5" background layout="prev, pager, next" :total="backgroundListNum" />
					</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-dialog hover-dialog" v-if="isShowBox2Dialog">{{ box2ContentAll }}</div>
					<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"
								@mouseenter="handleChangeShowBox2Dialog(true, item.content)"
								@mouseleave="handleChangeShowBox2Dialog(false)"
							>
								{{ 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.title }}</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 { useRoute } from "vue-router";
import { getDecreeBackground, getDecreeRelatedEvent, getDecreeDepend } from "@/api/decree/background";

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";
import { reduce } from "lodash";

const route = useRoute();

const decreeId = ref(route.query.id);

// 提出背景
const box1BtnList = ref(["涉华背景", "全部背景"]);
const box1ActiveBtn = ref("涉华背景");
const handleClickBox1Btn = btn => {
	box1ActiveBtn.value = btn;
	handleGetBackground();
};
const backgroundListNum = ref(0);
const backgroundList = ref([
	// {
	// 	content: "认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术"
	// },
	// {
	// 	content: "要求美国不仅必须在开发通用和前沿AI能力方面领先，还必须确保美国的人工智能技术、标准和治理模式在全球范围内被采用"
	// },
]);
const handleGetBackground = async () => {
	const params = {
		cRelated: box1ActiveBtn.value === "涉华背景" ? true : false,
		currentPage: 0,
		pageSize: 999999,
		id: decreeId.value
	};
	try {
		const res = await getDecreeBackground(params);
		console.log("提出背景", res);
		if (res.code === 200 && res.data) {
			backgroundListNum.value = res.data.numberOfElements;
			backgroundList.value = res.data.content;
		} else {
			backgroundListNum.value = 0;
			backgroundList.value = [];
		}
	} catch (error) {}
};

// 相关事件
const relatedEvents = ref([
	// {
	// 	image: Img1,
	// 	title: "中美AI模型性能差距迅速缩小",
	// 	content:
	// 		"斯坦福大学《2025年人工智能指数报告》显示，中美顶尖AI模型在MMLU（大规模多任务语言理解）等主流基准测试中的性能...",
	// 	time: "2025-08-30"
	// }
]);
const handleGetRelateEvents = async () => {
	const params = {
		id: decreeId.value
	};
	try {
		const res = await getDecreeRelatedEvent(params);
		console.log("相关事件", res);
		if (res.code === 200 && res.data) {
			relatedEvents.value = res.data.map(item => {
				return {
					image: item.imageUrl,
					title: item.sjbt,
					content: item.sjnr,
					time: item.sjsj
				};
			});
		} else {
			relatedEvents.value = [];
		}
	} catch (error) {}
};

// 法律依据
const laws = ref([
	{
		title: "《美国法典》",
		info: "第3编第301条",
		content:
			"允许总统通过行政命令（Executive Order）​​ 或其它书面形式授权行政部门或机构的负责人​（如国务卿、财政部长等）代行本属于总统的法定职能（由国会立法授予总统的职能）。"
	},
	{
		title: "《出口管制改革法案》",
		info: "",
		content:
			"该法案授权政府出于国家安全和外交政策目的对特定技术、商品和软件的出口进行管制。确保AI技术不流向“对手国家”是其题中应有之义。"
	}
]);
const handleGetLaws = async () => {
	const params = {
		id: decreeId.value
	};
	try {
		const res = await getDecreeDepend(params);
		console.log("法律依据", res);
		if (res.code === 200 && res.data) {
			laws.value = res.data;
		} else {
			laws.value = [];
		}
	} catch (error) {}
};
const isShowBox2Dialog = ref(false);
const box2ContentAll = ref("");
const handleChangeShowBox2Dialog = (isShow, content) => {
	isShowBox2Dialog.value = isShow;
	box2ContentAll.value = content;
};

onMounted(() => {
	handleGetBackground();
	handleGetRelateEvents();
	handleGetLaws();
});
</script>

<style lang="scss" scoped>
.introduction-wrap {
	display: flex;
	position: relative;
	position: relative;
	.box2-dialog {
		position: absolute;
		bottom: 350px;
		left: 100px;
		z-index: 9999;
	}
	.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: 84px;
			display: flex;
			justify-content: flex-end;
			gap: 8px;
			.btn {
				height: 28px;
				padding: 0 8px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 28px;
				cursor: pointer;
			}
			.btnActive {
				border: 1px solid var(--color-main-active);
				color: var(--color-main-active);
				background: rgba(231, 243, 255, 1);
			}
		}
		.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;
				width: 1120px;
				height: 280px;
				overflow: hidden;
				overflow-y: auto;
				.box1-item {
					width: 1101px;
					min-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;
					align-items: center;
					padding: 12px 0;
					.id {
						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: 24px;
						margin-left: 13px;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// white-space: nowrap;
					}
					.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: 330px;
				width: 1090px;
				overflow: hidden;
				overflow-y: auto;
				.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 {
							width: 892px;
							height: 30px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							cursor: pointer;
						}
					}
					.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: hidden;
				overflow-y: auto;
				padding-left: 20px;
				.box3-item {
					margin-bottom: 20px;
					position: relative;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					.id {
						width: 24px;
						height: 24px;
						position: absolute;
						left: 18px;
						top: 1px;
						z-index: 99;
						text-align: center;
						line-height: 24px;
						margin-top: 5px;
						border-radius: 12px;
						background: #e7f3ff;
						color: #0a57a6;
					}
					.item-header {
						width: 440px;
						height: 35px;
						display: flex;
						justify-content: space-between;
						margin-left: 60px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						.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>