<template>
  <a-drawer
    :visible="drawVisible"
    width="70%"
    :footer="false"
    unmountOnClose
    @open="openDrawer"
    @cancel="closeDrawer"
  >
    <template #title>账户流水</template>
    <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"
      size="small"
      column-resizable:bordered="{cell:true}"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
    >
      <template #index="{ rowIndex }">
        {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
      </template>
    </a-table>
  </a-drawer>
</template>

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

import { computed, 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: 'balanceBeforeAutoIncrement'
  },
  {
    title: '充值后(自然计算)',
    dataIndex: 'balanceAfterAutoIncrement'
  },
  {
    title: '充值后(Itunes)',
    dataIndex: 'balanceAfterItunes'
  },
  {
    title: '充值订单',
    dataIndex: 'orderNo'
  },
  {
    title: '备注',
    dataIndex: 'description'
  },
  {
    title: '充值时间',
    dataIndex: 'createdAt',
    slotName: 'createdAt'
  }
];
const { loading, setLoading } = useLoading(true);
const renderData = ref<AppleWalletListItem[]>([]);

const props = defineProps<{
  visible: boolean;
  accountId: string;
}>();
const state = reactive({
  visible: false
});
const emits = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
}>();

onMounted(() => {
  state.visible = props.visible;
});

const drawVisible = computed(() => props.visible);

const fetchData = async (
  params: AppleWalletParams = {
    current: 1,
    pageSize: 50
  }
) => {
  setLoading(true);
  try {
    params.accountId = props.accountId;
    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 closeDrawer = () => {
  emits('update:visible', false);
};
const openDrawer = () => {
  fetchData();
};
</script>
