<template>
  <div>
    <a-row>
      <a-col :flex="1">
        <a-form
          :model="formModel"
          :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }"
          label-align="left"
        >
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item field="account" label="账号">
                <a-input v-model="formModel.account" placeholder="请输入账号" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
      <a-divider style="height: 42px" direction="vertical" />
      <a-col flex="172px" style="text-align: right">
        <a-space direction="horizontal" :size="18">
          <a-button type="primary" @click="search">
            <template #icon>
              <icon-search />
            </template>
            搜索
          </a-button>
          <a-button @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            重置
          </a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-divider style="margin-top: 0" />
    <a-table
      :loading="loading"
      :pagination="{
        current: pagination.current,
        pageSize: pagination.pageSize,
        total: pagination.total,
        pageSizeOptions: [10, 20, 50, 100],
        showPageSize: true
      }"
      :columns="columns"
      :data="renderData"
      :scroll="{ x: 1080 }"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
    >
      <template #index="{ rowIndex }">
        {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { apiClient } from '@/api';
import {
  ApiCardInfoAppleCardAccountGetWalletListGetPageSizeEnum,
  KamiApiCardInfoAppleV1CardHistoryModel
} from '@/api/generated';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { reactive, ref } from 'vue';

const columns = [{}];

const formModel = reactive({
  account: ''
});
const basePagination: Pagination = {
  current: 1,
  pageSize: 50
};
const pagination = reactive({
  ...basePagination
});
const reset = () => {
  formModel.account = '';
  pagination.current = 1;
  search();
};

const { loading, setLoading } = useLoading(false);
const renderData = ref<KamiApiCardInfoAppleV1CardHistoryModel[]>([]);

const search = async () => {
  try {
    setLoading(true);
    const result = await apiClient.apiCardInfoAppleCardAccountGetWalletListGet({
      current: pagination.current,
      pageSize:
        pagination.pageSize as ApiCardInfoAppleCardAccountGetWalletListGetPageSizeEnum,
      accountId: formModel.account
    });
    renderData.value = result.data.list;
    pagination.total = result.data.total;
  } finally {
    setLoading(false);
  }
};

const onPageChange = (page: number) => {
  pagination.current = page;
  search();
};

const onPageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize;
  search();
};
</script>
