<template>
	<div class="layout-container">
		<!-- 导航菜单 -->
		<div class="layout-main">
			<div class="layout-main-header">
				<div class="layout-main-header-left-box">
					<div class="left-box-top">
						<div class="icon">
							<img :src="summaryInfo.imageUrl" alt="" />
						</div>
						<div class="info">
							<div class="info-box1">{{ summaryInfo.name }}</div>
							<div class="info-box2">
								<div class="info-box2-item item1">{{ summaryInfo.order }}</div>
								|
								<div class="info-box2-item item2">{{ summaryInfo.type }}</div>
								|
								<div class="info-box2-item item3">{{ summaryInfo.ename }}</div>
							</div>
						</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 class="layout-main-center">
				<div class="report-box">
					<div class="report-header">
						{{ "政令原文" }}
					</div>
					<div class="report-main">
						<div v-if="!reportData.length" class="noContent">{{ "暂无数据" }}</div>
						<template v-else>
							<div v-for="(item, index) in reportData" :key="index" class="content-row">
								<!-- 左侧：英文 -->
								<div class="content-en">{{ item.contentEn }}</div>
								<!-- 右侧：中文 -->
								<div class="content-cn">{{ item.content }}</div>
							</div>
						</template>
					</div>
				</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 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 || [];
		}
	} catch (error) { }
};

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

<style lang="scss" scoped>
.layout-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;

	.layout-main {
		width: 100%;

		.layout-main-header {
			height: 120px;
			background: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: space-between;
			position: sticky;
			top: 0;
			z-index: 99999999;
			box-sizing: border-box;
			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-left-box {
				width: 1100px;
				margin-left: 160px;
				margin-top: 13px;

				.left-box-top {
					height: 64px;
					display: flex;

					.icon {
						width: 122px;
						height: 64px;
						border-radius: 4px;
						overflow: hidden;

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

					.info {
						width: 700px;
						margin-left: 9px;

						.info-box1 {
							width: 700px;
							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;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.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;
							margin-left: -10px;

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

							.item1 {
								width: 100px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.item2 {
								width: 180px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.item3 {
								width: 420px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}

				.left-box-bottom {
					display: flex;
					height: 40px;
					margin-top: 21px;

					.left-box-bottom-item {
						display: flex;
						margin-right: 32px;
						margin-top: 3px;
						height: 35px;
						cursor: pointer;

						.icon {
							margin-top: 4px;
							width: 16px;
							height: 16px;

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

						.name {
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
							margin-left: 3px;
						}

						.nameActive {
							color: var(--color-main-active);
							font-weight: 700;
						}
					}

					.leftBoxBottomItemActive {
						border-bottom: 3px solid var(--color-main-active);
					}
				}
			}

			.layout-main-header-right-box {
				width: 300px;
				margin-right: 150px;
				margin-top: 19px;

				.right-box-top {
					.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;
					}
				}

				.right-box-bottom {
					margin-top: 24px;
					text-align: right;
					display: flex;
					justify-content: flex-end;
					gap: 8px;

					.btn {
						width: 120px;
						height: 36px;
						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;

						.icon {
							width: 16px;
							height: 16px;

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

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

					.btn-active {
						width: 120px;
						height: 36px;
						border-radius: 6px;
						background: var(--color-main-active);
						display: flex;
						justify-content: center;
						align-items: center;
						gap: 8px;
						cursor: pointer;

						.icon-active {
							width: 16px;
							height: 16px;

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

						.text-active {
							width: 64px;
							height: 24px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-style: Regular;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: center;
						}
					}
				}
			}
		}

		.layout-main-center {
			.report-box {
				margin: 0 auto;
				width: 1600px;
				height: 926px;
				background: rgba(248, 249, 250, 1);

				.report-header {
					height: 80px;
					line-height: 80px;
					padding-left: 69px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-style: Bold;
					font-size: 20px;
					font-weight: 700;
					letter-spacing: 0px;
					text-align: left;
				}

				.report-main {
					width: 1600px;
					margin-top: 24px;
					background: #fff;
					box-sizing: border-box;
					padding: 24px 69px;
					height: calc(100% - 100px);
					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%;
						min-height: 100px;
						// border-bottom: 1px solid rgba(234, 236, 238, 1);
						align-items: stretch; // 默认stretch，确保左右等高，头部对齐

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

						.content-en,
						.content-cn {
							width: 800px;
							padding: 24px 30px;
							box-sizing: border-box;
							font-size: 16px;
							line-height: 1.8;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							text-align: justify;
							white-space: pre-wrap; // 保留换行格式
						}

						.content-en {
							// border-right: 1px solid rgba(234, 236, 238, 1); // 中间分隔线
						}
					}
				}
			}
		}
	}
}
</style>