<template>
  <div class="container">
    <a-table
        :scroll="{ x: 2000, y: 550 }"
        :dataSource="dataSource"
        :columns="columns"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        bordered
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'withdrawnAmount'">
          ￥{{record.withdrawnAmount }}
        </template>
        <template v-if="column.key === 'withdrawalStatus'">
          <a-tag :color="getStatusColor(record.withdrawalStatus)">
            {{ getStatusText(record.withdrawalStatus) }}
          </a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <a-space :size="8">
            <a-tag
                color="orange"
                @click="viewDetails(record)"
            >
              查看详情
            </a-tag>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import type { TableProps } from 'ant-design-vue';
import myAxios from "../../api/myAxios.ts";
import router from "../../router";

interface WithdrawalRecord {
  id: number;
  cardHolder: string;
  idCardNumber: string;
  phoneNumber: string;
  bankCardNumber: string;
  openBank: string;
  withdrawAmount: number;
  withdrawalStatus: string;
}


const columns = ref([
  {
    title: '提现申请记录ID',
    dataIndex: 'id',
    key: 'id',
    width: 80,
    fixed: 'left',
    align: 'center',
    sorter: true,
    sortDirections: ['ascend', 'descend']
  },
  {
    title: '持卡人',
    dataIndex: 'cardHolder',
    key: 'cardHolder',
    width: 120,
    align: 'center',
    sorter: true,
    sortDirections: ['ascend', 'descend']
  },
  {
    title: '身份证号',
    dataIndex: 'idCardNumber',
    key: 'idCardNumber',
    width: 180,
    align: 'center'
  },
  {
    title: '手机号',
    dataIndex: 'phoneNumber',
    key: 'phoneNumber',
    width: 140,
    align: 'center',
    sorter: true,
    sortDirections: ['ascend', 'descend']
  },
  {
    title: '银行卡号',
    dataIndex: 'bankCardNumber',
    key: 'bankCardNumber',
    width: 180,
    align: 'center'
  },
  {
    title: '开户银行',
    dataIndex: 'openBank',
    key: 'openBank',
    width: 150,
    align: 'center'
  },
  {
    title: '提现金额',
    dataIndex: 'withdrawnAmount',
    key: 'withdrawnAmount',
    width: 120,
    align: 'center',
    sorter: true,
    sortDirections: ['ascend', 'descend']
  },
  {
    title: '提取状态',
    dataIndex: 'withdrawalStatus',
    key: 'withdrawalStatus',
    width: 120,
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 100,
    align: 'center'
  }
]);

const dataSource = ref<WithdrawalRecord[]>([]);
const loading = ref(false);


const sortParams = reactive({
  sortField: 'id',
  sortOrder: 'ascend'
});

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total: number) => `共 ${total} 条`,
});


const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'processing': '提现中',
    'success': '提现成功',
    'failed': '提现失败'
  };
  return statusMap[status] || status;
};


const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'processing': 'blue',
    'success': 'green',
    'failed': 'red'
  };
  return colorMap[status] || 'default';
};


const fetchData = async () => {
  const storedToken = localStorage.getItem('token');
  try {
    loading.value = true;
    const response: any = await myAxios.post('/withdrawalApply/page', {
      current: pagination.current,
      pageSize: pagination.pageSize,
      sortField: sortParams.sortField,
      sortOrder: sortParams.sortOrder,
      withdrawalStatus: 'processing'
    }, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': storedToken
      }
    });

    if (response.code === 1) {
      dataSource.value = response.data.records;
      pagination.total = response.data.total;
      pagination.current = response.data.current;
    }
  } catch (error) {
    console.error('请求失败:', error);
  } finally {
    loading.value = false;
  }
};


const handleTableChange: TableProps['onChange'] = (pag, _, sorter) => {
  // 处理分页参数
  if (pag) {
    pagination.current = pag.current!;
    pagination.pageSize = pag.pageSize!;
  }

  // 处理排序参数
  if (sorter) {
    const { field, order } = sorter as { field?: string; order?: string };

    if (field && order) {
      sortParams.sortField = field;
      sortParams.sortOrder = order;
    } else {

      sortParams.sortField = 'id';
      sortParams.sortOrder = 'ascend';
    }
  }

  fetchData();
};

onMounted(() => {
  fetchData();
});

const viewDetails = (record: WithdrawalRecord) => {
  router.push({
    path: '/withdrawalDetail',
    query: { id: record.id.toString() }
  });
}
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>