<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 class="header-left">实体清单制裁文件</div>
				<div class="header-right">
					<!-- 中英文切换开关 -->
					<div class="toggle-group">
						<!-- <span :class="{ active: !showChinese }">英文</span> -->
						<el-switch v-model="showChinese" @change="handleToggleChange" />
						<img :src="transIcon" alt="" />
						<span :class="{ active: showChinese }">显示原文</span>
					</div>
					<!-- 下载按钮 -->
					<el-button plain :icon="Download" @click="handleDownload"> 下载 </el-button>
				</div>
			</div>
			<!-- 外层滚动容器，统一控制两侧滚动 -->
			<div class="report-box" ref="reportBoxRef">
				<div class="pdf-pane-wrap" v-if="showChinese" :class="{ 'center-mode': !showChinese }">
					<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, computed } from "vue";
import { Download } from "@element-plus/icons-vue";
import { getSingleSanctionOverview } from "@/api/exportControlV2.0.js";
import title from "../assets/title.png";
import transIcon from "../assets/icon-translation.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);

// ✅ 控制中文 PDF 显示
const showChinese = ref(true);

// ✅ 计算当前显示模式
const showMode = computed(() => {
	return showChinese.value ? "both" : "en";
});

// ✅ 切换中英文显示
const handleToggleChange = value => {
	console.log("切换中英文显示:", value ? "中英双栏" : "仅英文");
	showChinese.value = value;
};

// ✅ 下载功能
const handleDownload = async () => {
	const files = [
		{ url: headerTitle.value.srcUrl, name: "英文原版.pdf" },
		{ url: headerTitle.value.transUrl, name: "中文翻译.pdf" }
	];

	for (const file of files) {
		if (file.url) {
			try {
				const response = await fetch(file.url);
				const blob = await response.blob();
				const link = document.createElement("a");
				link.href = URL.createObjectURL(blob);
				link.download = file.name;
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
				URL.revokeObjectURL(link.href);
			} catch (error) {
				console.error(`下载${file.name}失败:`, error);
			}
		}
	}
};

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],
	() => {
		setTimeout(() => {
			setupScrollSync();
		}, 1000);
	},
	{ deep: true }
);

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

	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;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.header-right {
				display: flex;
				align-items: center;
				gap: 24px;

				.toggle-group {
					display: flex;
					align-items: center;
					gap: 10px;

					span {
						font-size: 14px;
						color: rgb(150, 150, 150);
						transition: color 0.3s;

						&.active {
							color: rgb(5, 95, 194);
							font-weight: 600;
						}
					}

					:deep(.el-switch) {
						--el-switch-on-color: #055fc2;
						--el-switch-off-color: #e6e7e8;

						.el-switch__label {
							color: #fff;
							font-size: 12px;
							font-weight: 600;

							&.is-active {
								color: #fff;
							}
						}
					}
				}

				// :deep(.el-button) {
				// 	--el-button-bg-color: #055fc2;
				// 	--el-button-border-color: #055fc2;
				// 	--el-button-hover-bg-color: #044c9b;
				// 	--el-button-hover-border-color: #044c9b;

				// 	font-size: 14px;
				// 	padding: 10px 20px;
				// }
			}
		}

		.report-box {
			margin-left: 70px;
			width: 1456px;
			height: calc(100% - 64px);
			display: flex;
			overflow-y: auto;
			overflow-x: hidden;
			// ✅ 添加居中对齐
			justify-content: center;
		}

		.pdf-pane-wrap {
			flex: 0 0 50%;
			max-width: 50%;
			height: 100%;
			min-width: 0;
			transition: all 0.3s;

			&.center-mode {
				flex: 0 0 100%;
				max-width: 100%;
				// ✅ 添加居中样式
				width: 728px; // 约一半宽度，保持单栏时美观
				margin: 0 auto;
			}
		}

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