<script setup lang="ts">
import Card from '@/components/card.vue'
import { Coupon } from '../../../core/libs/models'
import dayjs from 'dayjs'
withDefaults(defineProps<{ options?: Coupon; canSelect?: boolean; selected?: boolean }>(), {
  canSelect: false,
  selected: false,
})
const emits = defineEmits<{ select: [coupon: Coupon] }>()
</script>
<template>
  <Card custom-class="mx-3.5">
    <div class="flex gap-3">
      <div class="w-[94px] h-[94px] bg-[#f6f6f6] rounded-2.5 overflow-hidden">
        <template v-if="options.couponType === 1">
          <div class="bg-[#fff8f8] w-full h-full flex flex-col items-center justify-center">
            <div class="text-[#ff7878] text-[26px] font-normal font-['PingFang_SC']">
              {{ options.brandPoints }}
            </div>
            <div class="text-[#ff7878] text-base font-normal font-['PingFang_SC']">积分</div>
          </div>
        </template>
        <template v-else>
          <wd-img width="100%" height="100%" :src="options.couponImgUrl"></wd-img>
        </template>
      </div>
      <div class="flex-1 flex flex-col justify-around">
        <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-normal">
          <!-- GELATO咖啡兑换券 -->
          {{ options.couponName }}
        </div>
        <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
          有效期：
          <!-- 2024/04/01-2024/05/30 -->
          {{ dayjs(options.validityStartDate).format('YYYY/MM/DD') }}-{{
            dayjs(options.validityEndDate).format('YYYY/MM/DD')
          }}
        </div>
        <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
          使用说明
        </div>
      </div>
      <div class="flex items-center" v-if="canSelect" @click="emits('select', options)">
        <div
          class="w-4 h-4 rounded-full border border-black/60 border-solid"
          :class="`${selected ? 'bg-black' : ''}`"
        ></div>
      </div>
    </div>
  </Card>
</template>
