<template>
  <view class="coupon-card">
    <view class="coupon-info">
      <text class="coupon-name">{{ coupon.name }}</text>
      <text class="coupon-type">
        {{ coupon.type === 'thresholddiscount' ? `满${coupon.thresholdAmount}减${coupon.discountAmount}` : `抵扣${coupon.discountAmount}元` }}
      </text>
      <text class="coupon-expire">{{ t('home.pointsRequired', { points: coupon.requiredPoints }) }} · {{ formatExpire(coupon.expireAt) }}</text>
    </view>
    <view class="coupon-action">
      <view
        class="redeem-btn"
        :class="{ disabled: redeemed }"
        @click="handleRedeem"
      >
        <text class="redeem-btn-text">{{ redeemed ? t('stamps.redeemedBtn') : t('home.redeemBtn') }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const props = defineProps({
  coupon: {
    type: Object,
    required: true
  },
  redeemed: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['redeem'])

function handleRedeem() {
  if (props.redeemed) return
  emit('redeem', props.coupon)
}

// 格式化到期时间
function formatExpire(dateStr) {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}
</script>

<style scoped>
.coupon-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.coupon-info {
  flex: 1;
  margin-right: 20rpx;
}

.coupon-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 8rpx;
}

.coupon-type {
  font-size: 24rpx;
  color: #ff6600;
  display: block;
  margin-bottom: 8rpx;
}

.coupon-expire {
  font-size: 22rpx;
  color: #999;
  display: block;
}

.redeem-btn {
  padding: 14rpx 32rpx;
  background-color: #007aff;
  border-radius: 30rpx;
}

.redeem-btn.disabled {
  background-color: #cccccc;
}

.redeem-btn-text {
  font-size: 26rpx;
  color: #ffffff;
  white-space: nowrap;
}
</style>
