<template>
  <el-dialog 
    title="班级概况" 
    v-model="visible"
    :close-on-click-modal="false" 
    draggable
    width="1400px">
    <div v-loading="loading">
      <!-- 基本信息 -->
      <el-descriptions :column="3" border v-if="detailData" class="mb20">
        <el-descriptions-item label="班号">{{ detailData.classNo || '-' }}</el-descriptions-item>
        <el-descriptions-item label="班级名称">{{ detailData.className || '-' }}</el-descriptions-item>
        <el-descriptions-item label="班级规范名称">{{ detailData.classProName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="学院">{{ detailData.deptName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="班主任">{{ detailData.teacherRealName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="班主任电话">{{ detailData.teacherTel || '-' }}</el-descriptions-item>
        <el-descriptions-item label="入学年份">{{ detailData.grade || '-' }}</el-descriptions-item>
        <el-descriptions-item label="入学时间">{{ detailData.enterDate || '-' }}</el-descriptions-item>
        <el-descriptions-item label="班级状态">
          <span>{{ detailData.classStatus === '0' ? '正常' : detailData.classStatus === '1' ? '离校' : '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="班级人数/原始人数">
          {{ detailData.stuNum || 0 }}/{{ detailData.preStuNum || 0 }}
        </el-descriptions-item>
        <el-descriptions-item label="流失率">
          <span>{{ detailData.stuLoseRate ? `${detailData.stuLoseRate}%` : '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="联院">
          <span>{{ detailData.isUnion === 1 ? '是' : detailData.isUnion === 0 ? '否' : '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="门禁规则" :span="3">{{ detailData.ruleName || '-' }}</el-descriptions-item>
      </el-descriptions>

      <!-- 详细信息 - 使用 tabs 展示六个接口的数据 -->
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane label="班级荣誉" name="honor">
          <el-table :data="honorList" border style="width: 100%" v-loading="honorLoading">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="title" label="标题" show-overflow-tooltip />
            <el-table-column prop="author" label="作者" width="120" />
            <el-table-column prop="createTime" label="更新时间" width="120" />
            <el-table-column prop="belong" label="归档级别" width="120" />
          </el-table>
          <div v-if="honorList.length === 0 && !honorLoading" style="text-align: center; padding: 20px; color: #909399;">
            暂无数据
          </div>
        </el-tab-pane>

        <el-tab-pane label="班级宣传" name="publicity">
          <el-table :data="publicityList" border style="width: 100%" v-loading="publicityLoading">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="title" label="标题" show-overflow-tooltip />
            <el-table-column prop="author" label="作者" width="120" />
            <el-table-column prop="createTime" label="更新时间" width="120" />
            <el-table-column prop="belong" label="归档级别" width="120" />
            <el-table-column prop="website" label="网址" show-overflow-tooltip />
          </el-table>
          <div v-if="publicityList.length === 0 && !publicityLoading" style="text-align: center; padding: 20px; color: #909399;">
            暂无数据
          </div>
        </el-tab-pane>

        <el-tab-pane label="数据3" name="data3">
          <el-table :data="data3List" border style="width: 100%" v-loading="data3Loading">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="title" label="标题" show-overflow-tooltip />
            <el-table-column prop="createTime" label="更新时间" width="120" />
          </el-table>
          <div v-if="data3List.length === 0 && !data3Loading" style="text-align: center; padding: 20px; color: #909399;">
            暂无数据
          </div>
        </el-tab-pane>

        <el-tab-pane label="数据4" name="data4">
          <el-table :data="data4List" border style="width: 100%" v-loading="data4Loading">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="title" label="标题" show-overflow-tooltip />
            <el-table-column prop="createTime" label="更新时间" width="120" />
          </el-table>
          <div v-if="data4List.length === 0 && !data4Loading" style="text-align: center; padding: 20px; color: #909399;">
            暂无数据
          </div>
        </el-tab-pane>

        <el-tab-pane label="数据5" name="data5">
          <el-table :data="data5List" border style="width: 100%" v-loading="data5Loading">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="title" label="标题" show-overflow-tooltip />
            <el-table-column prop="createTime" label="更新时间" width="120" />
          </el-table>
          <div v-if="data5List.length === 0 && !data5Loading" style="text-align: center; padding: 20px; color: #909399;">
            暂无数据
          </div>
        </el-tab-pane>

        <el-tab-pane label="数据6" name="data6">
          <el-table :data="data6List" border style="width: 100%" v-loading="data6Loading">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="title" label="标题" show-overflow-tooltip />
            <el-table-column prop="createTime" label="更新时间" width="120" />
          </el-table>
          <div v-if="data6List.length === 0 && !data6Loading" style="text-align: center; padding: 20px; color: #909399;">
            暂无数据
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="BasicClassDetail">
import { ref, watch } from 'vue'
import { useMessage } from "/@/hooks/message";
import { queryClassHonorByClassCode } from '/@/api/stuwork/classhonor'
import { queryDataByClassCode } from '/@/api/stuwork/classpublicity'

// 定义变量内容
const visible = ref(false)
const loading = ref(false)
const detailData = ref<any>(null)
const activeTab = ref('honor')

// 六个接口的数据
const honorList = ref<any[]>([])
const honorLoading = ref(false)
const publicityList = ref<any[]>([])
const publicityLoading = ref(false)
const data3List = ref<any[]>([])
const data3Loading = ref(false)
const data4List = ref<any[]>([])
const data4Loading = ref(false)
const data5List = ref<any[]>([])
const data5Loading = ref(false)
const data6List = ref<any[]>([])
const data6Loading = ref(false)

// 打开弹窗
const openDialog = async (rowData: any) => {
  visible.value = true
  detailData.value = rowData || null
  
  // 如果有班级代码，加载六个接口的数据
  if (rowData?.classCode) {
    await loadAllData(rowData.classCode)
  }
}

// 加载所有六个接口的数据
const loadAllData = async (classCode: string) => {
  loading.value = true
  
  // 并行加载所有接口数据
  await Promise.all([
    loadHonorData(classCode),
    loadPublicityData(classCode),
    // TODO: 添加其他四个接口的加载
    // loadData3(classCode),
    // loadData4(classCode),
    // loadData5(classCode),
    // loadData6(classCode),
  ])
  
  loading.value = false
}

// 加载班级荣誉数据
const loadHonorData = async (classCode: string) => {
  honorLoading.value = true
  try {
    const res = await queryClassHonorByClassCode(classCode)
    if (res.data) {
      honorList.value = Array.isArray(res.data) ? res.data : []
    }
  } catch (err: any) {
    console.error('获取班级荣誉失败', err)
    honorList.value = []
  } finally {
    honorLoading.value = false
  }
}

// 加载班级宣传数据
const loadPublicityData = async (classCode: string) => {
  publicityLoading.value = true
  try {
    const res = await queryDataByClassCode(classCode)
    if (res.data) {
      publicityList.value = Array.isArray(res.data) ? res.data : []
    }
  } catch (err: any) {
    console.error('获取班级宣传失败', err)
    publicityList.value = []
  } finally {
    publicityLoading.value = false
  }
}

// 暴露方法给父组件
defineExpose({
  openDialog
});
</script>

<style lang="scss" scoped>
.mb20 {
  margin-bottom: 20px;
}
</style>
