<template>
  <div class="container">
    <Breadcrumb :items="['充值账户管理', '账户流水']" />
    <a-card class="general-card" title="账户流水">
      <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
        row-key="id"
        :loading="loading"
        :pagination="{
          current: pagination.current,
          pageSize: pagination.pageSize,
          total: pagination.total,
          pageSizeOptions: [10, 20, 50, 100],
          showPageSize: true
        }"
        :columns="columns"
        :data="renderData"
        :bordered="false"
        column-resizable:bordered="{cell:true}"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <template #index="{ rowIndex }">{{ rowIndex + 1 }}</template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';

import { onMounted, reactive, ref } from 'vue';
import {
  AppleWalletListItem,
  AppleWalletParams,
  queryAppleWalletList
} from '@/api/apple-card-info';
import { TableColumnData } from '@arco-design/web-vue';

const basePagination: Pagination = {
  current: 1,
  pageSize: 50
};
const pagination = reactive({
  ...basePagination
});
const columns: TableColumnData[] = [
  {
    title: '序号',
    slotName: 'index'
  },
  {
    title: '金额变化',
    dataIndex: 'amount'
  },
  {
    title: '账户名称',
    dataIndex: 'accountName'
  },
  {
    title: '充值订单号',
    dataIndex: 'orderNo'
  },
  {
    title: '余额(自然计算)',
    dataIndex: 'balanceBeforeAutoIncrement'
  },
  {
    title: '充值后(自然计算)',
    dataIndex: 'balanceAfterAutoIncrement'
  },
  {
    title: '余额(Itunes)',
    dataIndex: 'balanceBeforeItunes'
  },
  {
    title: '充值后(Itunes)',
    dataIndex: 'balanceAfterItunes'
  },
  {
    title: '备注',
    dataIndex: 'description'
  },
  {
    title: '充值时间',
    dataIndex: 'createdAt',
    slotName: 'createdAt'
  }
];
const generateFormModel = () => {
  return {
    account: ''
  };
};
const { loading, setLoading } = useLoading(true);
const renderData = ref<AppleWalletListItem[]>([]);
const formModel = ref(generateFormModel());
const state = reactive({
  addModalVisible: false,
  deployModalVisible: false,
  accountId: '',
  account: ''
});
const fetchData = async (
  params: AppleWalletParams = { current: 1, pageSize: 50 }
) => {
  setLoading(true);
  try {
    const {
      data: { list, total }
    } = await queryAppleWalletList(params);
    renderData.value = list;
    pagination.current = params.current;
    pagination.pageSize = params.pageSize;
    pagination.total = total;
  } catch (err) {
    console.error(err);
  } finally {
    setLoading(false);
  }
};
const onPageChange = (current: number) => {
  fetchData({ ...pagination, current });
};
const onPageSizeChange = (pageSize: number) => {
  fetchData({ ...pagination, pageSize });
};
const search = () => {
  fetchData({
    ...basePagination,
    ...formModel.value
  });
};
const reset = () => {
  formModel.value = generateFormModel();
};
onMounted(() => {
  fetchData();
});
</script>
