<script setup lang="ts">
/**
 * 文件职责：新客有礼邀请记录表格。
 * 1. 渲染邀请记录状态与分页。
 */
import type { NewCustomerInviteRecordViewModel } from '../types';

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

import {
  NEW_CUSTOMER_ORDER_STATUS_TEXT_MAP,
  NEW_CUSTOMER_REWARD_STATUS_TEXT_MAP,
} from '../composables/new-customer-page/constants';

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

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

const columns = [
  {
    title: '邀请人',
    dataIndex: 'inviterName',
    key: 'inviterName',
  },
  {
    title: '被邀请人',
    dataIndex: 'inviteeName',
    key: 'inviteeName',
  },
  {
    title: '邀请时间',
    dataIndex: 'inviteTime',
    key: 'inviteTime',
  },
  {
    title: '状态',
    dataIndex: 'orderStatus',
    key: 'orderStatus',
  },
  {
    title: '奖励发放',
    dataIndex: 'rewardStatus',
    key: 'rewardStatus',
  },
];

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

function resolveOrderStatusText(status: unknown) {
  if (status === 'ordered' || status === 'pending_order') {
    return NEW_CUSTOMER_ORDER_STATUS_TEXT_MAP[status];
  }
  return NEW_CUSTOMER_ORDER_STATUS_TEXT_MAP.pending_order;
}

function resolveRewardStatusText(status: unknown) {
  if (status === 'issued' || status === 'pending') {
    return NEW_CUSTOMER_REWARD_STATUS_TEXT_MAP[status];
  }
  return NEW_CUSTOMER_REWARD_STATUS_TEXT_MAP.pending;
}
</script>

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

      <template v-else-if="column.key === 'rewardStatus'">
        <span
          class="mnc-status-tag"
          :class="record.rewardStatus === 'issued' ? 'is-green' : 'is-gray'"
        >
          {{ resolveRewardStatusText(record.rewardStatus) }}
        </span>
      </template>
    </template>
  </Table>
</template>
