<script lang="ts" setup>
/**
 * 代支付手续费记录：展示关联提现申请，详情与审核页互通
 */
import { ref } from 'vue';

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

import { Button, Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';
import { getChargeCashPayRecordListApi } from '#/views/finance/charge-cash-pay-record/api';
import StatisticsReconciliation from '#/views/finance/reconciliation/components/statistics.vue';
import WithdrawalRelationDetail from '#/views/finance/withdrawal/components/withdrawal-relation-detail.vue';

import { formOptions } from './config/search';
import { gridOptions } from './config/table';

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

const statistics = ref();

const [RelationDetailModal, relationDetailApi] = useVbenModal({
  connectedComponent: WithdrawalRelationDetail,
});

const initTableAjax = () => {
  gridApi.setGridOptions({
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getChargeCashPayRecordListApi({
            page: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          }).then((res) => {
            statistics.value = [
              {
                title: '总销代付额',
                value: res.count,
                icon: 'mdi:cash-multiple',
                color: 'text-blue-600',
                unit: '¥',
              },
            ];
            return res.list;
          });
        },
      },
    },
  });
};

initTableAjax();

/** 打开提现+代付互通详情 */
const openDetail = (id: number) => {
  relationDetailApi.setData({ id, source: 'charge' });
  relationDetailApi.open();
};
</script>

<template>
  <Page auto-content-height title="代支付手续费记录">
    <RelationDetailModal />
    <StatisticsReconciliation
      v-if="statistics"
      :statistics="statistics"
    />
    <Grid>
      <template #toolbar-actions>
        <TableAction :actions="[]" :drop-down-actions="[]">
          <template #more>
            <Button style="margin-left: 16px">
              批量操作
              <Icon icon="ant-design:down-outlined" />
            </Button>
          </template>
        </TableAction>
      </template>
      <template #subject="{ row }">
        <div>
          <Tag color="green">{{ row.type_txt || '-' }}</Tag>
          <div class="mt-2">{{ row.subject_name || row.store?.name || '-' }}</div>
        </div>
      </template>
      <template #apply-info="{ row }">
        <div>申请：¥{{ row.apply_cash ?? '-' }}</div>
        <div class="mt-1">打款：¥{{ row.true_cash ?? '-' }}</div>
        <div class="mt-1">
          <Tag v-if="row.apply_check_status === 1" color="purple">待审核</Tag>
          <Tag v-else-if="row.apply_check_status === 2" color="green">审核成功</Tag>
          <Tag v-else-if="row.apply_check_status === 3" color="error">拒绝</Tag>
          <Tag v-else-if="row.apply_check_status === 4" color="error">提现失败</Tag>
          <Tag v-else color="default">无申请</Tag>
        </div>
      </template>
      <template #status="{ row }">
        <div>
          <Tag v-if="row.status === 1" color="purple">已记录</Tag>
          <Tag v-else-if="row.status === 2" color="green">已支付</Tag>
          <Tag v-else-if="row.status === 3" color="orange">已取消</Tag>
        </div>
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '详情',
              type: 'link',
              icon: 'mdi:file-document-outline',
              size: 'small',
              onClick: openDetail.bind(null, row.id),
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
<style scoped lang="scss">
.mt-1 {
  margin-top: 4px;
}
.mt-2 {
  margin-top: 8px;
}
</style>
