<template>
	<div class="layout-container">
		<div class="layout-main">
			<div class="header-main">
				<div class="layout-main-header">
					<div class="icon">
						<img :src="summaryInfo.imageUrl" alt="" />
					</div>
					<div class="info">
						<div class="info-box1 one-line-ellipsis">{{ summaryInfo.name || "--" }}</div>
						<div class="info-box2">
							<div class="info-box2-item">{{ summaryInfo.postDate || "--" }}</div>
							|
							<div class="info-box2-item">{{ summaryInfo.orgName || "--" }}</div>
							|
							<div class="info-box2-item one-line-ellipsis">{{ summaryInfo.ename || "--" }}</div>
						</div>
					</div>
					<div class="layout-main-header-right-box">
						<div class="right-box-top">
							<div class="time">{{ summaryInfo.postDate || "--" }}</div>
							<div class="name">{{ summaryInfo.orgName || "--" }}</div>
						</div>
					</div>
				</div>
			</div>

			<div class="layout-main-center">
				<BaseDecreeOriginal :report-data="reportData" @download="handleDownload" />
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { getDecreeSummary } from "@/api/decree/introduction";
import { getDecreeReport } from "@/api/decree/introduction";
import BaseDecreeOriginal from "@/components/base/DecreeOriginal/index.vue";

const route = useRoute();
let pdfUrl = "";
const handleDownload = async () => {
	if (pdfUrl) {
		try {
			const response = await fetch(pdfUrl, {
				method: 'GET',
				headers: { 'Content-Type': 'application/pdf' },
			});
			
			if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`);
			}
			
			const blob = await response.blob();
			
			// 创建 Blob URL
			const blobUrl = window.URL.createObjectURL(blob);
			
			// 创建隐藏的下载链接
			const link = document.createElement('a');
			link.href = blobUrl;
			link.download = `${summaryInfo.value.name}.pdf`;
			
			// 添加到文档中并点击
			document.body.appendChild(link);
			link.click();
			
			// 清理
			document.body.removeChild(link);
			window.URL.revokeObjectURL(blobUrl);
			
		} catch (error) {
			console.error('下载失败:', error);
			// 可以在这里提示用户下载失败
			alert('PDF 下载失败，请稍后重试');
		}
	} else {
		ElMessage.warning("暂无下载链接!");
	}
}

// 获取全局信息
const summaryInfo = ref({});
const handleGetSummary = async () => {
	const params = {
		id: route.query.id
	};
	try {
		const res = await getDecreeSummary(params);
		console.log("全局信息", res);
		if (res.code === 200 && res.data) {
			summaryInfo.value = res.data;
		}
	} catch (error) { }
};

// 获取报告原文 - 修改为获取分段数组
const reportData = ref([]);
const handleGetReport = async () => {
	try {
		const res = await getDecreeReport({id: route.query.id});
		console.log("报告原文", res);
		if (res.code === 200 && res.data) {
			pdfUrl = res.data.pdfUrl;
			const originData = [];
			let num = Math.max(res.data.content.length, res.data.contentEn.length)
			for (let i = 0; i < num; i++) {
				let obj = {
					content: res.data.content[i] || "",
					contentEn: res.data.contentEn[i] || "",
					num: i + 1,
				}
				originData.push(obj);
			}
			reportData.value = JSON.parse(JSON.stringify(originData));
		}
	} catch (error) { }
};

onMounted(() => {
	handleGetSummary();
	handleGetReport();
});
</script>

<style lang="scss" scoped>
.layout-container {
	width: 100%;
	height: 100%;
	background-color: #f7f8f9;

	.layout-main {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.header-main {
			padding: 17px 0;
			width: 100%;
			border-bottom: 1px solid rgba(234, 236, 238, 1);
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 1);
		}

		.layout-main-header {
			width: 1600px;
			display: flex;
			align-items: center;
			margin: 0 auto;

			.icon {
				width: 64px;
				height: 40px;
				overflow: hidden;

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

			.info {
				margin-left: 10px;
				margin-right: 40px;
				width: 20px;
				flex: auto;

				.info-box1 {
					width: 100%;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: 600;
					line-height: 22px;
					letter-spacing: 0px;
					text-align: left;
					margin-top: 5px;
				}

				.info-box2 {
					margin-top: 5px;
					height: 22px;
					line-height: 22px;
					color: rgba(132, 136, 142, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
					letter-spacing: 0px;
					text-align: left;
					display: flex;

					.info-box2-item {
						white-space: nowrap;
						padding: 0 10px;
					}

					.info-box2-item:first-child {
						padding-left: 0px;
					}
				}
			}

			.layout-main-header-right-box {
				.right-box-top {
					white-space: nowrap;

					.time {
						height: 24px;
						line-height: 24px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: right;
					}

					.name {
						height: 24px;
						line-height: 24px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: right;
					}
				}
			}
		}

		.layout-main-center {
			width: 1600px;
			background-color: white;
			padding: 0 60px;
			height: 20px;
			flex: auto;
			display: flex;
			flex-direction: column;
		}
	}
}
</style>