<template>
  <div class="rechange-check table_form-container">
    <!-- 搜索区域：默认把当天 0 点到当前时间写入时间输入框 -->
    <RechangeSearch
      :buttonLoading="loading" 
      :search-form="searchForm"
      :search-options="searchOptions"
      @search="handleSearch"
      @reset="handleReset"
    >
      <template #button>
        <!-- 审核动作先保留按钮交互，后续可直接接接口 -->
        <el-button type="danger" plain @click="handleReject" v-auth="'user_reviewRechargeOrder'"
          >驳回</el-button
        >
        <el-button type="success" @click="handleApprove" v-auth="'user_reviewRechargeOrder'"
          >通过</el-button
        >
        <el-button type="primary" plain @click="handleExport">导出</el-button>
      </template>
    </RechangeSearch>

    <!-- 列表区域：使用公共 Table 组件 -->
    <Table
      ref="tableRef"
      :table-data="tableData"
      :columns="tableColumns"
      row-key="id"
      :loading="loading"
      :show-selection="true"
      @selection-change="handleSelectionChange"
    />

    <!-- 分页区域：使用接口返回的 total / current_page / per_page -->
    <RechangePagination
      v-model="currentPage"
      v-model:pageSizeValue="pageSize"
      :total="total"
      @pagination-change="handlePaginationChange"
    />
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'RechangeCheck',
})

import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'
import RechangeSearch from '@/components/common/Search.vue'
import Table from '@/components/common/Table.vue'
import { usePageLoading } from '@/composables/useLoading'
import RechangePagination from '@/components/common/Pagination.vue'
import { exportToExcel } from '@/utils/exportToExcel'
import { getRechargeCheckListApi, reviewRechargeOrder } from '@/api/modules/capital/rechargeCheck'
import { rechangeCheckSearch, rechangeCheckTableColumns } from './options'
import { getRecentSevenDays } from '@/utils/handleTime.ts'

// 审核列表单行数据结构：直接对应 `rechargeOrder` 那套返回结果映射。
interface TableRow {
  id: number
  orderNo: string
  userName: string
  currency: string
  amount: string
  realCurrency: string
  realAmount: string
  rate: string
  status: string
  statusText: string
  rechangeTime: string
}

// 搜索表单结构：与审核接口的查询参数一一对应。
interface SearchFormData {
  orderNo: string
  userName: string
  startTime: string
  endTime: string
}

// 搜索配置和表格配置。
const searchOptions = ref(rechangeCheckSearch)
const tableColumns = ref(rechangeCheckTableColumns)

const { loading, startLoading, stopLoading } = usePageLoading()
// 表格、勾选状态和 loading 状态。
const tableData = ref<TableRow[]>([])
const selectedRows = ref<TableRow[]>([])

// 分页状态。
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

const initTime = getRecentSevenDays()

// 默认搜索表单：开始时间固定为当天 0 点，结束时间固定为当前时间，并直接显示在输入框里。
const createDefaultSearchForm = (): SearchFormData => ({
  orderNo: '',
  userName: '',
  startTime: initTime.start,
  endTime: initTime.end,
})

const searchForm = ref<SearchFormData>(createDefaultSearchForm())

// 充值状态映射：与充值订单列表保持一致。
const getRechargeStatusText = (status: string | number | null | undefined) => {
  const statusMap: Record<string, string> = {
    '1': '未审核',
    '2': '未付款',
    '3': '已付款',
    '4': '驳回',
  }

  return statusMap[String(status ?? '')] || '--'
}

// 获取审核列表：page / page_size / start_time / end_time 必传，其余空值统一传 null。
const getList = async () => {
  startLoading()
  selectedRows.value = []

  const params = {
    page: currentPage.value,
    page_size: pageSize.value,
    trade_id: searchForm.value.orderNo || null,
    start_time: searchForm.value.startTime || initTime.start,
    end_time: searchForm.value.endTime || initTime.end,
    user_name: searchForm.value.userName || null,
  }

  try {
    const data: any = await getRechargeCheckListApi(params)
    const list = Array.isArray(data?.data) ? data.data : []

    tableData.value = list.map((item: any, index: number) => ({
      id: Number(item.id ?? index + 1),
      orderNo: String(item.trade_id ?? '--'),
      userName: item.user?.username ?? '--',
      currency: item.recharge_currency?.symbol ?? '--',
      amount: String(item.recharge_amount ?? '--'),
      realCurrency: item.real_currency?.symbol ?? '--',
      realAmount: String(item.real_amount ?? '--'),
      rate: String(item.rate ?? '--'),
      status: String(item.status ?? ''),
      statusText: getRechargeStatusText(item.status),
      rechangeTime: item.created_at ?? '--',
    }))

    total.value = Number(data?.total ?? list.length)
    currentPage.value = Number(data?.current_page ?? currentPage.value)
    pageSize.value = Number(data?.per_page ?? pageSize.value)
  } catch (error) {
    tableData.value = []
    total.value = 0
    console.error('获取充值审核列表失败', error)
  } finally {
    stopLoading()
  }
}

