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

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

import type { MemberPointMallRecordDto } from '#/api/member/points-mall';

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

import {
  POINTS_MALL_RECORD_STATUS_CLASS_MAP,
  POINTS_MALL_REDEEM_TYPE_CLASS_MAP,
} from '../composables/points-mall-page/constants';
import { formatPoints } from '../composables/points-mall-page/helpers';

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

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

const columns: TableColumnType<MemberPointMallRecordDto>[] = [
  {
    title: '兑换单号',
    dataIndex: 'recordNo',
    key: 'recordNo',
    width: 190,
  },
  {
    title: '会员',
    dataIndex: 'memberName',
    key: 'memberName',
    width: 160,
  },
  {
    title: '兑换商品',
    dataIndex: 'productName',
    key: 'productName',
    width: 180,
  },
  {
    title: '类型',
    dataIndex: 'redeemTypeText',
    key: 'redeemTypeText',
    width: 120,
  },
  {
    title: '消耗积分',
    dataIndex: 'usedPoints',
    key: 'usedPoints',
    width: 120,
  },
  {
    title: '兑换时间',
    dataIndex: 'redeemedAt',
    key: 'redeemedAt',
    width: 180,
  },
  {
    title: '状态',
    dataIndex: 'statusText',
    key: 'statusText',
    width: 130,
  },
  {
    title: '操作',
    dataIndex: 'actions',
    key: 'actions',
    width: 120,
    fixed: 'right',
  },
];

function canVerify(record: MemberPointMallRecordDto, canManage: boolean) {
  return (
    canManage &&
    record.redeemType === 'physical' &&
    record.status === 'pending_pickup'
  );
}

function asRecord(record: unknown) {
  return record as MemberPointMallRecordDto;
}
</script>

<template>
  <div class="mpm-record-table-wrap">
    <Table
      row-key="recordId"
      :columns="columns"
      :loading="loading"
      :pagination="false"
      :data-source="pager.items"
      :scroll="{ x: 1180 }"
      class="mpm-record-table"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'recordNo'">
          <div class="mpm-record-no">{{ record.recordNo }}</div>
        </template>

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

        <template v-else-if="column.key === 'redeemTypeText'">
          <span
            class="mpm-type-tag"
            :class="
              POINTS_MALL_REDEEM_TYPE_CLASS_MAP[asRecord(record).redeemType]
            "
          >
            {{ asRecord(record).redeemTypeText }}
          </span>
        </template>

        <template v-else-if="column.key === 'usedPoints'">
          <span class="mpm-record-points">
            {{ formatPoints(asRecord(record).usedPoints) }}
          </span>
        </template>

        <template v-else-if="column.key === 'statusText'">
          <span
            class="mpm-record-status"
            :class="
              POINTS_MALL_RECORD_STATUS_CLASS_MAP[asRecord(record).status]
            "
          >
            {{ asRecord(record).statusText }}
          </span>
        </template>

        <template v-else-if="column.key === 'actions'">
          <button
            v-if="canVerify(asRecord(record), canManage)"
            type="button"
            class="g-action"
            @click="emit('verify', asRecord(record).recordId)"
          >
            核销
          </button>
          <button
            type="button"
            class="g-action"
            @click="emit('detail', asRecord(record).recordId)"
          >
            详情
          </button>
        </template>
      </template>
    </Table>

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