<template>
  <text class="" v-if="item.msg_type == 1">{{ item.content }}</text>
  <image
    v-if="item.msg_type == 2"
    :src="item.image_url"
    class="img"
    mode="widthFix"
    @click="previewImage(item.image_url)"
  ></image>
  <video
    @error="videoErrorCallback"
    v-if="item.msg_type == 5"
    :src="item.image_url"
    class="img"
    mode="widthFix"
  ></video>
  <view class="" v-if="item.msg_type == 4">
    <view>{{ item.coupon.title }}</view>
    <view class="u-m-t-16 bg-f7 coupon u-flex u-col-stretch" style="min-width: 500rpx;">
      <template v-if="item.coupon.type == 1">
        <view class="left">
          <view class="price">
            <text class="u-font-32">¥</text>
            <text style="font-size: 72rpx">{{
              item.coupon.discountAmount
            }}</text>
          </view>
          <view class="u-font-24 color-999 no-wrap"
            >满{{ item.coupon.fullAmount }}可用</view
          >
        </view>
      </template>
      <template v-if="item.coupon.type == 2">
        <view class="left">
          <view class="price">
            <text class="u-font-32"
              >商品兑换券</text
            >
          </view>
          <view class="u-font-24 color-999 no-wrap"
            >满{{ item.coupon.fullAmount }}可用</view
          >
        </view>
      </template>

      <template v-if="item.coupon.type == 3">
        <view class="left">
          <view class="price">
            <text class="u-font-32"
              >{{ item.coupon.discountRate / 100 }}折</text
            >
          </view>
          <view class="u-font-24 color-999 no-wrap"
            >满{{ item.coupon.fullAmount }}可用</view
          >
        </view>
      </template>
      <template v-if="item.coupon.type == 4">
        <view class="left">
          <view class="price">
            <text class="u-font-32"
              >第二件半价券</text
            >
          </view>
          
        </view>
      </template>
      <template v-if="item.coupon.type == 6">
        <view class="left">
          <view class="price">
            <text class="u-font-32"
              >买一送一券</text
            >
          </view>
          
        </view>
      </template>

      <view class="right u-p-l-28 u-flex u-col-center">
        <view class="u-font-32">{{ item.coupon.couponName }}</view>
        
      </view>
    </view>
    <view class="u-flex u-row-center u-m-t-32">
      <!-- <view class="lingqu hasGet" v-if="item.coupon_claim">已领取</view> -->
      <view class="lingqu" @click="getCoupon()" >领取</view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(["getCoupon",'previewImage']);
function getCoupon() {
  emits("getCoupon", props.item);
}
function previewImage(url) {
  emits('previewImage',url)
}
function returnTime(coupon){
    let startTime = coupon.useStartTime;
    let endTime = coupon.useEndTime;
    if(startTime && endTime){
      return startTime.split(' ')[0] + '-' + endTime.split(' ')[0]
    }
}
</script>

<style lang="scss" scoped>
.img {
  width: 50vw;
}
.coupon {
  padding: 16rpx 10rpx;
  border-radius: 16rpx;
  .price {
    color: #ff1c1c;
    font-weight: 700;
  }
  .left {
    width: 112rpx;
    margin-right: 26rpx;
  }
  .right {
    border-left: 1rpx solid #ededed;

  }
}
.lingqu {
  background-color: #e8ad7b;
  line-height: 48rpx;
  font-size: 28rpx;
  padding: 6rpx 70rpx;
  color: #fff;
  border-radius: 140rpx;
  &.hasGet {
    background-color: #eee;
    color: #999;
  }
}
.u-col-stretch{
  align-items: stretch;
}
</style>
