<script setup lang="ts">
/**
 * 文件职责：新客有礼券组渲染组件。
 * 1. 展示券列表、删除与添加入口。
 */
import type { NewCustomerCouponFormItem } from '../types';

import { IconifyIcon } from '@vben/icons';

import { Button, Empty } from 'ant-design-vue';

import {
  formatCouponDescription,
  formatCouponName,
} from '../composables/new-customer-page/helpers';

defineProps<{
  addText: string;
  canManage: boolean;
  coupons: NewCustomerCouponFormItem[];
  description?: string;
  title: string;
}>();

const emit = defineEmits<{
  (event: 'add'): void;
  (event: 'remove', index: number): void;
}>();
</script>

<template>
  <div class="mnc-coupon-group">
    <div class="mnc-coupon-group-title">
      {{ title }}
      <span v-if="description" class="mnc-coupon-group-desc">{{
        description
      }}</span>
    </div>

    <div v-if="coupons.length > 0" class="mnc-coupon-list">
      <div
        v-for="(item, index) in coupons"
        :key="`${item.id}-${index}`"
        class="mnc-coupon-item"
      >
        <div class="mnc-coupon-info">
          <div class="mnc-coupon-name">{{ formatCouponName(item) }}</div>
          <div class="mnc-coupon-desc">{{ formatCouponDescription(item) }}</div>
        </div>

        <div class="mnc-coupon-validity">
          <IconifyIcon icon="lucide:clock-3" />
          领取后{{ item.validDays }}天
        </div>

        <Button
          v-if="canManage"
          type="text"
          danger
          class="mnc-coupon-remove"
          @click="emit('remove', index)"
        >
          <IconifyIcon icon="lucide:trash-2" />
        </Button>
      </div>
    </div>

    <Empty v-else class="mnc-coupon-empty" description="暂未添加优惠券" />

    <button
      v-if="canManage"
      type="button"
      class="mnc-add-coupon-btn"
      @click="emit('add')"
    >
      <IconifyIcon icon="lucide:plus" />
      {{ addText }}
    </button>
  </div>
</template>
