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

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

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { balanceApi } from '#/api/posting';

interface RowType {
  id: number;
  tel: string;
  totalPoint: number;
  point: number;
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  wrapperClass: 'grid-cols-6',
  schema: [
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
      },
      fieldName: 'tel',
      label: '手机号',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  // 是否在字段值改变时提交表单
  submitOnChange: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeTableGridOptions<RowType> = {
  columns: [
    { field: 'tel', title: '用户手机号' },
    { field: 'totalPoint', title: '总充值' },
    { field: 'point', title: '可用' },
  ],
  exportConfig: {},
  height: 'auto',
  keepSource: true,
  rowConfig: {
    isHover: true,
  },
  pagerConfig: {
    enabled: true,
  },
  proxyConfig: {
    response: {
      result: 'records',
      list: 'records',
      total: 'total',
    },
    ajax: {
      query: async ({ page }, formValues) => {
        return await balanceApi.getUserBalanceList({
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
        });
      },
    },
  },
};

const [Grid] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});
</script>

<template>
  <Page auto-content-height>
    <Grid />
  </Page>
</template>
