<template>
	<div class="wrapper">
		<div class="header">
			<div class="header-top">
				<div class="header-top-left">{{ curSurvey.name }}</div>
				<div class="header-top-right">
					<div class="title">
						{{ curSurvey.title }}
					</div>
					<div class="time">{{ curSurvey.time }}</div>
				</div>
			</div>
			<div class="header-footer">
				<div class="nav-box">
					<div
						class="nav-item"
						:class="{ navItemActive: item.isActive }"
						v-for="(item, index) in navList"
						v-show="item.isShow"
						:key="index"
						@click="handleClickNav(index)"
					>
						<div class="icon">
							<img v-if="!item.isActive" :src="item.icon" alt="" />
							<img v-else :src="item.activeIcon" alt="" />
						</div>
						<div class="text" :class="{ textActive: item.isActive }">
							{{ item.name }}
						</div>
					</div>
				</div>
				<div class="btn-box">
					<!-- <div class="btn">
						<div class="icon">
							<img src="./assets/images/btn-icon1.png" alt="" />
						</div>
						<div class="text">{{ "查看官网" }}</div>
					</div> -->
					<div class="btn1">
						<div class="icon">
							<img src="./assets/images/btn-icon2.png" alt="" />
						</div>
						<div class="text">{{ "分析报告" }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<router-view />
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import router from "@/router";
import NavIcon1 from "./assets/images/nav-icon1.png";
import NavIcon1Active from "./assets/images/nav-icon1-active.png";
import NavIcon2 from "./assets/images/nav-icon2.png";
import NavIcon2Active from "./assets/images/nav-icon2-active.png";
import NavIcon3 from "./assets/images/nav-icon2.png";
import NavIcon3Active from "./assets/images/nav-icon2-active.png";

import { useRoute } from "vue-router";
const route = useRoute();
const navList = ref([
	{
		name: "调查概况",
		icon: NavIcon1,
		activeIcon: NavIcon1Active,
		isActive: true,
		isShow: true,
		path: "/marketSingleCaseLayout/overview"
	},
	// {
	// 	name: "报告解析",
	// 	icon: NavIcon2,
	// 	activeIcon: NavIcon2Active,
	// 	isActive: false,
	// 	isShow: route.query.id === "337",
	// 	path: "/marketSingleCaseLayout/deepdig"
	// },
	{
		name: "影响分析",
		icon: NavIcon3,
		activeIcon: NavIcon3Active,
		isActive: false,
		isShow: true,
		path: "/marketSingleCaseLayout/deepdig"
	}
]);

const handleClickNav = index => {
	navList.value.forEach(item => {
		item.isActive = false;
	});
	navList.value[index].isActive = true;
	router.push({
		path: navList.value[index].path,
		query: {
			...route.query
		}
	});
};

const surveyList = ref([
	{
		title: "337-TA-1443：外国制造的半导体器件及其下游产品和组件",
		time: "2025年7月18日",
		name: "337"
	},
	{
		title: "231-TA-1225：进口药及进口原材料的调查",
		time: "2021年9月21日",
		name: "232"
	},
	{
		title: "美国贸易代表第301条关于中国针对海事、物流和造船业以争取主导地位的行动",
		time: "2025年4月17日",
		name: "301"
	}
]);

// const curSurvey = ref(	{
// 		title: "337-TA-1443：外国制造的半导体器件及其下游产品和组件",
// 		time: '2025年7月18日',
// 		name: '337'
// 	});

const curSurvey = computed(() => {
	let survey;
	if (route.query.id === "232") {
		survey = surveyList.value[1];
	} else if (route.query.id === "301") {
		survey = surveyList.value[2];
	} else {
		survey = surveyList.value[0];
	}
	return survey;
});

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

<style lang="scss" scoped>
.wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
	.header {
		width: 1920px;
		height: 148px;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(230, 231, 232, 1);
		background: rgba(255, 255, 255, 1);
		padding: 24px 160px 0;
		position: sticky;
		top: 0;
		z-index: 99999999;
		.header-top {
			display: flex;
			.header-top-left {
				width: 48px;
				height: 48px;
				box-sizing: border-box;
				border: 1px solid rgba(145, 202, 255, 1);
				border-radius: 4px;
				background: rgba(230, 244, 255, 1);
				color: var(--color-main-active);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 700;
				text-align: center;
				line-height: 48px;
			}
			.header-top-right {
				margin-left: 20px;
				.title {
					height: 26px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: 700;
					line-height: 26px;
				}
				.time {
					height: 24px;
					color: rgba(132, 136, 142, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
				}
			}
		}
		.header-footer {
			display: flex;
			justify-content: space-between;
			margin-top: 24px;
			.nav-box {
				height: 48px;
				display: flex;
				.navItemActive {
					border-bottom: 3px solid var(--color-main-active);
				}
				.nav-item {
					display: flex;
					width: 95px;
					margin-right: 20px;
					cursor: pointer;
					.icon {
						width: 16px;
						height: 16px;
						margin-top: 16px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.text {
						width: 72px;
						height: 24px;
						margin-top: 12px;
						margin-left: 4px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 18px;
						font-weight: 400;
						line-height: 24px;
					}
					.textActive {
						font-size: 18px;
						font-weight: 700;
						color: var(--color-main-active);
					}
				}
			}
			.btn-box {
				height: 48px;
				display: flex;
				.btn {
					margin-top: 2px;
					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;
					cursor: pointer;
					.icon {
						width: 16px;
						height: 16px;
						margin-left: 16px;
						margin-top: 10px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.text {
						margin-left: 8px;
						margin-top: 7px;
						height: 22px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 22px;
					}
				}
				.btn1 {
					margin-left: 12px;
					margin-top: 2px;
					width: 120px;
					height: 36px;
					border-radius: 6px;
					background: var(--color-main-active);
					display: flex;
					cursor: pointer;
					.icon {
						width: 16px;
						height: 16px;
						margin-left: 16px;
						margin-top: 10px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.text {
						margin-left: 8px;
						margin-top: 7px;
						height: 22px;
						color: #fff;
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 22px;
					}
				}
			}
		}
	}
	.main {
		// height: 870px;
		// width: 1920px;
		// overflow-y: auto;
		background: rgba(247, 248, 249, 1);
	}
}
</style>