<template>
	<div class="layout-container">
		<!-- 导航菜单 -->
		<div class="layout-main">
			<div class="layout-main-box">
				<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.order }}</div>
							|
							<div class="info-box2-item">{{ summaryInfo.type }}</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">
							<el-icon><Document /></el-icon>
							<div class="text">下载</div>
						</div>
						<div class="btn" @click="handleFindWord">
							<el-icon><Search /></el-icon>
							<div class="text">查找</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" 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 } from "vue";
import { useRoute } from "vue-router";
import { getDecreeSummary } from "@/api/decree/introduction";
import { getDecreeReport } from "@/api/decree/introduction";

const route = useRoute();
// 修改为数组存储分段数据
const reportData = ref([]);

const summaryInfo = ref({});

// 政令原文操作
const isHighlight = ref(true);
const isTranslate = ref(true);
const handleDownload = () => {
	
}
const handleFindWord = () => {

}

// 获取全局信息
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 handleGetReport = async () => {
	const params = {
		id: route.query.id
	};

	try {
		const res = await getDecreeReport(params);
		console.log("报告原文", res);
		if (res.code === 200 && res.data) {
			// 假设后端返回的是数组格式，如果返回的是对象包含数组，请改为 res.data.list
			reportData.value = res.data || [];
			let test = {
				content: "设立第二紧急委员会（以下简称“委员会”）。自2026年1月16日美国东部<span>标准时间</span>凌晨12:01起，成立一个由一名主席和两名成员组成的<span>委员会</span>，所有成员均由总统任命，负责调查并报告这些争议。任何成员均不得在任何铁路员工组织或任何铁路承运人中拥有经济或其他利益关系。委员会的运作取决于资金的可用性。",
				contentEn: "Establishment of a Second <span>Emergency</span> Board (Board). There is established, effective 12:01 a.m. eastern standard time on <span>January 16</span>, 2026, a Board composed of a chair and two other members, all of whom shall be appointed by the President to investigate and report on these disputes. No member shall be pecuniarily or otherwise interested in any organization of railroad employees or any carrier. The Board shall perform its functions subject to the availability of funds.",
				num: 0,
			}
			reportData.value.unshift(test);
		}
	} catch (error) { }
};

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

<style lang="scss" scoped>
.high-light {
	:deep(span) {
		color: #055FC2;
	}
}
.layout-container {
	width: 100%;
	height: 100%;
	background-color: #F7F8F9;

	.layout-main {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.layout-main-box {
			padding: 16px 0;
			width: 100%;
			border-bottom: 1px solid rgba(234, 236, 238, 1);
			border-top: 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: 122px;
				height: 64px;
				border-radius: 4px;
				overflow: hidden;

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

			.info {
				margin-left: 16px;
				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;
				.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;
					gap: 8px;
					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;
					}
				}
			}

			.report-main {
				height: 20px;
				flex: auto;
				box-sizing: border-box;
				overflow-y: auto;

				// 滚动条样式
				&::-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: 24px 0;
						box-sizing: border-box;
						font-size: 16px;
						line-height: 1.8;
						color: #3B414B;
						font-family: Microsoft YaHei;
						text-align: justify;
						white-space: pre-wrap; // 保留换行格式
					}
				}
			}
		}
	}
}

// 修改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>