<template>
  <!-- 平台券加上这个类 general -->
  <view :class="['coupon-item', couponItem.shopId===0?'general': '']">
    <view class="c-price">
      <view class="price-box">
        <view class="price">
          <view
            v-if="couponItem.couponType===1"
            class="symbol"
          >
            ￥
          </view>
          <view v-if="couponItem.couponType===1">
            <text class="big">
              {{ wxs.parsePrice(couponItem.reduceAmount)[0] }}
            </text>
            <text class="small">
              .{{ wxs.parsePrice(couponItem.reduceAmount)[1] }}
            </text>
          </view>
          <view
            v-if="couponItem.couponType===2"
            class="big"
          >
            {{ couponItem.couponDiscount }}
          </view>
          <view
            v-if="couponItem.couponType===2"
            class="symbol"
          >
            折
          </view>
        </view>
        <view class="c-condition">
          满{{ wxs.parsePrice(couponItem.cashCondition)[0] }}.{{ wxs.parsePrice(couponItem.cashCondition)[1] }}元可用
        </view>
      </view>
    </view>
    <view class="text-box">
      <view class="c-des">
        <text class="c-style">
          {{ couponItem.shopId===0?'平台':'店铺' }}
        </text>
        <text class="text">
          可用于购买{{ couponItem.shopName?couponItem.shopName:'' }}{{ couponItem.suitableProdType===0? '所有商品' : '指定商品' }}
        </text>
      </view>
      <view class="c-time">
        <!-- <view class="time">有效期至：{{ wxs.spliceDate(couponItem.endTime) }}</view> -->
        <view
          v-if="couponItem.validTimeType===1"
          class="time"
        >
          有效期至：{{ wxs.spliceDate(couponItem.endTime) }}
        </view>
        <view
          v-if="couponItem.validTimeType===2"
          class="time"
        >
          领券后{{ couponItem.validDays }}天有效
        </view>
        <view
          v-if="couponItem.hasReceive!==1"
          class="btn"
          @tap="receiveCouponByCouponId(couponItem.couponId)"
        >
          立即领券
        </view>
        <view
          v-if="couponItem.hasReceive===1"
          class="btn get"
          @tap="useCoupon(couponItem)"
        >
          立即使用
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const wxs = number()
const props = defineProps({
  couponItemParent: {
    type: Object,
    default: () => {}
  },
  index: {
    type: Number,
    default: null
  }
})
const emit = defineEmits(['receiveCouponByCouponId'])
const couponItem = ref(props.couponItemParent)
watch(() => props.couponItemParent, (newData) => {
  couponItem.value = newData
}, {
  deep: true,
  immediate: true
})

/**
 * 领券
 */
const receiveCouponByCouponId = (couponId) => {
  emit('receiveCouponByCouponId',
    {
      couponId,
      index: props.index
    }
  )
}

/**
 * 立即使用: 跳转到该优惠券
 */
const useCoupon = (item) => {
  // 优惠券可使用的商品列表页
  if (item.shopId === 0) {
    // 平台券 跳转到商品列表页
    uni.navigateTo({
      url: '/pages/coupon-products/coupon-products?couponId=' + item.couponId
    })
  } else if (item.shopId !== 0 && item.suitableProdType === 1) {
    // 店铺券 指定商品可用  对应店铺商品列表
    uni.navigateTo({
      url: '/package-shop/shop-page/shop-prods/shop-prods?shopId=' + item.shopId + '&couponId=' + item.couponId
    })
  } else if (item.shopId !== 0 && item.suitableProdType === 0) {
    // 店铺券 店铺内所有商品可用 跳转店铺页面
    uni.navigateTo({
      url: '/package-shop/shop-page/shop-prods/shop-prods?shopId=' + item.shopId
    })
  }
}
/**
 * 领券后修改按钮状态
 */
const changeCouponReceiveStatus = () => {
  couponItem.value.hasReceive = 1
}
defineExpose({ changeCouponReceiveStatus })
</script>

<style lang="scss" scoped>
@use "@/popup.scss";
</style>
