<template>
  <div class="mod-config">
    <basic-container>
      <el-form :inline="true" :model="dataForm" @keyup.enter="handleFilter" ref="searchFormRef">
        <el-form-item label="招生计划" prop="groupId">
          <el-select v-model="dataForm.groupId" filterable placeholder="请选择招生计划" size="small">
            <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 icon="Search" type="primary" size="small"
                      @click="handleFilter">查询
          </el-button>
          <el-button icon="Delete" type="default" plain size="small"
                     @click="resetForm">清空
          </el-button>
        </el-form-item>
      </el-form>
      <div class="avue-crud">
        <el-table :data="dataList" border stripe :span-method="objectSpanMethod" v-loading="dataListLoading"
                  :summary-method="getSummaries" show-summary :row-style="changeRowColor"
        >
          <el-table-column align="center" header-align="center" prop="deptName" label="部门" />
          <el-table-column align="center" header-align="center" prop="contantName" label="联系人" />
          <el-table-column align="center" header-align="center" prop="peopleNum" label="招生人数" />
          <el-table-column align="center" header-align="center" prop="czNum" label="初中生" />
          <el-table-column align="center" header-align="center" prop="gzNum" label="高中生" />
          <el-table-column align="center" header-align="center" prop="jzxNum" label="技职校" />
          <el-table-column align="center" header-align="center" prop="allNum" label="高中+技职校" />
        </el-table>
      </div>
    </basic-container>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getContantByUserStatic } from "@/api/recruit/recruitstudentsignup"
import { getList } from "@/api/recruit/recruitstudentplangroup"

// 响应式数据
const dataForm = reactive({
  groupId: ""
})

const dataList = ref<any[]>([])
const planList = ref<any[]>([])
const indexArray = ref<number[]>([])
const dataListLoading = ref(false)
const searchFormRef = ref()

// 初始化
const init = () => {
  getList().then((data: any) => {
    planList.value = data.data
    if (planList.value.length > 0) {
      dataForm.groupId = planList.value[0].id
    }
    getDataList()
  })
}

// 获取数据列表
const getDataList = () => {
  dataList.value = []
  indexArray.value = []
  dataListLoading.value = true
  getContantByUserStatic(dataForm).then((response: any) => {
    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].deptName)
      rowIndex += count
    }
    dataListLoading.value = false
  }).catch(() => {
    dataListLoading.value = false
  })
}

// 改变行颜色
const changeRowColor = ({ row }: any) => {
  if (row.contantName === "小记") {
    return {
      color: "red"
    }
  }
}

// 表格汇总
const getSummaries = (param: any) => {
  const { columns, data } = param
  const sums: any[] = []
  columns.forEach((column: any, index: number) => {
    if (index === 0) {
      sums[index] = '总计'
    } else if (index !== 0 && index !== 1) {
      const values = data.map((item: any) => Number(item[column.property]))
      if (!values.every((value: number) => isNaN(value))) {
        sums[index] = values.reduce((prev: number, curr: number) => {
          const numValue = Number(curr)
          if (!isNaN(numValue)) {
            return prev + numValue
          } else {
            return prev
          }
        }, 0) / 2
      } else {
        sums[index] = '--'
      }
    } else {
      sums[index] = '--'
    }
  })
  return sums
}

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

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

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

// 重置表单
const resetForm = () => {
  searchFormRef.value?.resetFields()
}

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

<style scoped>
.avue-crud {
  margin-top: 20px;
}
</style>
