<script lang="ts" setup>
import type { VxeGridListeners } from '#/adapter/vxe-table';

import { ref } from 'vue';

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

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

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';

import { formOptions } from './config/search';
import { gridOptions } from './config/table';
import DetailModal from '#/views/business/order/product-order/components/detail.vue';
import { getChargeCashPayRecordListApi } from '#/views/finance/charge-cash-pay-record/api';
import StatisticsReconciliation from "#/views/finance/reconciliation/components/statistics.vue";

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

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

initTableAjax();
</script>

<template>
  <Page auto-content-height title="代支付手续费记录">
    <StatisticsReconciliation
      v-if="statistics"
      :statistics="statistics"
    />
    <Grid>
      <template #toolbar-buttons>
        <TableAction
          :actions="[]"
          :drop-down-actions="[]"
        >
          <template #more>
            <Button style="margin-left: 16px">
              批量操作
              <Icon icon="ant-design:down-outlined" />
            </Button>
          </template>
        </TableAction>
      </template>
      <template #status="{ row }">
        <div class="mt-3">
          <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="[]"
        />
      </template>
    </Grid>
  </Page>
</template>
<style scoped lang="scss">
.custom-list {
  list-style-type: none;
  padding-left: 0;
}

.custom-list-item {
  background-color: rgba(64, 158, 255, 0.04);
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 8px 12px;
  font-size: 14px;
  transition: background-color 0.3s;

  &:hover {
    background-color: rgba(64, 158, 255, 0.1);
  }

  &::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #409eff;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
  }
}
</style>
