<template>
	<div class="introduction-wrap">
		<div class="hover-dialog"
			:style="{ position: 'absolute', zIndex: 9999, top: `${mouseY - 220}px`, left: `${mouseX - 600}px` }"
			v-if="isShowBox2Dialog">
			{{ box2ContentAll }}
		</div>
		<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">
					<el-empty v-if="backgroundList.length === 0" style="padding-top: 60px;" description="暂无数据" :image-size="100" />
					<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>
				</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> -->
				<AnalysisBox title="提出背景" :showAllBtn="false">
					<template #header-btn>
						<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>
					</template>
					<div class="box1-main">
						<el-empty v-if="backgroundList.length === 0" style="padding-top: 60px;" description="暂无数据" :image-size="100" />
						<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="10" @current-change="handleCurrentChange" :current-page="currentPage" background layout="prev, pager, next" :total="backgroundListNum" />
						</div>
					</div>
				</AnalysisBox>
			</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">
					<el-empty v-if="!relatedEvents.length" description="暂无数据" :image-size="100" />
					<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>
							<el-popover effect="dark" :width="1000" :content="item.content" placement="top-start">
								<template #reference>
									<div class="content">
										{{ item.content }}
									</div>
								</template>
							</el-popover>
						</div>
						<div class="item-right">{{ item.time }}</div>
					</div>
				</div> -->
				<!-- <AnalysisBox title="相关事件" :showAllBtn="false">
					<div class="box2-main">
						<el-empty v-if="!relatedEvents.length" description="暂无数据" :image-size="100" />
						<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>
								<el-popover effect="dark" :width="1000" :content="item.content" placement="top-start">
									<template #reference>
										<div class="content">
											{{ item.content }}
										</div>
									</template>
								</el-popover>
							</div>
							<div class="item-right">{{ item.time }}</div>
						</div>
					</div>
				</AnalysisBox> -->
				<AnalysisBox title="法律依据" :showAllBtn="false">
					<div class="box2-main">
						<el-empty v-if="false" description="暂无数据" :image-size="100" />
						<div class="custom-collapse">
							<el-collapse v-model="activeNames">
								<el-collapse-item v-for="index in 5" title="Consistency" :name="index">
									<template #icon>
										<el-icon><ArrowDownBold /></el-icon>
										<!-- <el-icon><ArrowRightBold /></el-icon> -->
									</template>
									<template #title>
										<div class="custom-collapse-title">
											<div class="custom-collapse-index">{{ index + 1 }}</div>
											<div class="custom-collapse-name one-line-ellipsis">US美国法典2025年人工智能指数报告美国法典2025年人工智能指数报告美国法典2025年人工智能指数报告</div>
										</div>
									</template>
									<div class="custom-collapse-content">
										中国政府未能采取有效措施阻止持续流入美国的合成阿片类药物（包括芬太尼）的流通，构成对美国国家安全、外交政策和经济的异常且非同寻常的威胁，该威胁主要源于美国境外。
									</div>
								</el-collapse-item>
							</el-collapse>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
		<div class="right">
			<div class="box3">
				<!-- <AnalysisBox title="法律依据" :showAllBtn="false">
					<div class="box3-main">
						<el-empty v-if="!laws.length" style="padding-top: 200px;" description="暂无数据" :image-size="100" />
						<div class="box3-item" v-for="(item, index) in laws" :key="index" @click="handleToBillDetail(item)">
							<div class="id">{{ index + 1 }}</div>
							<div class="item-header">
								<div class="name">{{ item.title }}</div>
							</div>
							<div class="item-content">{{ item.content }}</div>
						</div>
					</div>
				</AnalysisBox> -->
				<AnalysisBox title="前序政令" :showAllBtn="false">
					<el-empty v-if="!eventList.length" style="padding-top: 200px;" description="暂无数据" :image-size="100" />
					<div class="box3-bottom-main">
						<el-timeline>
							<el-timeline-item v-for="(item, index) in eventList" :key="index">
								<div>
									<div class="time-line-top">
										<div class="time-line-date">{{ item.time }}</div>
										<div class="time-line-icon">
											<img style="width: 100%; height: 100%;" :src="DefaultIcon1" alt="">
										</div>
										<div class="time-line-name">{{ "总统行政办公室" }}</div>
									</div>
									<div class="timeline-content">{{ item.title }}</div>
								</div>
							</el-timeline-item>
						</el-timeline>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import router from "@/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 DefaultIcon1 from "@/assets/icons/default-icon1.png";
import { reduce } from "lodash";
import Index from "../index.vue";

const route = useRoute();

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

// 基本鼠标位置
const mouseX = ref(0);
const mouseY = ref(0);

