<template>
  <view :class="['component-popup-ad',{show:show&&!loadCoupon}]">
    <view class="confirm-pop-mask" />
    <view class="popup-ad-box">
      <image
        v-if="+jumpInfo?.type === 7"
        class="popup-ad-coupon"
        src="/static/images/popup-ad/popup-ad-coupon.png"
        alt=""
        mode="widthFix"
        @tap="onJump"
      />
      <image
        v-else
        class="popup-ad-img"
        :src="util.checkFileUrl(popupInfo.popupPic)"
        alt=""
        mode="widthFix"
        @tap="onJump"
      />
      <view
        v-if="+jumpInfo?.type === 7 && couponInfo"
        class="conpon-info"
        @tap="onJump"
      >
        <view class="bg-title">
          <view class="dot" />
          <view class="txt">
            惊喜福利
          </view>
          <view class="dot" />
        </view>
        <view class="til">
          您有一张优惠券待领取
        </view>
        <view class="con">
          <view class="left">
            <view
              v-if="couponInfo.couponType === 1"
              class="price"
            >
              <text class="sign">
                ￥
              </text>
              <text class="number">
                {{ showPrice }}
              </text>
              <text v-if="showPrice.length===4">
                ..
              </text>
            </view>
            <view
              v-if="couponInfo.couponType === 2"
              class="price"
            >
              <text class="number">
                {{ couponInfo.couponDiscount }}
              </text>
              <text class="sign">
                折
              </text>
            </view>
            <view class="term txt-flow">
              满{{ couponInfo.cashCondition /100 }}元可用
            </view>
          </view>
          <view class="right">
            <view class="conform txt-flow">
              {{ useDesc }}
            </view>
            <view
              v-if="couponInfo.validTimeType===1"
              class="time txt-flow"
            >
              {{ couponInfo.startTime }} 至 {{ couponInfo.endTime }}
            </view>
            <view
              v-if="couponInfo.validTimeType===2"
              class="time txt-flow"
            >
              领取后{{ couponInfo.validDays }}天有效
            </view>
          </view>
        </view>
        <view class="btn">
          立即领取
        </view>
      </view>
      <view
        class="popupad-close"
        @tap="show = false"
      >
        <image
          src="/static/images/popup-ad/close.png"
          alt=""
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import util from '@/utils/util.js'
import { reactive } from 'vue'
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  popupInfo: {
    type: Object,
    default: () => ({})
  },
  shopId: {
    type: [Number, String],
    default: 0
  }
})

const jumpInfo = computed(() => {
  return JSON.parse(props.popupInfo.jumpUrl || '{}')
})

const show = computed({
  get () {
    return props.modelValue
  },
  set () {
    emits('update:modelValue')
  }
})

const useDesc = computed(() => {
  const shopTxt = couponInfo.shopId ? '店铺' : '平台'
  const prodTypeTxt = couponInfo.suitableprodType === 1 ? '全部商品通用' : '指定商品可用'
  return shopTxt + prodTypeTxt
})

// 价格显示处理
const showPrice = computed(() => {
  const str = couponInfo.reduceAmount / 100 + ''
  return str.substring(0, 4)
})

const couponInfo = reactive({})
const loadCoupon = ref(false)
watch(() => jumpInfo.value, (info) => {
  if (+info.type === 7) {
    loadCoupon.value = true
    http.request({
      url: '/mall4cloud_marketing/ma/coupon/get_by_coupon_id',
      method: 'GET',
      data: {
        couponId: info.link
      }
    }).then((res) => {
      Object.assign(couponInfo, res)
      couponInfo.startTime = couponInfo.startTime ? couponInfo.startTime.substring(0, 10) : ''
      couponInfo.endTime = couponInfo.endTime ? couponInfo.endTime.substring(0, 10) : ''
      loadCoupon.value = false
    }).catch(() => {
      loadCoupon.value = false
    })
  }
})

const onJump = () => {
  if (+jumpInfo.value.type === 7) {
    util.checkAuthInfo(() => {
      onReceiveCoupon(couponInfo.couponId)
    })
    return
  }
  util.toRedirectLink(jumpInfo.value.type, jumpInfo.value.link, props.shopId)
  show.value = false
}

// 立即领取
let isReceiving = false // 领券中
const onReceiveCoupon = (couponId) => {
  if (isReceiving) {
    return
  }
  isReceiving = true
  http.request({
    url: '/mall4cloud_marketing/my_coupon/receive',
    method: 'POST',
    data: String(couponId)
  }).then(res => {
    isReceiving = false
    show.value = false
    uni.showToast({
      title: res,
      icon: 'none',
      duration: 1000
    })
  }).catch(() => { isReceiving = false })
}
</script>

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