<template>
	<div class="introduction-wrap">
		<div class="left">
			<div class="box1">
				<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-container">
						<el-empty v-if="!backgroundList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
						<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 text-align-justify">{{ item.content }}</div>
								<div class="open">
									<img src="./assets/images/open-icon.png" alt="" />
								</div>
							</div>
						</div>
						<div class="box1-footer" v-if="backgroundListNum > 10">
							<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>
					</div>
				</AnalysisBox>
			</div>
			<div class="box2">
				<AnalysisBox title="法律依据" :showAllBtn="false">
					<el-empty v-if="!dependList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
					<div class="box2-main">
						<div class="custom-collapse">
							<el-collapse v-model="dependActive">
								<el-collapse-item v-for="(item, index) in dependList" :key="item.billId" :name="item.billId">
									<template #icon>
										<el-icon v-if="dependActive.includes(item.billId)"><ArrowDownBold /></el-icon>
										<el-icon v-else><ArrowUpBold /></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">
												<span class="text-click-hover" @click.stop="handleClickDecree(item)">{{ item.title }}</span>
											</div>
										</div>
									</template>
									<div class="custom-collapse-content">
										{{ item.content }}
									</div>
								</el-collapse-item>
							</el-collapse>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
		<div class="right">
			<div class="box3">
				<AnalysisBox title="前序政令" :showAllBtn="false">
					<el-empty v-if="!prevList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
					<div class="box3-bottom-main">
						<el-timeline>
							<el-timeline-item v-for="(item, index) in prevList" :key="index">
								<div>
									<div class="time-line-top">
										<div class="time-line-date">{{ item.postDate }}</div>
										<div class="time-line-icon">
											<img style="width: 100%; height: 100%;" :src="item.orgImage || DefaultIcon1" alt="">
										</div>
										<div class="time-line-name" @click="handleToInstitution(item)">{{ item.proposeOrgName }}</div>
									</div>
									<div class="timeline-content">{{ item.describe }}</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 { getDecreeBackground, getDecreeDepend, getDecreePrev } from "@/api/decree/background";
import router from "@/router";

import DefaultIcon1 from "@/assets/icons/default-icon1.png";

const route = useRoute();

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

// 提出背景
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) {
			backgroundListNum.value = 0;
			backgroundList.value = [];
			console.error("获取提出背景数据失败", error);
	}
};

// 前序政令
const prevList = ref([
	// {
	// 	proposeOrgName: "白宫",
	// 	postDate: "2025-07-31",
	// 	describe: "美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。"
	// },
]);
const handleGetPrev = async () => {
	try {
		const res = await getDecreePrev({id: decreeId.value});
		console.log("前序政令", res);
		if (res.code === 200 && res.data) {
			prevList.value = res.data;
		} else {
			prevList.value = [];
		}
	} catch (error) {
		prevList.value = [];
		console.error("获取前序政令数据失败", error);
	}
};
// 跳转行政机构主页
const handleToInstitution = item => {
	window.sessionStorage.setItem("curTabName", item.proposeOrgName);
	const curRoute = router.resolve({
		path: "/institution",
		query: {
			id: item.id
		}
	});
	window.open(curRoute.href, "_blank");
};

// 法律依据
const dependList = ref([]);
const dependActive = ref([]);
const handleGetLaws = async () => {
	try {
		const res = await getDecreeDepend({id: decreeId.value});
		console.log("法律依据", res);
		if (res.code === 200 && res.data) {
			dependList.value = res.data;
			// dependActive.value = res.data.map(item => item.billId);
		} else {
			dependList.value = [];
		}
	} catch (error) {
		dependList.value = [];
		console.error("获取法律依据数据失败", error);
	}
};
// 跳转科技法案详情页
const handleClickDecree = decree => {
	window.sessionStorage.setItem("billId", decree.billId);
	window.sessionStorage.setItem("curTabName", decree.title);
	const route = router.resolve({
		path: "/billLayout",
		query: {
			billId: decree.billId
		}
	});
	console.log(route);

	window.open(route.href, "_blank");
};

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

<style lang="scss" scoped>
.introduction-wrap {
	display: flex;
	width: 1600px;
	padding: 16px 0;
	gap: 16px;

	.left {
		width: 20px;
		flex: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;

		.box1 {
			.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);
				}
			}

			.box1-container {
				display: flex;
				flex-direction: column;
				padding: 16px;
			}

			.box1-main {
				width: 1034px;

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

					.id {
						margin-right: 16px;
						margin-left: 15px;
						width: 24px;
						height: 24px;
						text-align: center;
						background: #e7f3ff;
						color: #0a57a6;
						font-size: 15px;
						line-height: 24px;
						border-radius: 50%;
					}

					.title {
						width: 20px;
						flex: auto;
						line-height: 30px;
					}

					.open {
						width: 16px;
						height: 16px;
						margin: 0 16px;

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

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

			.box1-footer {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;

				.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 {

			.box2-main {
				padding: 16px 20px;
				.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);
					}
					:deep(.el-collapse-item__content) {
						padding-bottom: 16px;
					}
					.custom-collapse-title {
						position: relative;
						.custom-collapse-index {
							font-family: Microsoft YaHei;
							font-size: var(--font-size-base);
							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);
					}
				}
			}
		}
	}

	.right {
		width: 520px;
		.box3 {

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

				.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;
						cursor: pointer;
					}
				}

				: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: 16px;
					font-weight: 400;
					line-height: 26px;
				}
			}
		}
	}
}
</style>