<script setup lang="ts">
/**
 * 文件职责：次卡使用记录表格。
 */
import type { PunchCardUsageRecordViewModel } from '../types';

import { Table } from 'ant-design-vue';

import { resolveUsageStatusClass } from '../composables/punch-card-page/helpers';

defineProps<{
  loading: boolean;
  page: number;
  pageSize: number;
  records: PunchCardUsageRecordViewModel[];
  total: number;
}>();

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

const columns = [
  {
    title: '使用单号',
    dataIndex: 'recordNo',
    key: 'recordNo',
    width: 170,
  },
  {
    title: '会员',
    dataIndex: 'memberName',
    key: 'memberName',
    width: 160,
  },
  {
    title: '次卡',
    dataIndex: 'punchCardName',
    key: 'punchCardName',
    width: 140,
  },
  {
    title: '兑换商品',
    dataIndex: 'productName',
    key: 'productName',
  },
  {
    title: '使用时间',
    dataIndex: 'usedAt',
    key: 'usedAt',
    width: 170,
  },
  {
    title: '剩余次数',
    dataIndex: 'remainingTimesAfterUse',
    key: 'remainingTimesAfterUse',
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'displayStatus',
    key: 'displayStatus',
    width: 110,
  },
];

function handleTableChange(pagination: {
  current?: number;
  pageSize?: number;
}) {
  emit('pageChange', pagination.current ?? 1, pagination.pageSize ?? 10);
}
</script>

<template>
  <Table
    :loading="loading"
    :columns="columns"
    :data-source="records"
    :pagination="{
      current: page,
      pageSize,
      total,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      showTotal: (value) => `共 ${value} 条`,
    }"
    row-key="id"
    size="middle"
    @change="handleTableChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'recordNo'">
        <span class="mpc-record-no">{{ record.recordNo }}</span>
      </template>

      <template v-else-if="column.key === 'memberName'">
        <div class="mpc-record-member">
          <span class="mpc-record-member-name">{{ record.memberName }}</span>
          <span class="mpc-record-member-phone">{{
            record.memberPhoneMasked
          }}</span>
        </div>
      </template>

      <template v-else-if="column.key === 'remainingTimesAfterUse'">
        <span class="mpc-record-remaining">
          {{ record.remainingTimesAfterUse }}/{{ record.totalTimes }}
        </span>
      </template>

      <template v-else-if="column.key === 'displayStatus'">
        <span
          class="mpc-record-status"
          :class="resolveUsageStatusClass(record.displayStatus)"
        >
          {{ record.displayStatusText }}
        </span>
      </template>
    </template>
  </Table>
</template>
