<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="./assets/images/USA-logo.png" alt="" />
						</div>
						<div class="info">
							<div class="info-box1">{{ "H.R.1(119th)-大而美法案" }}</div>
							<div class="info-box2">
								{{ "第119届美国国会众议院第1号法案 One Big Beautiful Bill Act" }}
							</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">{{ "2025年7月" }}</div>
						<div class="name">{{ "乔迪·阿灵顿（Jodey Arrington）​​ " }}</div>
					</div>
					<div class="right-box-bottom">
						<!-- <el-button type="plain" size="large" icon="Search" @click="handleSwitchActiveName('法案原文')"
							>法案原文</el-button
						>
						<el-button type="primary" size="large" icon="EditPen">分析报告</el-button> -->

						<div class="btn1" @click="handleSwitchActiveName('法案原文')">
							<div class="icon">
								<img src="./assets/icons/btn-icon1.png" alt="" />
							</div>
							<div class="text">{{ "法案原文" }}</div>
						</div>
						<!-- <div class="btn2">
							<div class="icon">
								<img src="./assets/icons/btn-icon2.png" alt="" />
							</div>
							<div class="text">{{ "查看官网" }}</div>
						</div> -->
						<div class="btn3">
							<div class="icon">
								<img src="./assets/icons/btn-icon3.png" alt="" />
							</div>
							<div class="text">{{ "分析报告" }}</div>
						</div>
						<div class="btn4">
							<div class="icon">
								<img src="./assets/icons/btn-icon4.png" alt="" />
							</div>
							<div class="text">{{ "特别重大风险" }}</div>
							<div class="icon1">
								<img src="./assets/icons/btn-icon5.png" alt="" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layout-main-center">
				<router-view />
			</div>
		</div>
		<div class="layout-report-box" v-if="activeName === '法案原文'">
			<div class="report-close" @click="handleSwitchActiveName('分析报告')">
				<img src="./assets/images/report-close-icon.png" alt="" />
			</div>
			<div class="report-main">
				<div class="report-header">
					<div class="report-header-left">
						<div class="text">法案版本：</div>
						<div class="select-box">
							<el-select v-model="curBill" placeholder="选择法案" style="width: 240px">
								<el-option v-for="item in billList" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
					</div>
					<div class="report-header-right">
						<div class="btn">
							<div class="icon">
								<img src="./assets/images/report-header-icon1.png" alt="" />
							</div>
							<div class="text">翻译</div>
						</div>
						<div class="btn">
							<div class="icon">
								<img src="./assets/images/report-header-icon2.png" alt="" />
							</div>
							<div class="text">下载</div>
						</div>
						<div class="btn">
							<div class="icon">
								<img src="./assets/images/report-header-icon3.png" alt="" />
							</div>
							<div class="text">对比</div>
						</div>
						<div class="btn">
							<div class="icon">
								<img src="./assets/images/report-header-icon4.png" alt="" />
							</div>
							<div class="text">查找</div>
						</div>
					</div>
				</div>
				<div class="report-content">
					<div class="content-left">
						<img src="./assets/images/report1.png" alt="" />
					</div>
					<div class="content-right">
						<img src="./assets/images/report2.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import router from "@/router";

import icon1 from "./assets/icons/icon1.png";
import icon1Active from "./assets/icons/icon1_active.png";
import icon2 from "./assets/icons/icon2.png";
import icon2Active from "./assets/icons/icon2_active.png";
import icon3 from "./assets/icons/icon3.png";
import icon3Active from "./assets/icons/icon3_active.png";
import icon4 from "./assets/icons/icon4.png";
import icon4Active from "./assets/icons/icon4_active.png";

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: "/billLayout/bill"
	},
	{
		icon: icon2,
		activeIcon: icon2Active,
		name: "深度挖掘",
		path: "/billLayout/deepDig"
	},
	{
		icon: icon3,
		activeIcon: icon3Active,
		name: "影响分析",
		path: "/billLayout/influence"
	},
	{
		icon: icon4,
		activeIcon: icon4Active,
		name: "相关情况",
		path: "/billLayout/relevantCircumstance"
	}
]);

const activeTitle = ref("法案概况");

const handleClickMainHeaderBtn = item => {
	activeTitle.value = item.name;
	window.sessionStorage.setItem("activeTitle", activeTitle.value);
	router.push(item.path);
};

onMounted(() => {
	if (window.sessionStorage.getItem("activeTitle")) {
		activeTitle.value = window.sessionStorage.getItem("activeTitle");
	}
});
</script>

