<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">
					<div class="report-header">
						<div class="report-title">政令原文</div>
						<el-switch v-model="isHighlight" />
						<div style="margin-left: 6px; margin-right: 10px;">高亮实体</div>
						<el-switch v-model="isTranslate" />
						<div style="margin-left: 6px;">原文显示</div>
						<div class="btn" @click="handleDownload">
							<div class="icon" style="margin-right: 4px;">
								<img :src="download" alt="">
							</div>
							<div class="text">下载</div>
						</div>
						<div class="btn" @click="handleFindWord('open')">
							<div class="icon" style="margin-right: 6px;">
								<img :src="search" alt="">
							</div>
							<div class="text">查找</div>
						</div>
						<div class="find-word-box" v-if="findWordBox">
							<div class="find-word-input">
								<el-input v-model="findWordTxt" placeholder="查找原文内容" @input="handleUpdateWord()" />
							</div>
							<div class="find-word-limit">{{ findWordNum }}/{{ findWordMax }}</div>
							<div class="find-word-icon" @click="handleFindWord('last')">
								<el-icon><ArrowUp /></el-icon>
							</div>
							<div class="find-word-icon" @click="handleFindWord('next')">
								<el-icon><ArrowDown /></el-icon>
							</div>
							<div class="find-word-icon" @click="handleFindWord('close')">
								<el-icon><Close /></el-icon>
							</div>
						</div>
					</div>
					<div class="report-main">
						<div v-if="!reportData.length" class="noContent">{{ "暂无数据" }}</div>
						<el-scrollbar height="100%" v-else>
							<div v-for="(item, index) in reportData" :key="index" :class="['content-row', {'high-light':isHighlight}]">
								<!-- 右侧：中文 -->
								<div :class="['content-cn', {'translate-cn':!isTranslate}]" v-html="item.content"></div>
								<!-- 左侧：英文 -->
								<div class="content-en" v-html="item.contentEn" v-if="isTranslate"></div>
							</div>
						</el-scrollbar>
					</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { debounce } from "lodash";
import { getDecreeSummary } from "@/api/decree/introduction";
import { getDecreeReport } from "@/api/decree/introduction";
import download from "./assets/icons/download.png";
import search from "./assets/icons/search.png";

const route = useRoute();

