<template>
  <div class="p-4">
    <BasicTable 
      @register="registerTable" 
      :scroll="{ x: 'max-content' }" 
    />
  </div>
</template>
<script setup lang="ts">
import { BasicTable, useTable } from '/@/components/Table';
import { accessStatisticsColumns } from './access.data';
import { getGoafAccessCount } from '../basicInfo.api';
import type { BasicColumn } from '/@/components/Table/src/types/table';

// 封装接口调用，获取数据后手动添加「总计」行
const fetchTableData = async (params: any) => {
  // 1. 调用原始接口，获取数据
  const originalRecords = await getGoafAccessCount(params);
  if (originalRecords.length === 0) return originalRecords; // 无数据时直接返回

  // 2. 定义需要求和的数值列字段
  const numberFields = ['mineNum', 'yjNum', 'wxjrNum', 'jrNum', 'wjNum', 'zxNum', 'lxNum'];

  // 3. 构建「总计」行对象
  const totalRow = {
    name: '总计',
    isTotal: true, // 合计行标识
  };

  // 4. 遍历数值列，计算每列的总和
  numberFields.forEach(field => {
    totalRow[field] = originalRecords.reduce((sum: number, item: any) => {
      const currentValue = Number(item[field]) || 0;
      return sum + currentValue;
    }, 0);
  });

  // 5. 把「总计」行拼接到原始数据的最前面
  const newRecords = [totalRow, ...originalRecords];

  // 6. 返回表格
  return {
    ...originalRecords,
    records: newRecords,
    total: newRecords.length,
  };
};

// 手动添加自定义序号列
const customIndexColumn: BasicColumn = {
  title: '序号',
  dataIndex: 'index',
  width: 40,
  align: 'center',
  // 自定义序号渲染：判断是否为合计行，合计行返回空字符串（无序号）
  customRender: ({ record, index }) => {
    // 若是合计行（带有isTotal标识），返回空，不显示序号
    if (record.isTotal) return '';
    // 普通数据行：序号从1开始（排除合计行，序号连续）
    return index; // 因合计行在第0位，普通数据从索引1开始，直接返回index即为正确序号
  },
};

// 拼接最终列配置（序号列 + 原有业务列）
const finalTableColumns = [customIndexColumn, ...accessStatisticsColumns];

const [registerTable] = useTable({
    title: '矿山信息表格',
    api: fetchTableData, // 数据统计接口
    columns:finalTableColumns,
    pagination: false,
    useSearchForm: false,
    bordered: true,
    showIndexColumn: false,
  });
</script>
<style scoped>
  :deep(.ant-table-thead th:nth-child(1)) {
    vertical-align: bottom;
    padding-bottom: 0 !important;
    border-bottom: none;
  }
  :deep(.ant-table-tbody .ant-table-row:nth-child(2)){
    background-color: #c5daf7 !important;
    td {
      background-color: #c5daf7 !important;
    }
  }
</style>