<template>
  <div>
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList" ref="searchFormRef">
        <el-form-item label="招生计划" prop="groupId">
          <el-select v-model="dataForm.groupId" filterable clearable placeholder="请选择招生计划">
            <el-option
              v-for="item in planList"
              :key="item.id"
              :label="item.groupName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="warning"
                     icon="Download"
                     plain
                     @click="handleExport">汇总导出</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        stripe
        show-summary
        v-loading="dataListLoading">

        <el-table-column
          prop="deptCode"
          header-align="center"
          align="center"
          width="120"
          label="学院">
          <template #default="scope">
            <span>{{ getLabelValueByProps(deptList, scope.row.deptCode, { key: 'deptCode', value: 'deptName' }) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="total"
          header-align="center"
          align="center"
          label="申请人数(范围外)">
        </el-table-column>
        <el-table-column
          prop="man"
          header-align="center"
          align="center"
          label="男生数">
        </el-table-column>
        <el-table-column
          prop="woman"
          header-align="center"
          align="center"
          label="女生数">
        </el-table-column>

      </el-table>
  </div>
</template>

<script setup lang="ts" name="dormAnalysis">
import { ref, reactive, watch, onMounted } from 'vue'
import axios from 'axios'
import { getDeptList } from "/@/api/basic/basicclass"
import { dormApplyAnalysis } from "/@/api/recruit/recruitstudentsignup"
import { getList } from '/@/api/recruit/recruitstudentplangroup'
import { getLabelValueByProps } from '/@/utils/dictLabel'

// 响应式数据
const deptList = ref<any[]>([])
const dataList = ref<any[]>([])
const planList = ref<any[]>([])
const dataListLoading = ref(false)
const searchFormRef = ref()

const dataForm = reactive({
  groupId: ''
})

// 监听 groupId 变化
watch(() => dataForm.groupId, (val) => {
  if (val) {
    getTableList(val)
  }
})

// 初始化部门列表
const initDept = () => {
  getDeptList().then((data: any) => {
    deptList.value = data.data
  })
}

// 导出Excel
const exportExcel = (form: any, url: string) => {
  return axios({
    method: 'post',
    url: url,
    data: form,
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

// 导出处理
const handleExport = () => {
  exportExcel(dataForm, '/recruit/recruitstudentsignup/dormApplyAnalysisExport').then((res: any) => {
    const blob = new Blob([res.data])
    const elink = document.createElement('a')
    elink.download = "新生住宿申请汇总.xls"
    elink.style.display = 'none'
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href)
    document.body.removeChild(elink)
  }).catch(() => {
    // 错误处理
  })
}

// 初始化招生计划
const initPlanGroup = () => {
  getList().then((data: any) => {
    planList.value = data.data
    if (planList.value.length > 0) {
      dataForm.groupId = planList.value[0].id
    }
  })
}

// 获取表格数据
const getTableList = (groupId: string) => {
  dataListLoading.value = true
  dormApplyAnalysis({ "groupId": groupId }).then((response: any) => {
    dataList.value = response.data
    dataListLoading.value = false
  }).catch(() => {
    dataListLoading.value = false
  })
}

// 获取数据列表
const getDataList = () => {
  if (dataForm.groupId) {
    getTableList(dataForm.groupId)
  }
}

// 组件挂载时初始化
onMounted(() => {
  initDept()
  initPlanGroup()
})
</script>

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