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