<template>
  <div class="withdraw-page table_form-container">
    <Table
      ref="tableRef"
      :table-data="tableData"
      :columns="tableColumnsOptions"
      row-key="id"
      :loading="loading"
      @rowClick="handleRowClick"
    >
      <template #action="{ row }">
        <el-button type="primary" size="small" @click.stop="handleWithdraw(row)">取款</el-button>
      </template>
    </Table>
    <!-- <Pagination
      v-model="queryParams.page"
      v-model:pageSizeValue="queryParams.limit"
      :total="total"
      @pagination-change="getList"
    /> -->
    <WithdrawDialog
      :visible="withdrawDialogVisible"
      :channel-id="currentChannelId"
      :channel-info="currentChannelInfo"
      @update:visible="withdrawDialogVisible = $event"
      @success="handleWithdrawSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import Table from '@/components/common/Table.vue'
import Pagination from '@/components/common/Pagination.vue'
import { usePageLoading } from '@/composables/useLoading'
import WithdrawDialog from './components/WithdrawDialog.vue'
import { tableColumns } from './options'
import { getWithdrawChannel } from '@/api/modules/capital/withdraw'

defineOptions({
  name: 'Withdraw'
})

interface TableRow {
  id: number
  name: string
  channel_fee: string
  api_url: string
  api_appid: string
  status: number
  statusStr?: string
  currency?: string
}

const tableRef = ref()
const tableData = ref<TableRow[]>([])
const { loading, startLoading, stopLoading } = usePageLoading()
const total = ref(0)
const withdrawDialogVisible = ref(false)
const currentChannelId = ref<number>()
const currentChannelInfo = ref<any>()

const queryParams = reactive({
  page: 1,
  limit: 10,
})

// 表格列配置
const tableColumnsOptions = tableColumns

// 获取列表数据
const getList = async () => {
  startLoading()
  try {
    const res: any = await getWithdrawChannel()
    if (res) {
      tableData.value = res.map((item: any) => ({
        ...item,
        statusStr: item.status === 1 ? '正常' : '禁用',
      }))
      total.value = res.length
    }
  } catch (error) {
    console.error('获取列表失败', error)
  } finally {
    stopLoading()
  }
}

// 行点击
const handleRowClick = (row: TableRow) => {
  console.log('选中行', row)
}

// 取款按钮
const handleWithdraw = (row: TableRow) => {
  currentChannelId.value = row.id
  currentChannelInfo.value = {
    id: row.id,
    name: row.name,
    currency: row.currency || 'USD'
  }
  withdrawDialogVisible.value = true
}

// 取款成功回调
const handleWithdrawSuccess = () => {
  getList()
}

onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
.withdraw-page { 
}
</style>
