<template>
  <div class="order-rechange-page">
    <!-- 搜索区域：按接口参数保留订单号、用户名称、状态、开始/结束时间 -->
    <OrderRechangeSearch
      :search-form="searchForm"
      :search-options="searchOptions"
      @search="handleSearch"
      @reset="handleReset"
    ></OrderRechangeSearch>

    <!-- 列表区域：改为真实接口数据，保留原有表格结构 -->
    <OrderRechangeTable
      :table-data="tableTree"
      :columns="tableColumnsOptions"
      :highlight-current-row="false"
    >
      <!-- 操作列插槽 -->
      <template #operation="{ row }">
        <el-button type="primary" :disabled="row.status !== '1'" @click="handleAudit(row, 3)"
          >审核通过</el-button
        >
        <el-button type="danger" :disabled="row.status !== '1'" @click="handleAudit(row, 4)"
          >审核驳回</el-button
        >
      </template>
    </OrderRechangeTable>

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

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import OrderRechangeSearch from '@/components/common/Search.vue'
import OrderRechangeTable from '@/components/common/Table.vue'
import OrderRechangePagination from '@/components/common/Pagination.vue'
import { getRechargeOrderListApi, reviewRechargeOrder } from '@/api/modules/order/rechange.ts'
import { search, tableColumns } from './options'
import { getRecentSevenDays } from '@/utils/handleTime.ts'

// 充值订单数据结构：只保留页面展示所需字段，接口原始字段在请求后统一映射。
interface RechangeOrderItem {
  id: number
  orderNo: string
  userName: string
  currency: string
  amount: string
  status: string
  statusText: string
  rechangeTime: string
  rechangeAccount: string
}

const initTime = getRecentSevenDays('YYYY-MM-DD')

// 搜索表单结构：与接口查询参数一一对应，页面字段名保持可读性。
interface SearchFormData {
  trade_id: string
  user_name: string
  status: string
  start_time: string
  end_time: string
}

// 搜索项配置。
const searchOptions = ref(search)

// 搜索表单：由公共 Search 组件双向绑定。
const createDefaultSearchForm = (): SearchFormData => ({
  trade_id: '',
  user_name: '',
  status: '',
  start_time: initTime.start,
  end_time: initTime.end,
})

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

// 表格数据与列配置。
const tableTree = ref<RechangeOrderItem[]>([])
const tableColumnsOptions = ref(tableColumns)

// 分页状态：由接口返回值驱动。
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 充值状态映射：对齐接口文档中的 1/2/3/4 定义。
const getRechargeStatusText = (status: string | number | null | undefined) => {
  const statusMap: Record<string, string> = {
    '1': '未审核',
    '2': '未付款',
    '3': '已付款',
    '4': '驳回',
  }

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

// 获取充值订单列表：把接口返回字段统一映射成页面表格结构。
const getRechargeOrderList = async () => {
  const params = {
    page: currentPage.value,
    page_size: pageSize.value,
    trade_id: searchForm.value.trade_id || null,
    start_time: searchForm.value.start_time
      ? `${searchForm.value.start_time} 00:00:00`
      : initTime.start,
    end_time: searchForm.value.end_time ? `${searchForm.value.end_time} 23:59:59` : initTime.end,
    user_name: searchForm.value.user_name || null,
    status: searchForm.value.status || null,
  }

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

    tableTree.value = list.map((item: any, index: number) => ({
      id: Number(item.id ?? index + 1),
      // 订单号：接口返回字段为 trade_id
      orderNo: String(item.trade_id ?? '--'),
      // 用户名：用于后续可能的页面扩展，当前取 user.username
      userName: item.user?.username ?? '--',
      // 充值币种：根据返回结构取 recharge_currency.symbol
      currency: item.recharge_currency?.symbol ?? '--',
      // 金额：根据返回结构取 recharge_amount
      amount: String(item.recharge_amount ?? '--'),
      status: String(item.status ?? ''),
      statusText: getRechargeStatusText(item.status),
      // 充值时间：根据返回结构取 created_at
      rechangeTime: item.created_at ?? '--',
      // 充值账号：当前返回里最接近账号标识的是 user.username
      rechangeAccount: item.user?.username ?? '--',
    }))

    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) {
    tableTree.value = []
    total.value = 0
    console.error('获取充值订单列表失败', error)
  }
}

// 页面加载后拉取首屏数据。
onMounted(() => {
  getRechargeOrderList()
})

// 搜索：切回第一页后重新请求列表。
const handleSearch = () => {
  currentPage.value = 1
  getRechargeOrderList()
}

// 重置：恢复默认搜索条件并重新请求列表。
const handleReset = () => {
  searchForm.value = createDefaultSearchForm()
  currentPage.value = 1
  pageSize.value = 10
  getRechargeOrderList()
}

// 分页切换：同步页码和每页条数后重新请求。
const handlePaginationChange = (page: { currentPage: number; pageSize: number }) => {
  currentPage.value = page.currentPage
  pageSize.value = page.pageSize
  getRechargeOrderList()
}

// 审核通过：调用接口修改状态为 3 已付款。
const handleAudit = async (row: RechangeOrderItem, status: number) => {
  try {
    await reviewRechargeOrder({ id: row.id, status: status })
    ElMessage.success('审核通过')
    await getRechargeOrderList()
  } catch (error) {
    ElMessage.error('审核失败')
    console.error('审核失败', error)
  }
}
</script>

<style scoped lang="scss">
.order-rechange-page {
  min-height: 100%;

  // 覆盖公共搜索组件的拉伸行为，让输入框尺寸更接近设计图。
  :deep(.search-container .el-form) {
    display: flex;
    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%;
  }

  :deep(.table-container) {
    height: calc(100vh - 220px);
  }
}
</style>
