import { apiClient } from '@/api';
import type {
  ApiSysUserPaymentSummaryListGetPageSizeEnum,
  KamiApiSysPaymentV1PaymentSummaryRecord
} from '@/api/generated';
import type { Pagination } from '@/types/global';
import {
  Button,
  Col,
  DatePicker,
  Divider,
  Form,
  FormItem,
  Input,
  Row,
  Space,
  Table,
  type TableColumnData
} from '@arco-design/web-vue';
import { defineComponent, onMounted, reactive, ref } from 'vue';

interface IformData {
  username: string;
  date: string;
}

export default defineComponent({
  name: 'userManagementSummary',
  setup() {
    const generateFormModel = (): IformData => {
      return {
        username: '',
        date: ''
      };
    };
    const formModel = ref(generateFormModel());
    const basePagination: Pagination = {
      current: 1,
      pageSize: 50
    };
    const pagination = reactive({
      ...basePagination
    });
    const columns: TableColumnData[] = [
      {
        title: '序号',
        render(data) {
          return data.rowIndex + 1;
        }
      },
      {
        title: '用户名',
        dataIndex: 'username'
      },
      {
        title: '消费金额',
        dataIndex: 'totalActualConsumeAmount'
      },
      {
        title: '充值金额',
        dataIndex: 'totalDepositAmount'
      },
      {
        title: '处理金额',
        dataIndex: 'totalManualHandleAmount'
      },
      {
        title: '消耗金额(未扣减)',
        dataIndex: 'totalConsumeAmount'
      },
      {
        title: '扣减金额',
        dataIndex: 'totalReturnAmount'
      },
      {
        title: '处理日期',
        dataIndex: 'createdAt'
      }
    ];
    const tableData = ref<KamiApiSysPaymentV1PaymentSummaryRecord[]>([]);

    const fetchData = (
      page: Pagination = pagination,
      params: IformData = formModel.value
    ) => {
      apiClient
        .apiSysUserPaymentSummaryListGet({
          current: page.current,
          pageSize:
            page.pageSize as ApiSysUserPaymentSummaryListGetPageSizeEnum,
          username: params.username,
          date: params.date
        })
        .then(res => {
          tableData.value = res.data.list;
          pagination.total = res.data.total;
        });
    };
    const reset = () => {
      formModel.value = generateFormModel();
    };
    onMounted(() => {
      fetchData();
    });
    return () => (
      <>
        <Row>
          <Col flex={1}>
            <Form model={formModel}>
              <Row gutter={16}>
                <Col span={8}>
                  <FormItem field='username' label='用户名'>
                    <Input
                      v-model={formModel.value.username}
                      placeholder='请输入用户名'
                    />
                  </FormItem>
                </Col>
                <Col span={16}>
                  <FormItem field='date' label='查询日期'>
                    <DatePicker v-model={formModel.value.date} />
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </Col>
          <Divider style='height: 42px' direction='vertical' />
          <Col flex='172px' style='text-align: right'>
            <Space direction='horizontal' size={18}>
              <Button
                type='primary'
                onClick={() => fetchData()}
                v-slots={{
                  icon: () => <icon-search />
                }}
              >
                搜索
              </Button>
              <Button
                onClick={reset}
                v-slots={{
                  icon: () => <icon-refresh />
                }}
              >
                重置
              </Button>
            </Space>
          </Col>
        </Row>
        <Table
          columns={columns}
          data={tableData.value}
          pagination={pagination}
          onPageChange={(current: number) => {
            pagination.current = current;
            fetchData();
          }}
        />
      </>
    );
  }
});
