<template>
  <div>
    <div class="draw-content-cpmk" :style="styleData.drawContentStyle">
      <div class="draw-couponShop-name" style="width: 5rem;left: .75rem;position: absolute;top: -1.4rem;text-align: center;color: #fff;font-size: .3rem;">{{ shopName }}</div>
      <div v-if="couponList.length <= 0" class="draw-content-items" :style="styleData.drawContentItemsStyle">暂无优惠券</div>
      <div v-for="it in couponList">
        <div class="items-blue-blue" :style="styleData.itemsBlueBlueStyle">
          <div>
            <div style="position: relative;height: 2rem">
              <a class="drawPrize-cpmk" :style="styleData.drawPrizecpmkStyle" @click="receiveCoupon(it.prizeInfoId,it.receive)"></a>
              <div class="youhuiquan-kk">
                <div class="yhq-kkk" style="font-size: .2rem;line-height: .2rem;color: #fff;position: absolute;left: 1.7rem;top: 1.05rem;">{{ it.prizeName }}</div>
                <div class="fullUse-kkk" style="font-size: .3rem;line-height: .3rem;color: #fff;position: absolute;left: 1.7rem;top: .45rem;" v-if="it.couponQuota == undefined || it.couponQuota == '' || it.couponQuota == null">无门槛使用</div>
                <div class="fullUse-kkk" style="font-size: .3rem;line-height: .3rem;color: #fff;position: absolute;left: 1.7rem;top: .45rem;" v-else>满{{ it.couponQuota }}元使用</div>
              </div>
              <div class="couponMkk">
                <div  style="left: 21px;position: absolute;top: 34px;color:#ff578f; font-size:14px; width: 50px;overflow: hidden;white-space: nowrap;text-align: center;
                 text-overflow: ellipsis; ">￥{{ it.priceInfo }} </div>
              </div>
              <div v-if="it.expireType==5" class="coupon-limitDate" style="font-size: 0.2rem;line-height: 0.2rem;color: rgb(255, 255, 255);position: absolute;left: 1.7rem;top: 1.4rem;">有效期至{{ it.endTime | dateTime }}</div>
              <div v-if="it.expireType==1" class="coupon-limitDate" style="font-size: 0.2rem;line-height: 0.2rem;color: rgb(255, 255, 255);position: absolute;left: 1.7rem;top: 1.4rem;">有效期{{ it.couponValidateDay }}天</div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="newUserOrNot" v-if="newUserFlag == 2" style="width: 7.5rem; height: 100vh;position: absolute;margin-top: -7.64rem;background: white;z-index: 100;">
      <div>
        <img src="//img10.360buyimg.com/imgzone/jfs/t14869/339/2347132450/12095/d87b756c/5a991b64Nbd155996.png" alt=""
             class="f-ib" style="width: 2.28rem; height: 2.28rem;margin-top: 3rem;">
      </div>
      <div style="margin-top: 0.45rem; font-size: 0.36rem;">抱歉,您是我们的老客户</div>
      <div style="margin-top: 0.2rem; font-size: 0.24rem; color: rgb(242, 60, 60);">不符合新人专享要求</div>
      <div style="margin-top: 0.8rem;margin-left: 1.5rem;width: 4.4rem; height: 0.9rem; line-height: 0.9rem; color: rgb(255, 255, 255); background: rgb(0, 136, 223); border-radius: 0.55rem;" @click="goToCouponShop()">进店逛逛</div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import dateUtil from "../../../util/dateUtil.js";
import store from '../../../store/store.js';
import {PrizeResultPopComService , CouponFollowShopPopService} from '../../../util/comCreate.js';
import {goToShopPage} from "../../../util/tools";
let { setShare , couponMarketingList , fansDrawList , couponReceive} = apis1;

