<script setup lang="ts">
defineOptions({
  name: "CouponPreview"
});

const props = defineProps({
  coupon: {
    type: Object,
    default: () => ({
      name: "优惠券名称",
      type: 1,
      value: 10,
      minAmount: 50,
      description: "优惠券使用说明"
    })
  }
});

const typeMap = {
  1: { name: "满减券", prefix: "满", suffix: "减" },
  2: { name: "折扣券", prefix: "", suffix: "折" },
  3: { name: "现金券", prefix: "", suffix: "元" },
  4: { name: "兑换券", prefix: "", suffix: "" }
};

const getTypeInfo = () => {
  return typeMap[props.coupon.type] || typeMap[1];
};
</script>

<template>
  <div class="coupon-preview">
    <div class="coupon-card">
      <div class="coupon-header">
        <div class="coupon-type">{{ getTypeInfo().name }}</div>
        <div class="coupon-value">
          <span class="prefix">{{ getTypeInfo().prefix }}</span>
          <span class="amount">{{ coupon.value }}</span>
          <span class="suffix">{{ getTypeInfo().suffix }}</span>
        </div>
      </div>
      <div class="coupon-body">
        <div class="coupon-name">{{ coupon.name }}</div>
        <div v-if="coupon.minAmount && coupon.minAmount > 0" class="coupon-condition">
          满{{ coupon.minAmount }}元可用
        </div>
        <div class="coupon-description">{{ coupon.description || "暂无说明" }}</div>
      </div>
      <div class="coupon-footer">
        <div class="store-info">适用门店：全部门店</div>
        <div class="valid-period">有效期：长期有效</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.coupon-preview {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  
  .coupon-card {
    width: 300px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    
    .coupon-header {
      background: linear-gradient(135deg, #ff6b6b, #ee5a52);
      color: white;
      padding: 20px;
      text-align: center;
      
      .coupon-type {
        font-size: 14px;
        margin-bottom: 8px;
        opacity: 0.9;
      }
      
      .coupon-value {
        font-size: 28px;
        font-weight: bold;
        
        .prefix {
          font-size: 16px;
          vertical-align: super;
        }
        
        .amount {
          font-size: 32px;
        }
        
        .suffix {
          font-size: 16px;
          vertical-align: super;
        }
      }
    }
    
    .coupon-body {
      padding: 20px;
      border-bottom: 1px dashed #eee;
      
      .coupon-name {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 8px;
      }
      
      .coupon-condition {
        font-size: 14px;
        color: #ff6b6b;
        margin-bottom: 12px;
        font-weight: 500;
      }
      
      .coupon-description {
        font-size: 12px;
        color: #666;
        line-height: 1.5;
      }
    }
    
    .coupon-footer {
      padding: 16px 20px;
      font-size: 12px;
      color: #999;
      
      .store-info,
      .valid-period {
        margin-bottom: 4px;
      }
    }
  }
}
</style>