<template>
  <label
    class="coupon-item"
    :class="{'unavailable': !canUse, 'general': isPlat }"
    @tap="checkCoupon(item.couponId, index)"
  >
    <view class="c-price">
      <view class="price-box">
        <view class="price">
          <view
            v-if="item.couponType===1"
            class="symbol"
          >￥</view>
          <view
            v-if="item.couponType===1"
            class="big"
          >{{ wxs.parsePrice(item.reduceAmount)[0] }}<text style="font-size:24rpx;">.{{ wxs.parsePrice(item.reduceAmount)[1] }}</text></view>
          <view
            v-if="item.couponType===2"
            class="big"
          >{{ item.couponDiscount }}</view>
          <view
            v-if="item.couponType===2"
            class="symbol"
          >折</view>
        </view>
        <view class="c-condition">满{{ wxs.parsePrice(item.cashCondition)[0] }}.{{ wxs.parsePrice(item.cashCondition)[1] }}可用</view>
      </view>
    </view>
    <view class="text-box">
      <view class="c-des">
        <text class="c-style">{{ isPlat?'平台':'店铺' }}</text>
        <text
          v-if="item.shopId !== 0"
          class="text"
        >可用于购买{{ item.shopName || '' }}{{ item.suitableProdType === 0 ? '全部' : '指定' }}商品</text>
        <text
          v-else
          class="text"
        >{{ item.suitableProdType === 0 ? '平台全品类商品' : '平台指定商品' }}</text>
      </view>
      <view class="c-time">
        <view class="time">有效期至：{{ wxs.spliceDate(item.endTime) }}</view>
      </view>
      <label
        v-if="canUse"
        class="check"
      >
        <radio
          v-if="item.choose"
          :checked="true"
          color="#fc1b35"
          @tap.stop="checkCoupon(item.couponId, index)"
        />
        <radio
          v-else
          color="#fc1b35"
          :checked="false"
          @tap.stop="checkCoupon(item.couponId, index)"
        />
      </label>
    </view>
  </label>
</template>

<script setup>
import number from '@/wxs/number'

const wxs = number()

// eslint-disable-next-line no-unused-vars
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  canUse: {
    type: Boolean,
    default: false
  },
  index: {
    type: Number,
    default: 0
  },
  isPlat: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['checkCoupon', 'choosedCoupon', 'closePopup'])

/**
 * 选择优惠券
 */
const checkCoupon = (id, idx) => {
  emit('checkCoupon', {
    couponId: id,
    index: idx
  })
}

/**
 * 确定选择的优惠券
 */
// eslint-disable-next-line no-unused-vars
const confirmCheckCoupon = () => {
  emit('choosedCoupon')
}

/**
 * 关闭弹窗
 */
// eslint-disable-next-line no-unused-vars
const closePopup = () => {
  emit('closePopup')
}

</script>

<style lang="scss" scoped>
@use "../../../popup";
</style>
<style lang="scss" scoped>
@use "../../pages/submit-order/submit-order";
</style>
