<template>
	<div class="page-container">
		<Header />
		<!-- 导航标签区域 -->
		<div class="nav-section">
			<div class="tabs">
				<div :class="['tab-item', { active: activeTab === '制裁概况' }]" @click="setActiveTab('制裁概况')">制裁概况</div>
				<div :class="['tab-item', { active: activeTab === '深度挖掘' }]" @click="setActiveTab('深度挖掘')">深度挖掘</div>
				<div :class="['tab-item', { active: activeTab === '影响分析' }]" @click="setActiveTab('影响分析')">影响分析</div>
			</div>
			<div class="action-buttons">
				<el-button>法案原文</el-button>
				<el-button type="primary">分析报告</el-button>
			</div>
		</div>

		<!-- 内容区域 -->
		<div class="content-section">
			<!-- <div class="content-placeholder">
				<el-icon><document /></el-icon>
				<p>这里是制裁概况的内容区域</p>
				<p>请选择上方标签查看不同分析内容</p>
			</div> -->
			<Survey v-if="activeTab === '制裁概况'" />
			<DepthMine v-if="activeTab === '深度挖掘'" />
			<ImpactAnalysis v-if="activeTab === '影响分析'" />
		</div>

		<div class="left-absolute">
			<el-image :src="Left1" alt="" />
			<el-image :src="Left2" alt="" />
			<el-image :src="Left3" alt="" />
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import Header from "./header.vue";
import Survey from "./content/survey.vue";
import DepthMine from "./content/depthMine.vue";
import ImpactAnalysis from "./content/impactAnalysis.vue";

import Left1 from "@/assets/images/left-1.png";
import Left2 from "@/assets/images/left-2.png";
import Left3 from "@/assets/images/left-3.png";

const activeTab = ref("制裁概况");
const setActiveTab = tabName => {
	activeTab.value = tabName;
};
</script>

<style scoped lang="scss">
.page-container {
	position: relative;
	margin: 0px auto;
	background-color: rgba(247, 248, 249, 1);
}
.nav-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* padding: 16px 24px; */
	padding-left: 6%;
	padding-right: 6%;
	background-color: #fff;
	border-bottom: 1px solid #ebeef5;
}

.tabs {
	display: flex;
	gap: 0;
}

.tab-item {
	width: 120px;
	height: 40px;
	text-align: center;
	line-height: 30px;
	// padding: 12px 24px;
	font-size: 18px;
	color: #606266;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	transition: all 0.3s;
	box-sizing: border-box;
}

// .tab-item.active {
// 	color: #409eff;
// 	border-bottom-color: #409eff;
// 	background-color: rgba(64, 158, 255, 0.1);
// }

.tab-item.active {
	color: var(--color-main-active);
	font-family: Microsoft YaHei;
	font-size: 18px;
	font-weight: 700;
	line-height: 30px;
	border-bottom: 3px solid var(--color-main-active);
}

.tab-item:hover {
	color: var(--color-main-active);
}

.action-buttons {
	display: flex;
	gap: 12px;
}

.content-section {
	padding: 24px;
	min-height: 400px;
}

.content-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 300px;
	color: #909399;
}

.content-placeholder .el-icon {
	font-size: 48px;
	margin-bottom: 16px;
	color: #dcdfe6;
}

.content-placeholder p {
	font-size: 16px;
	margin-top: 8px;
}

@media (max-width: 768px) {
	.bill-info {
		flex-direction: column;
		align-items: flex-start;
	}

	.date-author {
		align-items: flex-start;
		margin-top: 12px;
	}

	.nav-section {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.tabs {
		width: 100%;
		overflow-x: auto;
	}
}

.left-absolute {
	position: fixed;
	left: 0;
	top: 60%;
	// width: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	background-color: #fff;
	border-radius: 10px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding: 16px 12px;
	box-shadow: 0 0 15px 0 rgba(60, 87, 126, 0.2);
	div {
		width: 17px;
		height: 18px;
	}
}

</style>
