<script setup lang="ts">
import type { TableColumnType } from 'ant-design-vue';

import type { StoredCardRecordPager } from '../types';

import type { MemberStoredCardRechargeRecordDto } from '#/api/member/stored-card';

import { Pagination, Table, Tag } from 'ant-design-vue';

import {
  STORED_CARD_PAYMENT_METHOD_COLOR_MAP,
  STORED_CARD_PAYMENT_METHOD_TEXT_MAP,
} from '../composables/stored-card-page/constants';
import { formatCurrency } from '../composables/stored-card-page/helpers';

defineProps<{
  loading: boolean;
  pager: StoredCardRecordPager;
}>();

const emit = defineEmits<{
  (event: 'pageChange', page: number, pageSize: number): void;
}>();

const columns: TableColumnType<MemberStoredCardRechargeRecordDto>[] = [
  {
    title: '充值单号',
    dataIndex: 'recordNo',
    key: 'recordNo',
    width: 220,
  },
  {
    title: '会员',
    dataIndex: 'memberName',
    key: 'memberName',
    width: 170,
  },
  {
    title: '充值金额',
    dataIndex: 'rechargeAmount',
    key: 'rechargeAmount',
    width: 130,
  },
  {
    title: '赠送金额',
    dataIndex: 'giftAmount',
    key: 'giftAmount',
    width: 130,
  },
  {
    title: '到账金额',
    dataIndex: 'arrivedAmount',
    key: 'arrivedAmount',
    width: 130,
  },
  {
    title: '支付方式',
    dataIndex: 'paymentMethod',
    key: 'paymentMethod',
    width: 130,
  },
  {
    title: '充值时间',
    dataIndex: 'rechargedAt',
    key: 'rechargedAt',
    width: 190,
  },
];

function resolvePaymentMethodColor(value: string) {
  return (
    STORED_CARD_PAYMENT_METHOD_COLOR_MAP[
      value as keyof typeof STORED_CARD_PAYMENT_METHOD_COLOR_MAP
    ] ?? 'default'
  );
}

function resolvePaymentMethodText(record: Record<string, any>) {
  if (record.paymentMethodText) {
    return record.paymentMethodText;
  }

  return (
    STORED_CARD_PAYMENT_METHOD_TEXT_MAP[
      record.paymentMethod as keyof typeof STORED_CARD_PAYMENT_METHOD_TEXT_MAP
    ] ?? '未知'
  );
}
</script>

<template>
  <div class="msc-record-table-wrap">
    <Table
      :columns="columns"
      :data-source="pager.items"
      :loading="loading"
      :pagination="false"
      row-key="recordId"
      class="msc-record-table"
      :scroll="{ x: 1020 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'recordNo'">
          <div class="msc-record-no">{{ record.recordNo }}</div>
        </template>
        <template v-else-if="column.key === 'memberName'">
          <div class="msc-record-member">
            <span class="msc-record-member-name">{{ record.memberName }}</span>
            <span class="msc-record-member-phone">{{
              record.memberMobileMasked
            }}</span>
          </div>
        </template>
        <template v-else-if="column.key === 'rechargeAmount'">
          <span class="msc-record-amount">
            {{ formatCurrency(record.rechargeAmount) }}
          </span>
        </template>
        <template v-else-if="column.key === 'giftAmount'">
          <span class="msc-record-amount is-gift">
            {{ formatCurrency(record.giftAmount) }}
          </span>
        </template>
        <template v-else-if="column.key === 'arrivedAmount'">
          <span class="msc-record-amount">
            {{ formatCurrency(record.arrivedAmount) }}
          </span>
        </template>
        <template v-else-if="column.key === 'paymentMethod'">
          <Tag :color="resolvePaymentMethodColor(record.paymentMethod)">
            {{ resolvePaymentMethodText(record) }}
          </Tag>
        </template>
      </template>
    </Table>

    <div class="msc-pagination">
      <Pagination
        :current="pager.page"
        :page-size="pager.pageSize"
        :total="pager.totalCount"
        show-size-changer
        :show-total="(value) => `共 ${value} 条`"
        :page-size-options="['8', '16', '24', '40']"
        @change="(page, pageSize) => emit('pageChange', page, pageSize)"
      />
    </div>
  </div>
</template>
