<script>
import { getTableData } from "@/common/apis/tables"

export default {
  data() {
    return {
      rsqlQuerry: null, // 人事信息返回列表
      rsglsum: [] // 人数和返回列表
    }
  },
  created() {
    // 页面渲染之前执行，一般调用methods定义的方法
    this.getList()
  },
  methods: {
    getList() {
      getTableData().then((Response) => {
        console.log(Response)
        this.rsqlQuerry = Response.data.renyuanjiegou
        this.rsglsum = Response.data.renyuanSum
        console.log(this.rsqlQuerry)
        console.log(this.rsglsum)
        this.processData()
      })
    },
    // 处理数据，将合计数据添加到表格
    processData() {
      const newData = []
      let currentChangQu = "" // 用于跟踪当前厂区

      // 遍历每一行数据
      this.rsqlQuerry.forEach((row, _index) => {
        // 只有当厂区发生变化时才添加合计行
        if (row.changQu !== currentChangQu) {
          if (currentChangQu !== "") {
            newData.push(this.createTotalRow(currentChangQu)) // 添加上一个厂区的合计行
          }
          currentChangQu = row.changQu // 更新当前厂区
        }

        newData.push(row) // 添加普通数据行
      })

      // 最后添加合计行
      if (currentChangQu) {
        newData.push(this.createTotalRow(currentChangQu)) // 添加最后一个厂区的合计行
      }

      this.rsqlQuerry = newData // 更新表格数据
    },

    // 创建合计行
    createTotalRow(changQu) {
      const totalData = this.rsglsum[`${changQu}合计`] || {} // 获取对应厂区的合计数据

      return {
        changQu: `${changQu}合计`, // 厂区名称后加“合计”
        zongRenShu: totalData.zongRenShu || 0,
        guanLiRY: totalData.guanLiRY || 0,
        fuWuRY: totalData.fuWuRY || 0,
        zhuanYeJishuRY: totalData.zhuanYeJishuRY || 0,
        shenChanFZRY: totalData.shenChanFZRY || 0,
        laoWuRY: totalData.laoWuRY || 0
        // 其他字段也可以按需添加
      }
    },

    // 表格合并行
    spanMethod({ rowIndex, columnIndex }) {
      const currentRow = this.rsqlQuerry[rowIndex]
      if (!currentRow) return { rowspan: 1, colspan: 1 }

      // 处理合计行
      if (currentRow.changQu.endsWith("合计")) {
        return { rowspan: 1, colspan: 1 } // 合计行无需合并
      }

      // “厂区”是第一列（index 0）
      if (columnIndex === 0) {
        const prevRow = this.rsqlQuerry[rowIndex - 1]

        // 判断当前行和上一行的厂区字段是否相同
        if (rowIndex > 0 && currentRow.changQu === prevRow.changQu) {
          return { rowspan: 0, colspan: 1 } // 不显示当前行
        } else {
          let rowspan = 1
          // 计算连续相同值的行数
          for (let i = rowIndex + 1; i < this.rsqlQuerry.length; i++) {
            if (this.rsqlQuerry[i] && this.rsqlQuerry[i].changQu === currentRow.changQu) {
              rowspan++
            } else {
              break
            }
          }
          return { rowspan, colspan: 1 } // 合并相同厂区的行
        }
      }
    }
  }
}
</script>

<template>
  <div class="app-container">
    <div class="block">
      <span class="demonstration">请选择日期</span>

      <el-date-picker
        v-model="value1"
        type="monthrange"
        range-separator="To"
        start-placeholder="Start month"
        end-placeholder="End month"
      />
    </div>
    <el-table :data="rsqlQuerry" border style="width: 100%" :span-method="spanMethod">
      <!-- 表格列定义 -->
      <el-table-column prop="changQu" label="厂区" />
      <el-table-column prop="buMen" label="部门" />
      <el-table-column prop="zongRenShu" label="总人数" />
      <el-table-column prop="guanLiRY" label="管理人员" />
      <el-table-column prop="zhuanYeJishuRY" label="专业技术人员" />
      <el-table-column prop="shenChanFZRY" label="生产辅助工人" />
      <el-table-column prop="fuWuRY" label="服务人员" />
      <el-table-column label="合计人数">
        <template #default="{ row }">
          {{ (row.zongRenShu || 0) - (row.laoWuRY || 0) }}
        </template>
      </el-table-column>
      <el-table-column prop="laoWuRY" label="劳务人员" />
      <el-table-column prop="beiZhu" label="备注" />
    </el-table>
  </div>
</template>
