<script setup lang="ts">
import type { PointMallRecordDetailViewModel } from '../types';

import { Drawer, Spin } from 'ant-design-vue';

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

defineProps<{
  loading: boolean;
  open: boolean;
  record: null | PointMallRecordDetailViewModel;
}>();

const emit = defineEmits<{
  (event: 'close'): void;
}>();
</script>

<template>
  <Drawer
    :open="open"
    title="兑换详情"
    width="520"
    class="mpm-detail-drawer"
    @close="emit('close')"
  >
    <Spin :spinning="loading">
      <div v-if="record" class="mpm-detail-content">
        <div class="mpm-detail-top">
          <div class="name">{{ record.productName }}</div>
          <span
            class="mpm-type-tag"
            :class="POINTS_MALL_REDEEM_TYPE_CLASS_MAP[record.redeemType]"
          >
            {{ record.redeemTypeText }}
          </span>
        </div>

        <div class="mpm-detail-grid">
          <div class="item">
            <span class="label">兑换单号</span>
            <span class="value mono">{{ record.recordNo }}</span>
          </div>
          <div class="item">
            <span class="label">状态</span>
            <span
              class="value mpm-record-status"
              :class="POINTS_MALL_RECORD_STATUS_CLASS_MAP[record.status]"
            >
              {{ record.statusText }}
            </span>
          </div>
          <div class="item">
            <span class="label">会员</span>
            <span class="value">{{ record.memberName }}</span>
          </div>
          <div class="item">
            <span class="label">手机号</span>
            <span class="value">{{ record.memberMobileMasked }}</span>
          </div>
          <div class="item">
            <span class="label">消耗积分</span>
            <span class="value">{{ formatPoints(record.usedPoints) }}</span>
          </div>
          <div class="item">
            <span class="label">现金部分</span>
            <span class="value">{{ formatCurrency(record.cashAmount) }}</span>
          </div>
          <div class="item">
            <span class="label">兑换时间</span>
            <span class="value">{{ record.redeemedAt }}</span>
          </div>
          <div class="item">
            <span class="label">发放时间</span>
            <span class="value">{{ record.issuedAt || '-' }}</span>
          </div>
          <div class="item">
            <span class="label">核销时间</span>
            <span class="value">{{ record.verifiedAt || '-' }}</span>
          </div>
          <div class="item">
            <span class="label">核销方式</span>
            <span class="value">{{ record.verifyMethodText || '-' }}</span>
          </div>
          <div class="item">
            <span class="label">核销备注</span>
            <span class="value">{{ record.verifyRemark || '-' }}</span>
          </div>
          <div class="item">
            <span class="label">核销人</span>
            <span class="value">{{ record.verifiedBy || '-' }}</span>
          </div>
        </div>
      </div>
      <div v-else class="mpm-empty-tip">暂无记录详情</div>
    </Spin>
  </Drawer>
</template>
