<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <header style="font-size: 40px; text-align: center; margin-bottom: 20px;">
        招生地区分布统计(本省本市、普通招生、自主招生)
      </header>

      <el-form :model="queryForm" inline class="mb-4" ref="searchFormRef">
        <el-form-item label="是否联院" prop="isUnion">
          <el-select v-model="queryForm.isUnion" filterable placeholder="请选择是否联院">
            <el-option
              v-for="item in isUnionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleFilter">查询</el-button>
          <el-button type="primary" plain icon="Refresh" class="ml10" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="mb15">
        <el-button type="warning" plain icon="Download" :loading="exportLoading" @click="dataExportHandle">导出</el-button>
      </div>

      <el-table
        :data="dataList"
        border
        stripe
        :span-method="objectSpanMethod"
        v-loading="dataListLoading"
        :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle"
      >

          <el-table-column
            prop="year"
            header-align="center"
            align="center"
            label="年份">
          </el-table-column>
          <el-table-column
            prop="type"
            header-align="center"
            align="center"
            label="类别">
          </el-table-column>
          <el-table-column
            prop="peopleNum"
            header-align="center"
            align="center"
            label="招生总数">
          </el-table-column>
          <el-table-column
            prop="peopleRate"
            header-align="center"
            align="center"
            label="占比">
          </el-table-column>

          <el-table-column
            prop=""
            header-align="center"
            align="center"
            label="天宁区">
            <el-table-column
              prop="tnNum"
              header-align="center"
              align="center"
              label="人数">
            </el-table-column>
            <el-table-column
              prop="tnRate"
              header-align="center"
              align="center"
              label="占比">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop=""
            header-align="center"
            align="center"
            label="新北区">
            <el-table-column
              prop="xbNum"
              header-align="center"
              align="center"
              label="人数">
            </el-table-column>
            <el-table-column
              prop="xbRate"
              header-align="center"
              align="center"
              label="占比">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop=""
            header-align="center"
            align="center"
            label="武进区">
            <el-table-column
              prop="wjNum"
              header-align="center"
              align="center"
              label="人数">
            </el-table-column>
            <el-table-column
              prop="wjRate"
              header-align="center"
              align="center"
              label="占比">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop=""
            header-align="center"
            align="center"
            label="钟楼区">
            <el-table-column
              prop="zlNum"
              header-align="center"
              align="center"
              label="人数">
            </el-table-column>
            <el-table-column
              prop="zlRate"
              header-align="center"
              align="center"
              label="占比">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop=""
            header-align="center"
            align="center"
            label="金坛">
            <el-table-column
              prop="jtNum"
              header-align="center"
              align="center"
              label="人数">
            </el-table-column>
            <el-table-column
              prop="jtRate"
              header-align="center"
              align="center"
              label="占比">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop=""
            header-align="center"
            align="center"
            label="溧阳">
            <el-table-column
              prop="lyNum"
              header-align="center"
              align="center"
              label="人数">
            </el-table-column>
            <el-table-column
              prop="lyRate"
              header-align="center"
              align="center"
              label="占比">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop=""
            header-align="center"
            align="center"
            label="武进区(含 戚墅堰)">
            <el-table-column
              prop="wjjNum"
              header-align="center"
              align="center"
              label="人数">
            </el-table-column>
            <el-table-column
              prop="wjjRate"
              header-align="center"
              align="center"
              label="占比">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop=""
            header-align="center"
            align="center"
            label="经开区">
            <el-table-column
              prop="jkqNum"
              header-align="center"
              align="center"
              label="人数">
            </el-table-column>
            <el-table-column
              prop="jkqRate"
              header-align="center"
              align="center"
              label="占比">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop=""
            header-align="center"
            align="center"
            label="市辖区">
            <el-table-column
              prop="cityNum"
              header-align="center"
              align="center"
              label="人数">
            </el-table-column>
            <el-table-column
              prop="cityRate"
              header-align="center"
              align="center"
              label="占比">
            </el-table-column>
          </el-table-column>

          <el-table-column
            prop=""
            header-align="center"
            align="center"
            label="本省外市">
            <el-table-column
              prop="bswNum"
              header-align="center"
              align="center"
              label="人数">
            </el-table-column>
            <el-table-column
              prop="bswRate"
              header-align="center"
              align="center"
              label="占比">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop=""
            header-align="center"
            align="center"
            label="外省">
            <el-table-column
              prop="wsNum"
              header-align="center"
              align="center"
              label="人数">
            </el-table-column>
            <el-table-column
              prop="wsRate"
              header-align="center"
              align="center"
              label="占比">
            </el-table-column>
          </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts" name="recruitstudentsignup-schoolAreaStatic">
import { ref, reactive, onMounted } from 'vue'
import { useTable } from '/@/hooks/table'
import { useMessage } from '/@/hooks/message'
import { schoolAreaStatic } from '/@/api/recruit/recruitstudentsignup'

// 消息提示 hooks
const message = useMessage()

// 引用
const searchFormRef = ref()

// 状态
const isUnionList = [
  { value: '0', label: '否' },
  { value: '1', label: '是' }
]
const dataList = ref<any[]>([])
const indexArray = ref<number[]>([])
const dataListLoading = ref(false)
const exportLoading = ref(false)

// 查询表单
const queryForm = reactive({
  isUnion: '0'
})

// 使用 table hook 获取样式
const { tableStyle, downBlobFile } = useTable()

// 初始化
const init = () => {
  queryForm.isUnion = '0'
  getDataList()
}

// 获取行数
const getRows = (rowIndex: number, name: string) => {
  let count = 0
  for (let i = rowIndex; i < dataList.value.length; i++) {
    if (dataList.value[i].year === name) {
      count++
    } else {
      break
    }
  }
  return count
}

// 合并单元格方法
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  if (columnIndex === 0) {
    if (indexArray.value.includes(rowIndex)) {
      const rowCount = getRows(rowIndex, row.year)
      return {
        rowspan: rowCount,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}

// 获取数据列表
const getDataList = async () => {
  try {
    dataListLoading.value = true
    dataList.value = []
    indexArray.value = []
    const response = await schoolAreaStatic(queryForm)
    dataList.value = response.data || []
    
    // 计算合并单元格的索引
    let count = 0
    for (let rowIndex = 0; rowIndex < dataList.value.length; ) {
      indexArray.value.push(rowIndex)
      count = getRows(rowIndex, dataList.value[rowIndex].year)
      rowIndex += count
    }
  } catch (error) {
    console.error('获取数据失败', error)
  } finally {
    dataListLoading.value = false
  }
}

// 导出
const dataExportHandle = async () => {
  try {
    exportLoading.value = true
    await downBlobFile(
      '/recruit/recruitstudentsignup/schoolAreaStaticExport',
      queryForm,
      '招生地区分布统计(本省本市、普通招生、自主招生).xls'
    )
  } catch (error: any) {
    message.error(error.msg || '导出失败')
  } finally {
    exportLoading.value = false
  }
}

// 查询
const handleFilter = () => {
  getDataList()
}

// 重置查询
const resetQuery = () => {
  searchFormRef.value?.resetFields()
  queryForm.isUnion = '0'
  getDataList()
}

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