<template>
	<div class="wrap">
		<div class="header">
			<div class="header-top">
				<div class="left">
					<div class="icon">
						<img :src="curSurvey.image" alt="" />
					</div>
					<div class="info">
						<div class="title">{{ curSurvey.title }}</div>
						<div class="content">
							{{ curSurvey.desc }}
						</div>
					</div>
				</div>
				<!-- <div class="right">
					<div class="icon">
						<img src="./assets/images/button-icon.png" alt="" />
					</div>
					<div class="text">{{ "查看官网" }}</div>
				</div> -->
			</div>
			<div class="header-footer">
				<div
					class="btn-item"
					:class="{ btnItemActive: activeBtnName === item.name }"
					v-for="(item, index) in btnList"
					:key="index"
					@click="handleClickBtn(item)"
				>
					<div class="icon">
						<img :src="item.acitveIcon" alt="" v-if="activeBtnName === item.name" />
						<img :src="item.icon" alt="" v-else />
					</div>
					<div class="text" :class="{ textActive: activeBtnName === 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 btnList = ref([
	{
		name: "调查案件",
		icon: icon2,
		acitveIcon: icon2Active,
		path: "/marketAccessLayout/case"
	},
	{
		name: "数据统计",
		icon: icon1,
		acitveIcon: 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 activeBtnName = ref("调查案件");

const handleClickBtn = item => {
	activeBtnName.value = item.name;
	router.push({
		path: item.path,
		query: {
			id: route.query.id
		}
	});
};

onMounted(() => {
	if (route.path === "/marketAccessLayout/overview") {
		activeBtnName.value = "数据统计";
	} else {
		activeBtnName.value = "调查案件";
	}
});
</script>

<style lang="scss" scoped>
.wrap {
	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);
		position: sticky;
		top: 0;
		z-index: 99999999;
		.header-top {
			display: flex;
			height: 100px;
			justify-content: space-between;
			.left {
				margin-left: 160px;
				margin-top: 24px;
				display: flex;

				.icon {
					width: 54px;
					height: 54px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.info {
					margin-left: 14px;
					margin-top: -1px;
					.title {
						height: 26px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 700;
						line-height: 26px;
					}
					.content {
						margin-top: 1px;
						height: 24px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
					}
				}
			}
			.right {
				margin-top: 24px;
				margin-right: 160px;
				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;
					position: relative;
					z-index: 99;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.text {
					margin-left: 8px;
					margin-top: 7px;
					height: 22px;
					color: rgba(255, 255, 255, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 22px;
				}
			}
		}
		.header-footer {
			height: 48px;
			margin-left: 160px;
			display: flex;
			gap: 24px;
			.btn-item {
				display: flex;
				gap: 4px;
				cursor: pointer;
				.icon {
					width: 16px;
					height: 16px;
					margin-top: 16px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.text {
					margin-left: 2px;
					margin-top: 12px;
					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;
				}
			}
			.btnItemActive {
				border-bottom: 3px solid var(--color-main-active);
			}
		}
	}
	.main {
		width: 1920px;
		height: 868px;
		background: #f7f8f9;
		overflow: hidden;
		overflow-y: auto;
	}
}
</style>