// 政令原文操作
const isHighlight = ref(false);
const isTranslate = ref(true);
const findWordTxt = ref("")
const findWordBox = ref(false);
const findWordNum = ref(0);
const findWordMax = ref(0);
const handleDownload = async () => {
	if (summaryInfo.value?.url) {
		try {
			const response = await fetch(summaryInfo.value.url, {
				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 handleHighlight = () => {
	let spans = document.querySelectorAll(`span.highlight`);
	spans.forEach((span, index) => {
		if (index+1 === findWordNum.value) {
			// 平滑滚动 behavior: 'smooth'
			span.scrollIntoView({})
			span.style.backgroundColor = "#ff9632";
		} else {
			span.style.backgroundColor = "#ffff00";
		}
	})
}
const handleFindWord = (event) => {
	switch (event) {
		case "open":
			findWordBox.value = true;
			break;
		case "last":
			if (findWordMax.value > 1) {
				findWordNum.value = findWordNum.value==1 ? findWordMax.value : findWordNum.value-1;
				handleHighlight()
			}
			break;
		case "next":
			if (findWordMax.value > 1) {
				findWordNum.value = findWordNum.value==findWordMax.value ? 1 : findWordNum.value+1;
				handleHighlight()
			}
			break;
		case "close":
			findWordBox.value = false;
			findWordTxt.value = "";
			handleUpdateWord()
			break;
	}
}
const handleUpdateWord = debounce(() => {
	console.log("更新查找词", findWordTxt.value);
  findWordNum.value = 0;
	findWordMax.value = 0;
	if (findWordTxt.value) {
		originData.forEach((item, index) => {
			if (item.content) {
				reportData.value[index].content = highlightText(item.content, findWordTxt.value);
			}
			if (isTranslate.value && item.contentEn) {
				reportData.value[index].contentEn = highlightText(item.contentEn, findWordTxt.value);
			}
		});
		if (findWordMax.value > 0) {
			nextTick(() => {
				findWordNum.value = findWordNum.value==findWordMax.value ? 1 : findWordNum.value+1;
				handleHighlight()
			})
		}
	} else {
		originData.forEach((item, index) => {
			reportData.value[index].content = item.content;
			reportData.value[index].contentEn = item.contentEn;
		});
	}
}, 300)

const highlightText = (text, searchTerm) => {
	const escapedTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
	return text.replace(new RegExp(escapedTerm, 'g'), (match) => {
		findWordMax.value++;
		return `<span class="highlight">${match}</span>`;
	});
}

// 获取全局信息
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([]);
let originData = [];
const handleGetReport = async () => {
	try {
		const res = await getDecreeReport({id: route.query.id});
		console.log("报告原文", res);
		if (res.code === 200 && res.data) {
			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>
.high-light {
	:deep(span.highlight) {
		// color: #055FC2;
		background-color: #ffff00;
	}
}
.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;
			.report-header {
				height: 80px;
				display: flex;
				align-items: center;
				border-bottom: solid 1px rgba(234, 236, 238, 1);
				margin: 0 20px 10px;
				position: relative;
				.find-word-box {
					position: absolute;
					top: -50px;
					right: 0px;
					width: 430px;
					height: 60px;
					border: 1px solid rgba(230, 231, 232, 1);
					background-color: white;
					border-radius: 6px;
					display: flex;
					align-items: center;
					.find-word-input {
						width: 20px;
						flex: auto;
					}
					.find-word-limit {
						border-right: solid 1px rgba(230, 231, 232, 1);
						color: #5F656C;
						padding-right: 16px;
					}
					.find-word-icon {
						padding: 10px 12px;
						margin: 0 2px;
						cursor: pointer;
					}
				}
				.report-title {
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 20px;
					line-height: 20px;
					font-weight: 700;
					width: 20px;
					flex: auto;
				}
				.btn {
					margin-left: 10px;
					width: 88px;
					height: 32px;
					box-sizing: border-box;
					border: 1px solid rgba(230, 231, 232, 1);
					border-radius: 6px;
					background: rgba(255, 255, 255, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					.text {
						height: 24px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-style: Regular;
						font-size: 14px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
					}
					.icon {
						width: 16px;
						height: 16px;
						font-size: 0px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.report-main {
				height: 20px;
				flex: auto;
				box-sizing: border-box;
				padding-top: 10px;

				// 滚动条样式
				&::-webkit-scrollbar {
					display: none;
				}

				&::-webkit-scrollbar-thumb {
					background: #c1c1c1;
					border-radius: 4px;
				}

				&::-webkit-scrollbar-track {
					background: #f1f1f1;
				}

				.noContent {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-style: Regular;
					font-size: 20px;
					font-weight: 400;
				}

				.content-row {
					display: flex;
					width: 100%;
					padding: 0 20px;
					min-height: 100px;
					gap: 80px;

					&:last-child {
						border-bottom: none;
					}

					.content-en,
					.content-cn {
						width: 50%;
						flex: auto;
						padding-bottom: 40px;
						box-sizing: border-box;
						font-size: 16px;
						line-height: 1.8;
						color: #3B414B;
						font-family: Microsoft YaHei;
						text-align: justify;
						white-space: pre-wrap; // 保留换行格式
					}
					.translate-cn {
						padding-bottom: 10px;
					}
				}
			}
		}
	}
}

// 修改element-plus滚动条样式
:deep(.el-scrollbar__bar.is-vertical) {
	right: 0px;
	width: 4px;
	background: transparent;
	border-radius: 2px;
	&>div {
		background: #c5c7c9;
		opacity: 1;
	}
	&>div:hover {
		background: #505357;
	}
}
</style>