// 页面初始化时加载一次真实列表。
onMounted(() => {
  getList()
})

// 搜索：回到第一页再重新请求。
const handleSearch = () => {
  currentPage.value = 1
  getList()
}

// 重置：恢复默认时间范围和空搜索条件。
const handleReset = () => {
  searchForm.value = createDefaultSearchForm()
  currentPage.value = 1
  pageSize.value = 10
  getList()
}

const tableRef = ref()
// 表格勾选变化。
const handleSelectionChange = (rows: TableRow[]) => {
console.log('rows:', rows);
  // if (rows.length > 1) {
  //   // 超过1个时，移除最早选中的那个（保留最后一个）
  //   const lastRow:any = rows[rows.length - 1]
  //   // 先清除所有选择
  //   tableRef.value?.clearSelection()
  //   // 再单独选中最后点击的这行
  //   tableRef.value?.toggleRowSelection(lastRow, true)
  //   selectedRows.value = [lastRow]
  // } else {
    selectedRows.value = rows
  // }
}

// 审核通过：当前保留前端提示，等待后续接接口。
const handleApprove = async () => {
  console.log('selectedRows.value:', selectedRows.value);
  if (!selectedRows.value.length) {
    ElMessage.warning('请先选择要通过的记录')
    return
  }
  try {
    await ElMessageBox.confirm(`是否确认通过该审核？`, '审核确认', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
  } catch {
    return
  }

  startLoading()
  try {
    await reviewRechargeOrder({ id: selectedRows.value[0]?.id, status: '3' })
    await getList()
  } finally {
    stopLoading()
  }
}

// 审核驳回：当前保留前端提示，等待后续接接口。
const handleReject = async () => {
  if (!selectedRows.value.length) {
    ElMessage.warning('请先选择要驳回的记录')
    return
  }
  try {
    await ElMessageBox.confirm(`是否确认驳回该审核？订单号：${selectedRows.value[0]?.orderNo}`, '审核确认', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
  } catch {
    return
  }

  //充值状态:1未审核,2未付款,3已付款,4驳回
  startLoading()
  try {
    await reviewRechargeOrder({ id: selectedRows.value[0]?.id, status: '4' })
    await getList()
  } finally {
    stopLoading()
  }
}

// 导出：先导出当前页接口数据，后续如需全量导出可切成独立导出接口。
const handleExport = async () => {
  await exportToExcel({
    tableData: tableData.value,
    columns: tableColumns.value,
    title: '导出充值审核',
    defaultFileNamePrefix: '充值审核',
  })
}

// 分页变化：更新页码和每页条数后重新请求数据。
const handlePaginationChange = (page: { currentPage: number; pageSize: number }) => {
  currentPage.value = page.currentPage
  pageSize.value = page.pageSize
  getList()
}
</script>

<style scoped lang="scss">
.rechange-check {  

  // 覆盖公共搜索组件默认的弹性拉伸，让当前页搜索项宽度按配置展示。
  :deep(.search-container .el-form) {
    flex-wrap: wrap;
    align-items: center;
  }

  :deep(.search-container .el-form-item) {
    flex: 0 0 auto;
    margin-bottom: 8px;
  }

  :deep(.search-container .el-input),
  :deep(.search-container .el-select),
  :deep(.search-container .el-date-editor) {
    width: 100%;
  }

  // 表格区域接管剩余空间，并确保横向也能撑满页面。
  .table-wrapper {
    flex: 1;
    min-height: 0;
    width: 100%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
  }

  :deep(.el-table),
  :deep(.el-table__inner-wrapper),
  :deep(.el-scrollbar) {
    width: 100%;
  }
}
</style>
