<template>
  <div class="ma-content-block">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm" @search="handleRequestData">
      <!-- 搜索区 tableSearch -->
      <template #tableSearch>
        <a-col :sm="8" :xs="24">
          <a-form-item label="游戏" field="game_id">
            <game-select v-model="searchForm.game_id" multiple />
          </a-form-item>
        </a-col>
        <a-col :sm="8" :xs="24">
          <a-form-item label="充值渠道" field="pay_channel_id">
            <a-select
              v-model="searchForm.pay_channel_id"
              allow-clear
              :max-tag-count="1"
              placeholder="请选择充值渠道"
              multiple>
              <a-option v-for="item in payChannelOptions" :key="item.id" :value="item.id">{{ item.name }}</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="8" :xs="24">
          <a-form-item label="日期" field="pay_date">
            <a-range-picker
              v-model="searchForm.pay_date"
              type="date"
              format="YYYY-MM-DD"
              allow-clear
              :max-date="new Date()"
              :min-date="new Date('2025-01-01')"
              :allow-clear="false" />
          </a-form-item>
        </a-col>
      </template>

      <!-- Table 自定义渲染 -->
    </sa-table>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import api from '../../../api/customer/reconciliation'
import commonApi from '../../../api/common'
import dayjs from 'dayjs'
import GameSelect from '@/components/game-select/index.vue'
import { nextTick } from 'vue'

// 引用定义
const crudRef = ref()
const data = ref([])
const allGameOptions = ref([])
const payChannelOptions = ref([])

// 搜索表单
const searchForm = ref({
  game_id: '',
  pay_channel_id: '',
  pay_date: [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
})

// SaTable 基础配置
const options = reactive({
  singleLine: true,
  api: api.getPageList,
  pk: 'id',
  showSummary: true,
  operationColumn: false,
  showSort: false,
  summary: [],
})

// SaTable 列配置
const columns = ref([])

// 页面数据初始化
const initPage = async () => {
  await getPayChannelOptions()
  // await getChannelIncome()
}

const getPayChannelOptions = async () => {
  const res = await commonApi.getPayChannelOptionsApi()
  payChannelOptions.value = res.data
}

const handleRequestData = () => {
  // 使用 nextTick 确保在 DOM 更新后再获取数据
  nextTick(() => {
    const res = crudRef.value.getResponseData()

    // 重新添加动态列，并为每一列添加合计配置
    if (res && res.columns && Array.isArray(res.columns)) {
      console.log(res.columns)
      columns.value = res.columns

      // 动态生成 summary 配置，dataIndex 与 columns 保持一致
      if (Array.isArray(res.columns)) {
        // 只对数值类型的列添加合计
        const numericColumns = res.columns.filter((col) => {
          // 排除日期、文本等非数值列
          const excludeFields = ['reg_date', 'date', 'time', 'name', 'title', 'description', 'game_id', 'game_name']
          return !excludeFields.includes(col.dataIndex)
        })
      }
    }
  })
}

// SaTable 数据请求
const refresh = async () => {
  crudRef.value?.refresh()
}

// 页面加载完成执行
onMounted(async () => {
  initPage()
  refresh()
})
</script>

<script>
export default { name: 'v1/reconciliation/channelInCome' }
</script>
