<template>
	<div class="industry-center-container">
		<!-- <div class="title">行业预警中心</div> -->
		<div class="industry-center-header">
			<div class="tab-container">
				<el-tabs v-model="activeTab" type="card" @tab-click="onTabClick">
					<el-tab-pane :label="item.label" :name="item.value" v-for="(item, i) in tabList" :key="i" />
				</el-tabs>
			</div>
			<el-select style="width: 230px;" v-model="yearValue" placeholder="请选择年份">
				<el-option v-for="item in yearList" :key="item" :label="item" :value="item" />
			</el-select>
			<el-button style="margin-left: 15px;" v-if="activeTab !== 'synthesis'" type="primary"
				@click="onDownLoad">下载预警信息</el-button>
			<el-button style="margin-left: 15px;" type="primary"
				@click="configShow">{{activeTab === 'synthesis' ? '配置' : '查看配置'}}</el-button>
		</div>
		<div class="industry-center-content">


			<div class="right-content">
				<ThresholdAndSpecial ref="thresholdAndSpecialRef"
					v-if="activeTab === 'threshold' || activeTab === 'special'" :yearValue="yearValue" />
				<Synthesis ref="synthesisRef" v-if="activeTab === 'synthesis'" :yearValue="yearValue" />
			</div>

		</div>
		<specialTable v-if="isShowSpecialTableTable" @close="isShowSpecialTableTable = false" />
		<ThresholdTable v-if="isShowThresholdTable" @close="isShowThresholdTable = false" />
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ThresholdAndSpecial from './tabsCom/ThresholdAndSpecial.vue'
import Synthesis from './tabsCom/Synthesis.vue'
import specialTable from './tabsCom/specialTable.vue'
import ThresholdTable from './tabsCom/ThresholdTable.vue'
const yearList = ref([])
const yearValue = ref(new Date().getFullYear())
const activeTab = ref('synthesis')
const thresholdAndSpecialRef = ref()
const synthesisRef = ref()
const isShowSpecialTableTable = ref(false)
const isShowThresholdTable = ref(false)
const tabList = ref([
	{ label: '综合预警', value: 'synthesis' },
	{ label: '阈值预警', value: 'threshold' },
	{ label: '专项预警', value: 'special' },
])

const onTabClick = (tab) => {
	console.log(tab)
}
const onDownLoad = () => {
	console.log('下载。。')
	if (typeof thresholdAndSpecialRef.value?.onDownLoad === 'function') {
		thresholdAndSpecialRef.value.onDownLoad()
	}
}
const configShow = () => {
	console.log('配置。。')
	if (activeTab.value === 'special') {
		isShowSpecialTableTable.value = true
	}
	if (activeTab.value === 'threshold') {
		isShowThresholdTable.value = true
	}
}
onMounted(() => {
	yearList.value = Array.from({ length: 10 }, (_, index) => new Date().getFullYear() - index)
})
</script>

<style lang="scss" scoped>
@import "@/views/dutyBook/jgryandzz/talentPool/tabContainer.scss";

/**tab-container.部分样式在 上面tabContainer.scss 文件中 */
.tab-container {
	margin-left: 5px;
}

.industry-center-container {
	width: 100%;
	height: calc(100vh - 140px);
}

.industry-center-header {
	display: flex;
	// padding: 5px 10px;
	align-items: center;
	background-color: #fff;
}

.industry-center-content {

	display: flex;
	width: 100%;
	height: calc(100vh - 182px);
	// margin-top: 10px;
}

.left-tab {
	width: 70px;

	.left-tab-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 160px;
		cursor: pointer;
		background-color: #fff;
		color: #000;
		border-bottom: 1px solid var(--el-table-border-color);

		.left-tab-item-img {
			width: 50px;
			height: 50px;
			margin-bottom: 10px;
		}

		&.active {
			background-color: var(--el-color-primary);
		}
	}
}

.right-content {
	// width: calc(100% - 70px);
	height: 100%;

}
</style>