// 提出背景
const box1BtnList = ref(["涉华背景", "全部背景"]);
const box1ActiveBtn = ref("涉华背景");
const handleClickBox1Btn = btn => {
	box1ActiveBtn.value = btn;
	handleCurrentChange(1)
};
const backgroundListNum = ref(0);
const backgroundList = ref([
	// {
	// 	content: "认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术"
	// },
	// {
	// 	content: "要求美国不仅必须在开发通用和前沿AI能力方面领先，还必须确保美国的人工智能技术、标准和治理模式在全球范围内被采用"
	// },
]);
const currentPage = ref(1);
const handleCurrentChange = page => {
	currentPage.value = page;
	handleGetBackground();
};
const handleGetBackground = async () => {
	const params = {
		cRelated: box1ActiveBtn.value === "涉华背景" ? true : false,
		currentPage: currentPage.value - 1,
		pageSize: 10,
		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 eventList = ref([
	{
		time: "2025-07-31",
		title: "美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。"
	},
	{
		time: "2025-07-25",
		title: "美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。"
	},
	{
		time: "2025-07-21",
		title: "美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口"
	}
]);

// 法律依据
const laws = ref([]);
const activeNames = ref([1, 2, 3, 4, 5]);
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;
};

const handleMouseMove = event => {
	mouseX.value = event.screenX;
	mouseY.value = event.screenY;
};

const handleToBillDetail = item => {
	window.sessionStorage.setItem("curTabName", item.title);
	const route = router.resolve({
		path: "/billLayout",
		query: {
			billId: item.billId
		}
	});
	window.open(route.href, "_blank");
};

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

<style lang="scss" scoped>
.custom-collapse {
	padding-left: 32px;
	:deep(.el-collapse),
	:deep(.el-collapse-item__wrap) {
		border: none !important;
	}
	:deep(.el-collapse-item__header) {
		border-bottom: 1px solid rgba(234, 236, 238, 1);
	}
	.custom-collapse-title {
		position: relative;
		.custom-collapse-index {
			font-size: 15px;
			position: absolute;
			top: 12px;
			left: -32px;
			width: 24px;
			height: 24px;
			text-align: center;
			line-height: 24px;
			border-radius: 50%;
			background: #e7f3ff;
			color: #0a57a6;
		}
		.custom-collapse-name {
			font-weight: 600;
			font-size: 18px;
			color: var(--el-collapse-header-text-color);
		}
	}
	.custom-collapse-content {
		margin-top: 8px;
		font-family: Microsoft YaHei;
		font-size: var(--font-size-base);
		color: rgb(59, 65, 75);
	}
}

.introduction-wrap {
	display: flex;
	position: relative;

	.header-btn-box {
		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);
		}
	}

	.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: 1064px;

		.box1 {
			margin-top: 16px;
			width: 1064px;
			height: 414px;

			.box1-main {
				margin-top: 16px;
				margin-left: 22px;
				width: 1034px;
				height: 290px;
				overflow: hidden;
				overflow-y: auto;

				.box1-item {
					width: 1015px;
					min-height: 48px;
					font-family: Microsoft YaHei;
					font-size: var(--font-size-base);
					color: rgb(59, 65, 75);
					box-sizing: border-box;
					background: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
					padding: 8px 0;

					.id {
						margin-left: 15px;
						width: 24px;
						height: 24px;
						text-align: center;
						line-height: 24px;
						border-radius: 12px;
						background: #e7f3ff;
						color: #0a57a6;
					}

					.title {
						width: 914px;
						line-height: 24px;
						margin-left: 13px;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// white-space: nowrap;
					}

					.open {
						width: 16px;
						height: 16px;
						margin-left: 16px;

						img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.box1-item:nth-child(odd) {
					background-color: rgba(247, 248, 249, 1);
				}
			}

			.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: 1064px;
			height: 415px;

			.box2-main {
				margin-top: 3px;
				margin-left: 31px;
				height: 330px;
				width: 1004px;
				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: 806px;
						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: 806px;
							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: 520px;
			height: 845px;

			.box3-bottom-main {
				width: 100%;
				height: 100%;
				padding-right: 30px;
				margin-top: 14px;
				overflow-y: auto;

				.time-line-top {
					display: flex;
					align-items: center;
					margin-bottom: 10px;

					.time-line-date {
						color: rgba(5, 95, 194, 1);
						flex: auto;
						font-weight: bold;
						font-size: 16px;
					}

					.time-line-icon {
						width: 20px;
						height: 20px;
						margin-right: 6px;
						overflow: hidden;
						border-radius: 50%;
						font-size: 0px;
					}

					.time-line-name {
						color: rgba(59, 65, 75, 1);
						font-size: 15px;
					}
				}

				:deep(.el-timeline) {
					padding: 8px 0px 0px 25px !important;
				}

				:deep(.el-timeline-item__node) {
					border: 4px solid var(--color-main-active) !important;
					background-color: #fff;
				}

				:deep(.el-timeline-item) {
					padding-bottom: 12px !important;
				}

				:deep(.el-timeline-item__timestamp) {
					color: var(--color-main-active) !important;
					font-family: Microsoft YaHei !important;
					font-size: 16px !important;
					font-weight: 600 !important;
					padding-top: 0px !important;
				}

				.timeline-content {
					color: var(--text-primary-65-color);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 26px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			// .box3-main {
			// 	margin-top: 9px;
			// 	width: 464px;
			// 	height: 720px;
			// 	// overflow: hidden;
			// 	overflow-y: auto;
			// 	padding-left: 20px;

			// 	.box3-item {
			// 		margin-bottom: 20px;
			// 		position: relative;
			// 		cursor: pointer;

			// 		// 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: 384px;
			// 			height: 35px;
			// 			display: flex;
			// 			justify-content: space-between;
			// 			margin-left: 60px;
			// 			overflow: hidden;
			// 			text-overflow: ellipsis;
			// 			white-space: nowrap;

			// 			.name {
			// 				max-width: 384px;
			// 				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>