<template>
	<div class="layout-container">
		<!-- 导航菜单 -->
		<div class="layout-main">
			<div class="header-main">
				<div class="layout-main-header">
					<div class="layout-main-header-container">
						<div class="layout-main-header-left-box">
							<div class="left-box-top">
								<div class="icon">
									<img :src="summaryInfo.imageUrl || USALogo" 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>
							<div class="left-box-bottom">
								<div class="left-box-bottom-item" :class="{ leftBoxBottomItemActive: activeTitle === item.name }"
									v-for="(item, index) in mainHeaderBtnList" :key="index" @click="handleClickMainHeaderBtn(item)">
									<div class="icon">
										<img v-if="activeTitle === item.name" :src="item.activeIcon" alt="" />
										<img v-else :src="item.icon" alt="" />
									</div>
									<div class="name" :class="{ nameActive: activeTitle === item.name }">
										{{ item.name }}
									</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 class="right-box-bottom">
								<div class="btn" @click="handleShowReport">
									<div class="icon">
										<img src="./assets/icons/report-icon.png" alt="" />
									</div>
									<div class="text">{{ "政令原文" }}</div>
								</div>
								<!-- <div class="btn" @click="handleToInstitution">
									<div class="icon">
										<img src="./assets/icons/link-icon.png" alt="" />
									</div>
									<div class="text">{{ "查看官网" }}</div>
								</div> -->
								<div class="btn-active" @click="handleAnalysisClick">
									<div class="icon-active">
										<img src="./assets/icons/edit-icon.png" alt="" />
									</div>
									<div class="text-active">{{ "分析报告" }}</div>
								</div>
								<!-- <el-button type="plain" size="large" icon="Search" @click="handleShowReport">政令原文</el-button>
								<el-button type="primary" size="large" icon="EditPen">分析报告</el-button> -->
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layout-main-center">
				<router-view />
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import { getDecreeSummary } from "@/api/decree/introduction";

import icon1 from "./assets/icons/icon1.svg";
import icon1Active from "./assets/icons/icon1_active.svg";
import icon2 from "./assets/icons/icon2.svg";
import icon2Active from "./assets/icons/icon2_active.svg";
import icon3 from "./assets/icons/icon3.svg";
import icon3Active from "./assets/icons/icon3_active.svg";
import USALogo from "./assets/images/USA-logo.png";

const route = useRoute();

const decreeId = ref(route.query.id);

// const activeName = ref("分析报告");
// const handleSwitchActiveName = name => {
// 	activeName.value = name;
// };

// const curBill = ref("公法（2025年7月4日）");
// const billList = ref([
// 	{
// 		label: "公法（2025年7月4日）",
// 		value: "公法（2025年7月4日）"
// 	},
// 	{
// 		label: "公法（2025年7月2日）",
// 		value: "公法（2025年7月2日）"
// 	}
// ]);

const mainHeaderBtnList = ref([
	{
		icon: icon1,
		activeIcon: icon1Active,
		name: "政令概况",
		path: "/decreeLayout/overview"
	},
	{
		icon: icon2,
		activeIcon: icon2Active,
		name: "深度挖掘",
		path: "/decreeLayout/deepDig"
	},
	{
		icon: icon3,
		activeIcon: icon3Active,
		name: "影响分析",
		path: "/decreeLayout/influence"
	},
]);

const activeTitle = ref("政令概况");
const handleClickMainHeaderBtn = item => {
	activeTitle.value = item.name;
	router.push({
		path: item.path,
		query: {
			id: decreeId.value
		}
	});
};

// 获取全局信息
const summaryInfo = ref({});
let pageTitle = "科技政令主页"
const handleGetSummary = async () => {
	try {
		const res = await getDecreeSummary({ id: route.query.id });
		console.log("全局信息", res);
		if (res.code === 200 && res.data) {
			summaryInfo.value = res.data;
			pageTitle = res.data.name || '科技政令主页';
		}
	} catch (error) {}
	document.title = pageTitle;
};

const handleShowReport = () => {
	const curRoute = router.resolve({
		path: "/decree/decreeOriginal",
		query: {
			id: route.query.id
		}
	});
	window.open(curRoute.href, "_blank");
	// router.push({
	// 	path: "/decree/decreeOriginal",
	// 	query: {
	// 		id: route.query.id
	// 	}
	// })
};

const handleToInstitution = () => {
	// const curRoute = router.resolve({
	// 	path: "/institution",
	// 	query: {
	// 		id: route.query.id
	// 	}
	// });
	// window.open(curRoute.href, "_blank");
};

const handleAnalysisClick = () => {
	router.push({
		path: "/writtingAsstaint",
		query: {
			topic: "政令",
			fileId: route.query.id
		}
	});
};

onMounted(() => {
	handleGetSummary();
	if (route.path === "/decreeLayout/overview/introduction" || route.path === "/decreeLayout/overview/background" || route.path === "/decreeLayout/overview/measures") {
		activeTitle.value = "政令概况";
	} else if (route.path === "/decreeLayout/deepDig") {
		activeTitle.value = "深度挖掘";
	} else if (route.path === "/decreeLayout/influence") {
		activeTitle.value = "影响分析";
	}
});
</script>

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

	.report {
		padding: 10px 150px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 999999;
		width: 100%;
		height: 100%;
		background: #f7f8f9;

		.report-header {
			width: 100%;
			height: 50px;
			color: rgba(59, 65, 75, 1);
			font-family: Microsoft YaHei;
			font-style: Bold;
			font-size: 20px;
			font-weight: 700;
			line-height: 50px;
			letter-spacing: 0px;
			text-align: left;
			padding-left: 30px;
			border-bottom: 1px solid rgba(234, 236, 238, 1);
		}

		.report-main {
			display: flex;
			height: calc(100% - 100px);
			justify-content: space-between;

			.left {
				width: 800px;

				.noContent {
					height: 100px;
					line-height: 100px;
					text-align: center;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-style: Regular;
					font-size: 20px;
					font-weight: 400;
				}
			}

			.right {
				width: 800px;

				.noContent {
					height: 100px;
					line-height: 100px;
					text-align: center;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-style: Regular;
					font-size: 20px;
					font-weight: 400;
				}
			}
		}
	}

	.layout-main {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.header-main {
			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;
			height: 137px;
			margin: 0 auto;
			background: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: space-between;
			position: sticky;
			top: 0;

			// z-index: 100;
			.layout-main-header-container {
				width: 1600px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.layout-main-header-left-box {
				width: 20px;
				flex: auto;
				margin-top: 12px;

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

					.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;
							}
						}
					}
				}

				.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 {
				.right-box-top {
					white-space: nowrap;
					padding-top: 11px;

					.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 {
			height: 20px;
			flex: auto;
			background-color: #f7f8f9;
		}
	}
}
</style>