<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="教室分配" name="classroom">
          <el-table :data="classroomList" border style="width: 100%" v-loading="classroomLoading">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="buildingNo" label="教学楼号" show-overflow-tooltip />
            <el-table-column prop="roomNo" label="教室号" show-overflow-tooltip />
            <el-table-column prop="roomName" label="教室名称" show-overflow-tooltip />
          </el-table>
          <div v-if="classroomList.length === 0 && !classroomLoading" style="text-align: center; padding: 20px; color: #909399;">
            暂无数据
          </div>
        </el-tab-pane>

        <el-tab-pane label="学生数量" name="studentNum">
          <el-table :data="studentNumList" border style="width: 100%" v-loading="studentNumLoading">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="stuNo" label="学号" show-overflow-tooltip />
            <el-table-column prop="realName" label="姓名" show-overflow-tooltip />
            <el-table-column prop="sex" label="性别" width="80" align="center">
              <template #default="scope">
                <span>{{ scope.row.sex === '1' ? '男' : scope.row.sex === '0' ? '女' : '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="电话" show-overflow-tooltip />
          </el-table>
          <div v-if="studentNumList.length === 0 && !studentNumLoading" style="text-align: center; padding: 20px; color: #909399;">
            暂无数据
          </div>
        </el-tab-pane>

        <el-tab-pane label="宿舍学生" name="dormStudent">
          <el-table :data="dormStudentList" border style="width: 100%" v-loading="dormStudentLoading">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="buildingNo" label="楼号" show-overflow-tooltip />
            <el-table-column prop="roomNo" label="宿舍号" show-overflow-tooltip />
            <el-table-column prop="stuNo" label="学号" show-overflow-tooltip />
            <el-table-column prop="realName" label="姓名" show-overflow-tooltip />
          </el-table>
          <div v-if="dormStudentList.length === 0 && !dormStudentLoading" style="text-align: center; padding: 20px; color: #909399;">
            暂无数据
          </div>
        </el-tab-pane>

        <el-tab-pane label="惩罚记录" name="punish">
          <el-table :data="punishList" border style="width: 100%" v-loading="punishLoading">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="stuNo" label="学号" show-overflow-tooltip />
            <el-table-column prop="realName" label="姓名" show-overflow-tooltip />
            <el-table-column prop="punishType" label="惩罚类型" show-overflow-tooltip />
            <el-table-column prop="punishReason" label="惩罚原因" show-overflow-tooltip />
            <el-table-column prop="createTime" label="惩罚时间" width="120" />
          </el-table>
          <div v-if="punishList.length === 0 && !punishLoading" 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 } from 'vue'
import { useMessage } from "/@/hooks/message";
import { queryClassHonorByClassCode } from '/@/api/stuwork/classhonor'
import { queryDataByClassCode } from '/@/api/stuwork/classpublicity'
import { getClassRoomByClassCode } from '/@/api/stuwork/teachclassroomassign'
import { queryStuNumByClassCode } from '/@/api/basic/basicstudent'
import { fearchStuNumByClassCode } from '/@/api/stuwork/dormroomstudent'
import { queryPunlishNumByClass } from '/@/api/stuwork/stupunlish'

// 定义变量内容
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 classroomList = ref<any[]>([])
const classroomLoading = ref(false)
const studentNumList = ref<any[]>([])
const studentNumLoading = ref(false)
const dormStudentList = ref<any[]>([])
const dormStudentLoading = ref(false)
const punishList = ref<any[]>([])
const punishLoading = 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),
    loadClassroomData(classCode),
    loadStudentNumData(classCode),
    loadDormStudentData(classCode),
    loadPunishData(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
  }
}

// 加载教室分配数据
const loadClassroomData = async (classCode: string) => {
  classroomLoading.value = true
  try {
    const res = await getClassRoomByClassCode(classCode)
    if (res.data) {
      classroomList.value = Array.isArray(res.data) ? res.data : []
    }
  } catch (err: any) {
    console.error('获取教室分配失败', err)
    classroomList.value = []
  } finally {
    classroomLoading.value = false
  }
}

// 加载学生数量数据
const loadStudentNumData = async (classCode: string) => {
  studentNumLoading.value = true
  try {
    const res = await queryStuNumByClassCode({ classCode })
    if (res.data) {
      studentNumList.value = Array.isArray(res.data) ? res.data : []
    }
  } catch (err: any) {
    console.error('获取学生数量失败', err)
    studentNumList.value = []
  } finally {
    studentNumLoading.value = false
  }
}

// 加载宿舍学生数据
const loadDormStudentData = async (classCode: string) => {
  dormStudentLoading.value = true
  try {
    const res = await fearchStuNumByClassCode(classCode)
    if (res.data) {
      dormStudentList.value = Array.isArray(res.data) ? res.data : []
    }
  } catch (err: any) {
    console.error('获取宿舍学生失败', err)
    dormStudentList.value = []
  } finally {
    dormStudentLoading.value = false
  }
}

// 加载惩罚记录数据
const loadPunishData = async (classCode: string) => {
  punishLoading.value = true
  try {
    const res = await queryPunlishNumByClass(classCode)
    if (res.data) {
      punishList.value = Array.isArray(res.data) ? res.data : []
    }
  } catch (err: any) {
    console.error('获取惩罚记录失败', err)
    punishList.value = []
  } finally {
    punishLoading.value = false
  }
}

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

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