<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row :gutter="24">
				<el-col :span="4">
					<el-collapse v-model="activeNames">
						<el-collapse-item title="汇总" name="1">
							<div v-for="(item, index) in infoList" :key="index">
								{{ item }}
							</div>
						</el-collapse-item>
					</el-collapse>
				</el-col>

				<el-col :span="20">
					<el-tabs v-model="tabsActiveName" @tab-click="handleClick">
						<el-tab-pane name="1" label="学历"></el-tab-pane>
						<el-tab-pane name="2" label="职称"></el-tab-pane>
						<el-tab-pane name="3" label="职业资格"></el-tab-pane>
						<el-tab-pane name="4" label="教师资格"></el-tab-pane>
					</el-tabs>

					<el-table :data="tableData" show-summary style="height: 800px; overflow-y: auto" border>
						<el-table-column prop="deptName" label="部门/资质(人数)" min-width="150" align="center" />

						<el-table-column v-for="(item, index) in tableHead" :key="index" :prop="item" :label="item" min-width="120" align="center">
							<template #default="scope">
								{{ scope.row[item] ? scope.row[item] : 0 }}
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { countInfo } from '/@/api/professional/professionaluser/professionalteacheracademicrelation';
import { titleCountInfo } from '/@/api/professional/professionaluser/professionaltitlerelation';
import { quaCountInfo } from '/@/api/professional/professionaluser/professionalqualificationrelation';
import { cerCountInfo } from '/@/api/professional/professionaluser/professionalteachercertificaterelation';

const activeNames = ref(['1']);
const tabsActiveName = ref('1');
const tableData = ref<any[]>([]);
const tableHead = ref<string[]>([]);
const infoList = ref<string[]>([]);

const init = async () => {
	try {
		const res = await countInfo();
		tableData.value = res.data.data.tableData || [];
		tableHead.value = res.data.data.tableHead || [];
		infoList.value = res.data.data.infoList || [];
	} catch (error) {
		console.error('Failed to load data:', error);
	}
};

const handleClick = (tab: any) => {
	tableData.value = [];
	tableHead.value = [];
	infoList.value = [];

	if (tab.name === '1') {
		init();
	} else if (tab.name === '2') {
		titleCountInfo().then((res) => {
			tableData.value = res.data.data.tableData || [];
			tableHead.value = res.data.data.tableHead || [];
			infoList.value = res.data.data.infoList || [];
		});
	} else if (tab.name === '3') {
		quaCountInfo().then((res) => {
			tableData.value = res.data.data.tableData || [];
			tableHead.value = res.data.data.tableHead || [];
			infoList.value = res.data.data.infoList || [];
		});
	} else if (tab.name === '4') {
		cerCountInfo().then((res) => {
			tableData.value = res.data.data.tableData || [];
			tableHead.value = res.data.data.tableHead || [];
			infoList.value = res.data.data.infoList || [];
		});
	}
};

onMounted(() => {
	init();
});
</script>

<style scoped lang="scss"></style>