export default {
  components: {
    store,
  },
  props:["isTemplate", "datas", "keyData", "styleData", "templateData"],
  data() {
    return {
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      couponList:[],
      shopName:'',
      followStoreFlag:0,
      newUserFlag:0,
      shopId:'',
    };
  },

  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      var datasAll = this.templateData;
// debugger
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        if (datasAll) {
          this.couponList = datasAll.draw.prizeList;
          this.shopName = datasAll.activity.shopName;
          for (var i = 0; i < this.couponList.length; i++){
            this.couponList[i].couponQuota = datasAll.draw.prizeList[i].fullPriceInfo;
              //优惠券有效期
              if (datasAll.draw.prizeList[i].expireType == 1){
                this.couponList[i].expireType = 1;
                this.couponList[i].couponValidateDay = 30;
              }else if (datasAll.draw.prizeList[i].expireType == 5){
                this.couponList[i].expireType = 5;
                this.couponList[i].endTime = datasAll.draw.prizeList[i].couponEndTime;
              }
          }
        } else {
          //没有模板的数据
          this.couponList = [
            {prizeName:'优惠券',couponQuota:100,priceInfo:5,expireType:1,couponValidateDay:30,},
          ];
          this.shopName = 'XXX京东自营官方旗舰店';
        }
      }else{
        couponMarketingList(data => {
          this.followStoreFlag = data.data.followStoreFlag;
          this.newUserFlag = data.data.newUserFlag;
          this.shopName = data.data.shopName;
          this.shopId = data.data.shopId;
          // debugger
          this.couponList = data.data.taskCouponDTOS;
        });
      }
    },
    receiveCoupon(prizeInfoId,receive){
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");

      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      // 领取状态 0, 未领取， 1 已领取，2，领取失败, 4 未开始, 5, 已结束
      if (receive == 1) {
        this.$toast("该优惠券已领取");
        return;
      } else if (receive == 2){
        this.$toast("领取失败");
        return;
      } else if (receive == 4){
        this.$toast("该优惠券领取时间尚未开始");
        return;
      } else if (receive == 5){
        this.$toast("该优惠券领取时间已结束");
        return;
      }
      //关注店铺弹窗
      if (this.followStoreFlag == 1) {
        CouponFollowShopPopService.create(
          prizeInfoId,
          (submit) => {
            CouponFollowShopPopService.close();
            couponReceive(prizeInfoId,data => {
              if (data.data.result == 1){
                fansDrawList(prizeInfoId,1,data => {
                  this.prizeResultData.datas = data.data;
                  PrizeResultPopComService.create(
                    this.prizeResultData,
                    data,
                    (submit) => {
                      PrizeResultPopComService.close();
                    }
                  );
                });
              }else if (data.data.result == 0) {
                this.$toast("该优惠券已领取");
              }else if (data.data.result == 2) {
                this.$toast("该优惠券已抢光");
              }
            });
          });
      }else {
        //不需要关注店铺
        couponReceive(prizeInfoId,data => {
          if (data.data.result == 1){
            fansDrawList(prizeInfoId,1,data => {
              this.prizeResultData.datas = data.data;
              PrizeResultPopComService.create(
                this.prizeResultData,
                data,
                (submit) => {
                  PrizeResultPopComService.close();
                }
              );
            });
          }else if (data.data.result == 0) {
            this.$toast("该优惠券已领取");
          }else if (data.data.result == 2) {
            this.$toast("该优惠券已抢光");
          }
        });
      }
    },
    goToCouponShop(){
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      goToShopPage(this.shopId);
    }
  },
  filters: {
    //时间转换
    dateTime(val) {
      if (val) {
        return dateUtil.formatTime(val, 'yyyy-MM-dd hh:mm');
      }
      return val;
    },
    twostar: function(value) {
      if (!value) {
        return ""
      }
      return value.substr(0, 1) + "**" + value.substr(-1, 1)
    }
  }
};
</script>
<style lang="scss" scoped>
a{
  color: #fff;
}
</style>