<style lang="scss" scoped>
.layout-container {
	width: 1920px;
	height: 1016px;
	background: rgba(249, 250, 252, 1);
	position: relative;
	.layout-header {
		width: 1920px;
		height: 64px;
		// background: #0a121e;
		background: #fff;
		// border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
		// margin-bottom: 13px;
		display: flex;
		position: relative;
		z-index: 99;
		.layout-header-left {
			width: 480px;
			display: flex;
			.logo-box {
				width: 36px;
				height: 36px;
				margin: 14px;

				img {
					width: 100%;
					height: 100%;
					border-radius: 6px;
				}
			}
			.title-box {
				height: 64px;
				width: 350px;
				margin: 0 5px;
				color: #eee;
				line-height: 64px;
				font-size: 20px;
				font-weight: bold;
				color: rgba(10, 18, 30, 1);
				font-family: Microsoft YaHei;
				font-size: 22px;
				font-weight: 700;
				text-align: left;
			}
		}
		.layout-header-center {
			width: 700px;
			display: flex;
			justify-content: space-between;
			margin-left: 200px;
			.nav-item {
				border-radius: 5px;
				cursor: pointer;
				display: flex;
				&:hover {
					background: rgba(255, 255, 255, 0.2);
				}
				.nav-icon-box {
					width: 25px;
					height: 25px;
					margin: 22px 0 20px 5px;
					.nav-icon {
						width: 20px;
						height: 20px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.nav-icon-active {
						width: 20px;
						height: 20px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
				.name-box {
					margin: 18px 5px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					color: rgba(59, 65, 75, 1);
					letter-spacing: 2px;
					font-size: 18px;
				}
				// .nameActive {
				//   color: #ea9518;
				//   font-weight: bold;
				// }
			}
			.navItemActive {
				// background: #295dab;
				// border-bottom: 4px solid #ea9518;
				// &:hover {
				//   background: #295dab;
				//   border-bottom: 4px solid #ea9518;
				// }
			}
		}
		.layout-header-right {
			flex: 1;
			display: flex;
			justify-content: flex-end;

			.nav-search {
				width: 22px;
				height: 22px;
				margin: 21px 0;
			}

			.nav-message {
				width: 22px;
				height: 22px;
				margin: 21px 30px;
			}

			.nav-usr {
				width: 110px;
				display: flex;
				height: 40px;
				margin: 12px 5px 12px 0;
				.usr-img {
					margin-top: 4px;
					height: 32px;
					width: 32px;
					background: rgba(255, 255, 255, 0.5);
					border-radius: 100%;
					box-sizing: border-box;
					padding: 4px;
					// img {
					//   width: 100%;
					//   height: 100%;
					// }
				}
				.usr-info {
					height: 40px;
					line-height: 40px;
					text-align: center;
					font-size: 14px;
					margin-left: 10px;
				}
			}
		}
	}
	.layout-main {
		width: 100%;
		height: calc(100% - 64px);
		.layout-main-header {
			height: 137px;
			background: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: space-between;
			.layout-main-header-left-box {
				width: 500px;
				margin-left: 160px;
				margin-top: 13px;
				.left-box-top {
					height: 64px;
					display: flex;
					.icon {
						width: 64px;
						height: 64px;
					}
					.info {
						margin-left: 9px;
						.info-box1 {
							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;
						}
					}
				}
				.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;
						// &:hover{
						//   .name {
						//     color: rgba(22, 119, 255, 1);
						//   }
						// }
						.icon {
							margin-top: 4px;
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.name {
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 400;
							line-height: 22px;
							letter-spacing: 0px;
							text-align: left;
							margin-left: 3px;
						}
						.nameActive {
							color: rgba(20, 89, 187, 1);
							font-weight: 700;
						}
					}
					.leftBoxBottomItemActive {
						border-bottom: 3px solid rgba(20, 89, 187, 1);
					}
				}
			}
			.layout-main-header-right-box {
				width: 600px;
				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;
					display: flex;
					justify-content: flex-end;
					gap: 8px;
					.btn1 {
						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;
						align-items: center;
						gap: 8px;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
					}
					.btn2 {
						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;
						align-items: center;
						gap: 8px;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
					}
					.btn3 {
						width: 120px;
						height: 36px;
						border-radius: 6px;
						background: rgba(5, 95, 194, 1);
						display: flex;
						justify-content: center;
						align-items: center;
						gap: 8px;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							height: 24px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
					}
					.btn4 {
						width: 180px;
						height: 36px;
						box-sizing: border-box;
						border: 1px solid rgba(255, 163, 158, 1);
						border-radius: 4px;
						background: rgba(255, 241, 240, 1);
						display: flex;
						justify-content: center;
						align-items: center;
						gap: 10px;
						.icon {
							width: 20px;
							height: 20px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							height: 24px;
							color: rgba(206, 79, 81, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
						}
						.icon1 {
							width: 20px;
							height: 20px;
							img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}
		.layout-main-center {
			height: calc(100% - 137px);
		}
	}
	.layout-report-box {
		position: absolute;
		z-index: 9999;
		top: 154px;
		left: 0;
		width: 100%;
		height: 926px;
		background: rgba(248, 249, 250, 1);
		.report-close {
			position: absolute;
			top: 24px;
			right: 178px;
			width: 32px;
			height: 32px;
			cursor: pointer;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.report-main {
			width: 1600px;
			height: 926px;
			margin: 0 auto;
			background: #fff;
			box-sizing: border-box;
			padding: 0 69px;
			.report-header {
				height: 77px;
				border-bottom: 1px solid rgba(240, 242, 244, 1);
				display: flex;
				justify-content: space-between;
				.report-header-left {
					display: flex;
					.text {
						margin-top: 32px;
						width: 70px;
						height: 14px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 14px;
					}
					.select-box {
						margin-left: 8px;
						margin-top: 23px;
					}
				}
				.report-header-right {
					display: flex;
					margin-top: 24px;
					.btn {
						display: flex;
						width: 88px;
						height: 32px;
						margin-left: 8px;
						box-sizing: border-box;
						border: 1px solid rgba(230, 231, 232, 1);
						border-radius: 4px;
						background: rgba(255, 255, 255, 1);
						display: flex;
						justify-content: center;
						align-items: center;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							margin-left: 8px;
							height: 32px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 32px;
						}
					}
				}
			}
			.report-content {
				display: flex;
				margin-top: 35px;
				.content-left {
					width: 680px;
					height: 786px;
					// background: #eee;
					// overflow-y: auto;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.content-right {
					margin-left: 89px;
					width: 680px;
					height: 786px;
					// background: #eee;
					// overflow-y: auto;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>