<script lang="ts" setup>
import type { AgentApi } from '#/api/agent';

import { computed, ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Button, Input, Modal, Space, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { auditWithdrawal, getAgentWithdrawalList } from '#/api/agent';

import { useWithdrawalColumns, useWithdrawalFormSchema } from './data';

interface Props {
  agentId?: number;
}

interface QueryParams {
  currentPage: number;
  pageSize: number;
  [key: string]: any;
}

const props = defineProps<Props>();

const queryParams = computed(() => ({
  ...(props.agentId ? { agent_id: props.agentId } : {}),
}));

const auditRemark = ref('');
const auditModalVisible = ref(false);
const currentWithdrawal = ref<AgentApi.AgentWithdrawalListItem | null>(null);

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useWithdrawalFormSchema(),
    submitOnChange: true,
  },
  gridOptions: {
    columns: useWithdrawalColumns(),
    proxyConfig: {
      ajax: {
        query: async ({
          page,
          form,
        }: {
          page: QueryParams;
          form: Record<string, any>;
        }) => {
          return await getAgentWithdrawalList({
            ...queryParams.value,
            ...form,
            page: page.currentPage,
            pageSize: page.pageSize,
          });
        },
      },
      props: {
        result: 'items',
        total: 'total',
      },
    },
  },
});

// 审核提现
function handleAudit(row: AgentApi.AgentWithdrawalListItem) {
  currentWithdrawal.value = row;
  auditRemark.value = '';
  auditModalVisible.value = true;
}

// 确认审核
async function confirmAudit(status: number) {
  if (!currentWithdrawal.value) return;

  try {
    await auditWithdrawal({
      withdrawal_id: currentWithdrawal.value.id,
      status,
      remark: auditRemark.value || '',
    });
    message.success('审核成功');
    auditModalVisible.value = false;
    gridApi.query();
  } catch (error) {
    console.error('审核失败:', error);
  }
}

// 取消审核
function cancelAudit() {
  auditModalVisible.value = false;
  auditRemark.value = '';
  currentWithdrawal.value = null;
}
</script>

<template>
  <Page :auto-content-height="!agentId">
    <Grid :table-title="agentId ? '提现记录列表' : '所有提现记录'">
      <template #operation="{ row }">
        <Space>
          <Button v-if="row.status === 1" type="link" size="small" @click="handleAudit(row)">
            审核
          </Button>
        </Space>
      </template>
    </Grid>

    <Modal v-model:open="auditModalVisible" title="审核提现" :width="600" @cancel="cancelAudit">
      <div v-if="currentWithdrawal" class="audit-info">
        <p><strong>提现单号：</strong>{{ currentWithdrawal.withdraw_no }}</p>
        <p>
          <strong>提现金额：</strong>¥{{ currentWithdrawal.amount.toFixed(2) }}
        </p>
        <p><strong>收款账号：</strong>{{ currentWithdrawal.payee_account }}</p>
        <p><strong>收款人姓名：</strong>{{ currentWithdrawal.payee_name }}</p>
      </div>
      <div class="audit-remark">
        <p><strong>审核备注：</strong></p>
        <Input.TextArea v-model:value="auditRemark" :rows="4" placeholder="请输入审核备注" />
      </div>
      <template #footer>
        <Button @click="cancelAudit">取消</Button>
        <Button type="primary" danger @click="confirmAudit(3)">
          拒绝
        </Button>
        <Button type="primary" @click="confirmAudit(2)">通过</Button>
      </template>
    </Modal>
  </Page>
</template>

<style lang="less" scoped>
.audit-info {
  margin-bottom: 16px;

  p {
    margin-bottom: 8px;
  }
}

.audit-remark {
  margin-top: 16px;

  p {
    margin-bottom: 8px;
  }
}
</style>
