<template>
	<div class="entity-list">
		<div class="header">
			<div class="header-title">
				<img :src="headerTitle.img" alt="" />
				<div>
					<div class="title">
						{{ headerTitle.title }}
					</div>
					<div class="department">
						{{ headerTitle.department }}
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="main-header">
				<div>实体清单制裁文件</div>
			</div>
			<!-- 外层滚动容器，统一控制两侧滚动 -->
			<div class="report-box" ref="reportBoxRef">
				<div class="pdf-pane-wrap">
					<pdf ref="leftPdfRef" :pdfUrl="headerTitle.srcUrl" class="pdf-pane-inner" />
				</div>
				<div class="pdf-pane-wrap">
					<pdf ref="rightPdfRef" :pdfUrl="headerTitle.transUrl" class="pdf-pane-inner" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { getSingleSanctionOverview } from "@/api/exportControlV2.0.js";
import title from "../assets/title.png";
import pdf from "./pdf.vue";

const leftPdfRef = ref(null);
const rightPdfRef = ref(null);
const reportBoxRef = ref(null);

const headerTitle = ref({
	img: title,
	title: "",
	department: "",
	srcUrl: "",
	transUrl: ""
});

const sanRecordId = ref("");
const isSyncing = ref(false);

const getUrlParams = () => {
	const urlParams = new URLSearchParams(window.location.search);
	sanRecordId.value = urlParams.get("id") || "";
};

const getSingleSanctionOverviewData = async () => {
	if (!sanRecordId.value) return;
	try {
		const res = await getSingleSanctionOverview({
			sanRecordId: sanRecordId.value
		});
		if (res.code === 200 && res.data) {
			const singleSanctionOverview = res.data || {};

			// 格式化日期
			let dateStr = "";
			if (singleSanctionOverview.postDate) {
				const date = new Date(singleSanctionOverview.postDate);
				if (!isNaN(date.getTime())) {
					dateStr = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
				} else {
					dateStr = singleSanctionOverview.postDate;
				}
			}

			// 更新头部信息
			headerTitle.value = {
				...headerTitle.value,
				title: `${dateStr}《${singleSanctionOverview.sanTitleZh || singleSanctionOverview.sanTitle}》`,
				department: singleSanctionOverview.fileCode || "",
				srcUrl: singleSanctionOverview.srcUrl || "",
				transUrl: singleSanctionOverview.transUrl || ""
			};
		}
	} catch (error) {
		console.error("获取制裁概况失败:", error);
	}
};

// 同步滚动处理
const handleSyncScroll = () => {
	if (isSyncing.value) return;
	isSyncing.value = true;

	requestAnimationFrame(() => {
		isSyncing.value = false;
	});
};

// 监听滚动事件
const setupScrollSync = () => {
	const reportBox = reportBoxRef.value;
	if (!reportBox) return;

	reportBox.addEventListener("scroll", handleSyncScroll, { passive: true });
};

// 监听 PDF 加载完成
watch(
	() => [headerTitle.value.srcUrl, headerTitle.value.transUrl],
	() => {
		// PDF URL 变化时，等待渲染完成后设置滚动监听
		setTimeout(() => {
			setupScrollSync();
		}, 1000);
	},
	{ deep: true }
);

onMounted(() => {
	getUrlParams();
	getSingleSanctionOverviewData();

	// 等待 DOM 渲染完成后设置滚动监听
	setTimeout(() => {
		setupScrollSync();
	}, 500);
});
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.entity-list {
	width: 100%;
	height: 100%;
	overflow-y: auto;

	.header {
		width: 100%;
		height: 148px;
		background-color: #fff;
		padding-top: 16px;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(234, 236, 238, 1);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);

		.header-title {
			width: 1601px;
			height: 72px;
			background-color: rgba(246, 250, 255, 1);
			margin: 0 auto;
			border-radius: 10px;
			border: 2px solid rgba(174, 214, 255, 1);
			display: flex;
			align-items: center;
			margin-bottom: 12px;
			position: relative;

			img {
				width: 54px;
				height: 54px;
				margin-left: 15px;
				margin-right: 11px;
			}

			.title {
				font-size: 20px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 26px;
				color: rgb(59, 65, 75);
			}

			.department {
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(95, 101, 108);
			}
		}
	}

	.main {
		margin: 0 auto;
		background: rgb(255, 255, 255);
		width: 1601px;
		height: calc(100vh - 148px);
		margin-bottom: 20px;
		border: 1px solid rgb(234, 236, 238);
		box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);

		.main-header {
			height: 64px;
			border-bottom: 1px solid rgb(234, 236, 238);
			background: rgb(255, 255, 255);
			margin: 0 70px;
			color: rgba(59, 65, 75, 1);
			font-family: "Source Han Sans CN";
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
			width: 1456px;
			text-align: left;
			display: flex;
			align-items: center;
		}

		.report-box {
			margin-left: 70px;
			width: 1456px;
			height: calc(100% - 64px);
			display: flex;
			overflow-y: auto; /* 统一滚动条，控制两侧一起滚动 */
			overflow-x: hidden;
		}

		.pdf-pane-wrap {
			flex: 0 0 50%;
			max-width: 50%;
			height: 100%;
			min-width: 0;
		}

		.pdf-pane-inner {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
