<template>
  <div class="table_form-container">
    <!-- 搜索 -->
    <TransferSearch
      :buttonLoading="loading" 
      :search-form="searchForm"
      :search-options="searchOptions"
      @search="handleSearch"
      @reset="handleReset"
    >
      <template #button="{ form }">
        <el-button type="primary" @click="handleExport()"> 导出 </el-button>
      </template>
    </TransferSearch>
    <!-- 表格 -->
    <TransferTable
      :table-data="tableTree"
      :columns="tableColumnsOptions"
      row-key="id"
      :loading="loading"
      ref="tableRef"
    >
    </TransferTable>
    <!-- 分页 -->
    <TransferPagination
      v-model="currentPage"
      v-model:pageSizeValue="pageSize"
      :total="total"
      @pagination-change="handlePaginationChange"
    />
  </div>
</template>

<script setup lang="ts">

defineOptions({
  name: 'Transfer'
})
// 组件
import TransferSearch from '@/components/common/Search.vue'
import TransferTable from '@/components/common/Table.vue'
import { usePageLoading } from '@/composables/useLoading'
import TransferPagination from '@/components/common/Pagination.vue'
// 配置以及表单验证
import { search, tableColumns } from './options'

// 接口
import { getTransferDetailListApi } from '@/api/modules/funding/transferDetail'

// 导出表格
import { exportToExcel } from '@/utils/exportToExcel'

import { getRecentSevenDays } from '@/utils/handleTime.ts'

const initTime = getRecentSevenDays()

/**
 * @description: 定义搜索数据
 */
const searchForm = ref<any>({
  transferAccount: '',
  type: '',
  transferTime: [initTime.start, initTime.end],
})
const searchOptions = ref(search)
const { loading, startLoading, stopLoading } = usePageLoading()
/**
 * @description: 定义表格数据
 */
const tableTree = ref<any[]>([])
const tableColumnsOptions = ref(tableColumns)
const tableRef = ref()
/**
 * @description: 定义分页数据
 */
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
/**
 * @description: 定义公共请求数据方法
 */

const getTransferDetailList = async () => {
  startLoading()
  const params = {
    page: currentPage.value,
    page_size: pageSize.value,
    type: searchForm.value.type || '',
    start_time: searchForm.value.transferTime?.[0] || '2026-02-20 0:00:00',
    end_time: searchForm.value.transferTime?.[1] || '2026-03-20 23:59:59',
    user_name: searchForm.value.transferAccount || '',
    order_id: '',
  }
  const data: any = await getTransferDetailListApi(params)
  // 表格数据
  tableTree.value = data.data.map((item: any) => ({
    //序号
    index: item.id,
    //订单ID
    orderId: item.order_id,
    // 转出账户
    transferAccount: item.user.username,
    // 所属代理
    agentName: '',
    // 转入账号
    transferAccountName: item.to,
    // 转账类型
    transferType: item.type === 1 ? '内部' : '三方',
    // 转账金额
    transferAmount: item.amount,
    // 到账金额
    arrivalAmount: item.amount,
  }))
  // 分页数据
  total.value = data.total

  stopLoading()
  currentPage.value = data.current_page
  pageSize.value = Number(data.per_page)
}
/**
 * @description: 页面加载完成需要请求的数据
 */
onMounted(() => {
  getTransferDetailList()
})
/**
 * @description: 定义搜索方法
 */
const handleSearch = async () => {
  getTransferDetailList()
}
const handleReset = async () => {
  searchForm.value.transferAccount = ''
  searchForm.value.level = ''
  searchForm.value.transferTime = ''
  getTransferDetailList()
}
/**
 * @description: 导出表格（带表头+自定义文件名）
 */
const handleExport = async () => {
  await exportToExcel({
    tableData: tableTree.value,
    columns: tableColumnsOptions.value,
    title: '导出转账详情',
    defaultFileNamePrefix: '转账详情',
  })
}

/**
 * @description: 定义分页方法
 */
const handlePaginationChange = async (page: { currentPage: number; pageSize: number }) => {
  currentPage.value = page.currentPage
  pageSize.value = page.pageSize
  getTransferDetailList()
}
</script>

<style scoped lang="scss">
.search-container {
  :deep(.el-form) {
    .el-form-item {
      flex: none;

      .el-select {
        width: 160px;
      }
    }
  }
}
</style>
