<template>
	<div class="entity-list">
		<div class="header">
			<div class="header-title">
				<img :src="headerTitle.img" alt="" />
				<div>
					<div class="title">
						{{ headerTitle.title }}
						<!-- <span>{{ headerTitle.titleEn }}</span> -->
					</div>
					<div class="department">
						{{ headerTitle.department }}
					</div>
				</div>
				<!-- <div class="btn">
                <img :src="icon01" alt="">切换
            </div> -->
			</div>
		</div>
		<div class="main">
			<div class="pdf-container">
				<iframe v-if="headerTitle.srcUrl" :src="headerTitle.srcUrl" width="100%" height="100%" frameborder="0"></iframe>
				<div v-else class="no-pdf">暂无原文</div>
			</div>
			<div class="pdf-container">
				<iframe
					v-if="headerTitle.transUrl"
					:src="headerTitle.transUrl"
					width="100%"
					height="100%"
					frameborder="0"
				></iframe>
				<div v-else class="no-pdf">暂无译文</div>
			</div>
		</div>
	</div>
</template>

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

// 单次制裁-制裁概况-基本信息
const singleSanctionOverview = ref({});
const getSingleSanctionOverviewData = async () => {
	if (!sanRecordId.value) return;
	try {
		const res = await getSingleSanctionOverview({
			sanRecordId: sanRecordId.value
		});
		if (res.code === 200) {
			singleSanctionOverview.value = res.data || {};

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

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

const headerTitle = ref({
	img: title
});
// 获取URL参数
const sanRecordId = ref("");
const getUrlParams = () => {
	const urlParams = new URLSearchParams(window.location.search);
	sanRecordId.value = urlParams.get("id") || "";
};
onMounted(() => {
	getUrlParams();
	getSingleSanctionOverviewData();
});
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.entity-list {
	width: 100%;
	height: 100%;
	.header {
		width: 100%;
		height: 148px;
		background-color: #fff;
		padding-top: 16px;
		.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);
				span {
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(95, 101, 108);
					margin-left: 11px;
				}
			}
			.department {
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(95, 101, 108);
			}
			.btn {
				cursor: pointer;
				display: flex;
				align-items: center;
				position: absolute;
				right: 16px;
				top: 25px;
				font-size: 18px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(5, 95, 194);
				img {
					width: 20px;
					height: 20px;
					margin-right: 7px;
				}
			}
		}
		.header-nav {
			width: 1601px;
			margin: 0 auto;
			height: 48px;
			display: flex;
			align-items: center;

			.nav-item {
				display: flex;
				align-items: center;
				height: 100%;
				margin-right: 32px;
				cursor: pointer;
				position: relative;
				font-size: 18px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				color: rgb(59, 65, 75);

				&:last-child {
					margin-right: 0;
				}

				img {
					width: 16px;
					height: 16px;
					margin-right: 4px;
				}

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

				.active-line {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 3px;
					background-color: #055fc2;
					border-radius: 1.5px;
				}
			}

			.original-text-btn {
				margin-left: auto;
				width: 152px;
				height: 36px;
				background: #ffffff;
				border-radius: 4px;
				border: 1px solid rgba(230, 231, 232, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

				img {
					width: 16px;
					height: 16px;
					margin-right: 8px;
				}

				span {
					font-size: 16px;
					font-weight: 400;
					color: rgb(95, 101, 108);
					font-family: "Microsoft YaHei";
					line-height: 24px;
				}
			}
		}
	}
	.main {
		width: 1601px;
		height: calc(100% - 148px);
		background-color: #f7f8f9;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding-top: 20px;
		box-sizing: border-box;

		.pdf-container {
			width: 790px;
			height: calc(100% - 20px);
			background-color: #fff;
			// border: 1px solid rgba(174, 214, 255, 1);
			border-radius: 4px;
			overflow: hidden;

			.no-pdf {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				color: #909399;
				font-size: 16px;
				background-color: #fff;
			}
		}
	}
}
</style>
