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

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

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

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

const emit = defineEmits<{
  (event: 'close'): void;
  (event: 'setVerifyMethod', value: 'manual' | 'scan'): void;
  (event: 'setVerifyRemark', value: string): void;
  (event: 'submit'): void;
}>();

function resolveMemberText(record: PointMallRecordDetailViewModel) {
  return `${record.memberName} (${record.memberMobileMasked})`;
}
</script>

<template>
  <Drawer
    :open="open"
    title="兑换核销"
    width="460"
    class="mpm-verify-drawer"
    @close="emit('close')"
  >
    <div v-if="record" class="mpm-verify-content">
      <div class="mpm-verify-card">
        <div class="mpm-verify-product">
          <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-verify-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 is-primary">{{
              formatPoints(record.usedPoints)
            }}</span>
          </div>
          <div class="item">
            <span class="label">兑换会员</span>
            <span class="value">{{ resolveMemberText(record) }}</span>
          </div>
          <div class="item">
            <span class="label">兑换时间</span>
            <span class="value">{{ record.redeemedAt }}</span>
          </div>
        </div>
      </div>

      <Form layout="vertical">
        <Form.Item label="核销方式">
          <div class="mpm-pill-row">
            <button
              v-for="item in POINTS_MALL_VERIFY_METHOD_OPTIONS"
              :key="item.value"
              type="button"
              class="mpm-pill"
              :class="{ checked: form.verifyMethod === item.value }"
              :disabled="!canManage || loading"
              @click="emit('setVerifyMethod', item.value)"
            >
              {{ item.label }}
            </button>
          </div>
        </Form.Item>

        <Form.Item label="核销备注">
          <Input.TextArea
            :value="form.verifyRemark"
            :rows="3"
            :maxlength="256"
            :disabled="!canManage || loading"
            placeholder="可选，如：顾客已到店领取"
            @update:value="
              (value) => emit('setVerifyRemark', String(value ?? ''))
            "
          />
        </Form.Item>
      </Form>
    </div>

    <template #footer>
      <div class="mpm-drawer-footer">
        <button type="button" class="g-btn" @click="emit('close')">取消</button>
        <button
          type="button"
          class="g-btn g-btn-primary"
          :disabled="!canManage || loading || submitting"
          @click="emit('submit')"
        >
          确认核销
        </button>
      </div>
    </template>
  </Drawer>
</template>
