<template>
	<div class="page-box">
		<div class="page-top">
			<div class="head-box">
				<div class="head-icon">
					<img :src="curSurvey.image" alt="" />
				</div>
				<div class="head-info">
					<div class="head-name one-line-ellipsis">{{ curSurvey.title }}</div>
					<div class="head-text">{{ curSurvey.time }}</div>
				</div>
				<div :class="`item-tag tag-${curSurvey.name}`">{{ curSurvey.name }}调查</div>
			</div>
			<div class="page-tabs">
				<div :class="['tab-item', {'tab-active': activeName==item.name}]" v-for="(item, index) in tabList" :key="index" @click="handleClickBtn(item)">
					<div class="icon">
						<img :src="item.activeIcon" alt="" v-if="activeName==item.name" />
						<img :src="item.icon" alt="" v-else />
					</div>
					<div class="text" :class="{ textActive: activeName==item.name }">
						{{ item.name }}
					</div>
				</div>
				<div style="width:20px; flex:auto;"></div>
				<div class="head-button">
					<div class="button-icon">
						<img src="./assets/images/btn-icon2.png" alt="" />
					</div>
					<div class="button-text">{{ "分析报告" }}</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 NavIcon3 from "./assets/images/nav-icon2.png";
import NavIcon3Active from "./assets/images/nav-icon2-active.png";
import Img337 from "./assets/images/337.png";
import Img232 from "./assets/images/232.png";
import Img301 from "./assets/images/301.png";

import { useRoute } from "vue-router";
const route = useRoute();
const tabList = ref([
	{
		name: "调查概况",
		icon: NavIcon1,
		activeIcon: NavIcon1Active,
		path: "/marketSingleCaseLayout/overview"
	},
	{
		name: "影响分析",
		icon: NavIcon3,
		activeIcon: NavIcon3Active,
		path: "/marketSingleCaseLayout/deepdig"
	}
]);

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

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

const activeName = ref("调查案件");
const handleClickBtn = item => {
	activeName.value = item.name;
	router.push({
		path: item.path,
		query: { ...route.query }
	});
};

onMounted(() => {
	console.log('route', route);
	if (route.path === "/marketSingleCaseLayout/deepdig") {
		activeName.value = "影响分析";
	} else {
		activeName.value = "调查概况";
	}
});
</script>

<style lang="scss" scoped>
.page-box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 1);
	.page-top {
		width: 1600px;
		margin: 0 auto;
		box-sizing: border-box;
		.head-box {
			width: 100%;
			display: flex;
			padding: 30px 0 20px;
			.head-icon {
				width: 54px;
				height: 54px;
				font-size: 0px;
				margin-right: 16px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.head-info {
				width: 20px;
				flex: auto;
				.head-name {
					width: 100%;
					height: 26px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: bold;
					line-height: 26px;
				}
				.head-text {
					width: 100%;
					height: 24px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
				}
			}
			.item-tag {
        height: 24px;
        line-height: 24px;
        padding: 0 8px;
        border-radius: 4px;
        font-weight: bold;
        font-size: 16px;
				letter-spacing: 2px;
      }
      .tag-337 {
        border: 1px solid #91caff;
        background: #e6f4ff;
        color: #055fc2;
      }
      .tag-232 {
        border: 1px solid #b37feb;
        background: #f9f0ff;
        color: #722ed1;
      }
      .tag-301 {
        border: 1px solid #ffd591;
        background: #fff7e6;
        color: #fa8c16;
      }
			.head-button {
				margin-left: 100px;
				width: 120px;
				height: 36px;
				border-radius: 6px;
				background: var(--color-main-active);
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				.button-icon {
					width: 16px;
					height: 16px;
					font-size: 0;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.button-text {
					margin-left: 8px;
					color: rgba(255, 255, 255, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
				}
			}
		}
		.page-tabs {
			display: flex;
			align-items: flex-start;
			.tab-item {
				height: 40px;
				display: flex;
				align-items: center;
				gap: 4px;
				cursor: pointer;
				margin-right: 24px;
				.icon {
					width: 16px;
					height: 16px;
					font-size: 0;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.text {
					height: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 18px;
					font-weight: 400;
					line-height: 24px;
				}
				.textActive {
					color: var(--color-main-active);
					font-weight: 700;
				}
			}
			.tab-active {
				position: relative;
				&::after {
					content: "";
					position: absolute;
					bottom: 0px;
					left: 0;
					width: 100%;
					height: 3px;
					background-color: var(--color-main-active);
				}
			}

			.head-button {
				position: relative;
				top: -5px;
				width: 120px;
				height: 36px;
				border-radius: 6px;
				background: var(--color-main-active);
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				.button-icon {
					width: 16px;
					height: 16px;
					font-size: 0;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.button-text {
					margin-left: 8px;
					color: rgba(255, 255, 255, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
				}
			}
		}
	}
	.main {
		border-top: 1px solid rgba(230, 231, 232, 1);
		background-color: #f7f8f9;
		width: 100%;
		height: 20px;
		flex: auto;
	}
}
</style>