<script lang="ts" setup>
import { computed } from 'vue';

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

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

import AuditModal from './modules/audit-modal.vue';
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 [AuditModalComponent, auditModalApi] = useVbenModal({
  connectedComponent: AuditModal,
  destroyOnClose: true,
});

const handleActionClick = ({
  code,
  row,
}: {
  code: string;
  row: AgentApi.AgentWithdrawalListItem;
}) => {
  if (code === 'audit') {
    auditModalApi
      .setData({
        withdrawal: row,
        onSuccess: () => {
          auditModalApi.close();
          // 刷新列表
          gridApi.query();
        },
      })
      .open();
  }
};

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useWithdrawalFormSchema(),
    submitOnChange: true,
  },
  gridOptions: {
    columns: useWithdrawalColumns(handleActionClick),
    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',
      },
    },
  },
});
</script>

<template>
  <Page :auto-content-height="!agentId">
    <Grid :table-title="agentId ? '提现记录列表' : '所有提现记录'" />
    <AuditModalComponent />
  </Page>
</template>
