<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>
</template>

<script setup>
import { ref } from "vue";
import { Search, Plus } from "@element-plus/icons-vue";
import Header from "./header.vue";
import Survey from "./content/survey.vue";
// import DepthMine from "./content/depthMine.vue";
// import ImpactAnalysis from "./content/impactAnalysis.vue";

const activeTab = ref("简介概览");
const setActiveTab = tabName => {
	activeTab.value = tabName;
};
</script>

<style scoped>
.page-container {
	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 {
	padding: 12px 24px;
	font-size: 14px;
	color: #606266;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all 0.3s;
}

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

.tab-item:hover {
	color: #409eff;
}

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

.content-section {
	padding: 24px;
	padding-left: 6%;
	padding-right: 6%;
	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;
	}
}
</style>
