<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 one-line-ellipsis">{{ curSurvey.desc }}</div>
				</div>
				<!-- <div class="head-button">
					<div class="button-icon">
						<img src="./assets/images/button-icon.png" alt="" />
					</div>
					<div class="button-text">{{ "查看官网" }}</div>
				</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>
		</div>
		<div class="main">
			<router-view />
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import router from "@/router/index";
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 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: icon2,
		activeIcon: icon2Active,
		path: "/marketAccessLayout/case"
	},
	{
		name: "数据统计",
		icon: icon1,
		activeIcon: icon1Active,
		path: "/marketAccessLayout/overview"
	}
]);

const curSurvey = computed(() => {
	if (route.query.id === "301") {
		return {
			title: "301调查",
			desc: '由美国贸易代表办公室依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"发起的调查',
			image: Img301,
		};
	} else if (route.query.id === "232") {
		return {
			title: "232调查",
			desc: "依据《1962年贸易扩展法》第232条款，授权美国商务部对“特定进口产品是否威胁或损害美国国家安全”而开展的全面调查。",
			image: Img232,
		};
	} else {
		return {
			title: "337调查",
			desc: '美国国际贸易委员会根据《1930年关税法》第337节及相关修正案进行的调查，主要针对进口贸易中的知识产权侵权行为以及其他不公平竞争行为',
			image: Img337,
		};
	}
});

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

onMounted(() => {
	if (route.path === "/marketAccessLayout/overview") {
		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;
				}
			}
			.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);
				}
			}
		}
	}
	.main {
		border-top: 1px solid rgba(230, 231, 232, 1);
		background-color: #f7f8f9;
		width: 100%;
		height: 20px;
		flex: auto;
	}
}
</style>