<template>
  <div class="everyDay">
    <div style="margin-top:20px;display:none">
      <van-count-down :time="lotteryTime"
       @finish="onFinish"
       format="DD 天 HH 时 mm 分 ss 秒"/>
    </div>
    <div :style="styleData.all">
      <div :style="styleData.userMsg">
        已有<span :style="styleData.userMsgSpan">{{userCount}}</span>名用户抢到奖品 
      </div>
      <div class="prizeImg" :style="styleData.prizeImg">
        <div v-if="receiveStatus == 0 && surplusDayNum == 0" :style="styleData.zhuangtaiImg1"></div>
        <div v-if="receiveStatus == 1 && surplusDayNum > 0" :style="styleData.zhuangtaiImg"></div>
        <div v-if="receiveStatus == 1 && surplusDayNum == 0" :style="styleData.zhuangtaiImg"></div>

        <img :src="itemData.showImg" alt="" />
        <div class="back" :style="styleData.back"  v-if="itemData.prizeType == '1'">京豆</div>
        <div class="back" :style="styleData.back" v-if="itemData.prizeType == '2'">优惠券</div>
        <div class="back" :style="styleData.back" v-if="itemData.prizeType == '3'">实物</div>
        <div class="back" :style="styleData.back" v-if="itemData.prizeType == '4'">积分</div>
        <div class="back" :style="styleData.back" v-if="itemData.prizeType == '5'">专享价</div>
        <div class="back" :style="styleData.back" v-if="itemData.prizeType == '6'">红包</div>
        <div class="back" :style="styleData.back" v-if="itemData.prizeType == '7'">礼品卡</div>
        <div class="back" :style="styleData.back" v-if="itemData.prizeType == '8'">京东E卡</div>
        <div class="back" :style="styleData.back" v-if="itemData.prizeType == '9'">plus会员卡</div>
        <div class="back" :style="styleData.back" v-if="itemData.prizeType == '10'">爱奇艺会员卡</div>
        <div class="back" :style="styleData.back" v-if="itemData.prizeType == '11'">积分</div>
        <div class="back" :style="styleData.back" v-if="itemData.prizeType == '12'">京元宝权益</div>
      </div>

      <div class="prizeRight" :style="styleData.prizeRight">
        <div class="prizeName" :style="styleData.prizeName">{{ itemData.prizeName }}</div>
        <div class="timeMsg" :style="styleData.timeMsg">领取时间：今日{{ hours }}:{{ minutes }}~23:59</div>
        <div class="leftNum" :style="styleData.leftNum">今日剩余:{{ surplusDayNum }}份 (先到先得)</div>
        <div class="leftNum2" :style="styleData.leftNum" v-if="maxReceiveNum == 1">
         每人活动内只可成功参与一次
        </div>
      </div>

      <!-- 没到开奖时间 -->
      <div v-if="!startPlay" class="drawBtn" :style="styleData.lingquImg" @click="drawFun(1)"></div>
     
    <div  v-if="startPlay && receiveStatus == 1" :style="styleData.lingquImg1" class="drawBtn"></div>
    <div  v-if="startPlay && receiveStatus == 0 && surplusDayNum == 0" :style="styleData.leftNumNull" class="drawBtn"></div>

      <!-- 未领取 -->
      <div  v-if="startPlay && receiveStatus == 0 && surplusDayNum > 0" :style="styleData.choujiangImg" class="drawBtn" @click="drawFun"></div>

    </div>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
let { dailyGiftRequest,immediatelyDraw2,drawPrize } = apis1;
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
} from "../../../util/hdzxtcomCreate.js";
export default {
  props: ["isTemplate", "datas", "keyData", "styleData", "templateData","isWebClick", "modifyContent"],
  data() {
    return {
      itemData: {},
      lotteryTime: 0,
      startPlay: false,
      prizeStatus: 0,
      preventClick: false,
      userCount: 0,
      hours: '',
      minutes: '',
      receiveStatus: 0,
      leftNum: 0,
      surplusDayNum: 0,
      maxReceiveNum:1
    };
  },
  created() {
    this.initData();
  },
  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          styleDataOld: this.styleDataOld
        };
        this.$emit('opertaionCom', type, byValue);
      }
    },
    initData() {
      //去请求接口
      if (this.isTemplate == true) {
        console.log(this.templateData,'this.templateData')
        if(this.templateData){
          this.minutes = this.templateData.dailySetPrize.activityCommonRuleVo.rules.minutes;
          this.hours = this.templateData.dailySetPrize.activityCommonRuleVo.rules.hours;
          this.userCount = '15';
          this.prizeStatus = 1;
          this.receiveStatus = 0;
          this.lotteryTime = 0;

          this.surplusDayNum = 1;
          this.maxReceiveNum = 1;
          this.itemData = this.templateData.dailySetPrize.draw.prizeList[0];

        }else{
          //不请求接口 模板预览
          this.minutes = '12';
          this.hours = '00';
          this.userCount = 0;
          this.prizeStatus = 1;
          this.receiveStatus = 0;
          this.lotteryTime = 0;
          this.itemData = {
            beanNum: 1,
            id: '1536919896653688833',
            leftNum: 48,
            position: 0,
            priceInfo: '1536919896653688833',
            prizeName: '1积分',
            prizeType: 4,
            showImg: '//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png'
          };

        }

      } else {
        dailyGiftRequest(res => {
          this.minutes = res.data.minutes;
          this.hours = res.data.hours;
          this.userCount = res.data.userCount;
          this.prizeStatus = res.data.status;
          this.receiveStatus = res.data.receiveStatus;
          this.surplusDayNum = res.data.surplusDayNum;
          this.maxReceiveNum = res.data.maxReceiveNum;
          this.lotteryTime = res.data.lotteryTime - new Date().getTime();
          //  this.lotteryTime = 1655197237000 - new Date().getTime()
          if(this.lotteryTime > 0){
            // 不可以开奖
            this.startPlay = false 
          }else{
            // 可以开奖
            this.startPlay = true
          }
           console.log(this.lotteryTime,"this.lotteryTime");
        });

         drawPrize((initdatas) => {
          //调用奖品接口
          this.itemData = initdatas.data.prizeInfo[0]
          // this.leftNum = initdatas.data.prizeInfo[0].leftNum
          this.leftNum = 1
        });
      }
    },
    onFinish(){
      this.startPlay = true
    },
    drawFun(type){
       if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
       let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return
      }
      if(type == 1){
        this.$toast("抢好礼时间暂未开始，请您稍后再试~");
        return
      }
      if(this.preventClick){
        return
      }
      this.preventClick = true
      immediatelyDraw2(this.itemData.id, (receiveData) =>  {
         if (receiveData.resp_code == 0) {
             if (receiveData.data.result == true){
               var obj = {
                datas: {},
                keyData: {
                  prizeUrl: "showImg",
                  prizeName: "prizeName",
                  prizeType: "prizeType",
                  priceInfo: "priceInfo",
                  discountType: "discountType",
                  couponType: "couponType",
                },
              };
              obj.datas = this.itemData;
              PrizeResultPopComService.create(
                obj,
                receiveData.data,
                this.styleData,
                (submit) => {
                  console.log(submit);
                  PrizeResultPopComService.close();
                }
              );
             }
            this.preventClick = false
            this.initData()
         }else {
              NoPrizeResultPopComService.create(
                this.styleData,
                (submit) => {
                  NoPrizeResultPopComService.close();
                }
              );
              this.preventClick = false
              this.initData();
            }
        });
    }
  },
};
</script>
<style lang="scss" scoped>
.everyDay{
  .prizeImg{
    width: 2rem;
    height: 2rem;
    border: 2px solid rgb(255, 54, 51);
    border-radius: 0.1rem;
    left: 0.5rem;
    top: 1.25rem;
    position: relative;
    overflow: hidden;
  }
  .back{
    width: 2rem;
    height: 0.7rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/138524/9/21064/8976/619cdd47E1819f3a9/140f4a58e373a32d.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -2px;
    left: -2px;
    text-align: center;
    padding-top: 0.32rem;
    font-size: 0.24rem;
    color: rgb(255, 255, 255);
  }
  .prizeRight{
    width: 3.7rem;
    height: 2rem;
    position: absolute;
    top: 1.25rem;
    left: 2.7rem;
    .prizeName{
      font-size: .4rem;
      color: #f2270c;
      text-align: left;
      width: 100%;
      font-weight: bold;
      margin-top: .2rem;
      white-space: nowrap;
       overflow: hidden;
        text-overflow: ellipsis;
    }
    .timeMsg{
      width: 3.6rem;
      height: .4rem;
      background: #ffdcdd;
      color: #f2270c;
      margin-top: .2rem;
      border-radius: .2rem;
      font-size: .22rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .leftNum{
      font-size: .18rem;
      color: rgb(140, 140, 140);
      margin-top: 0.1rem;
      width: 3.6rem;
    }
    .leftNum2 {
      font-size: 0.18rem;
      color: rgb(140, 140, 140);
      width: 3.6rem;
    }
  }
  .drawBtn{
    width: 4.84rem;
    height: 1.42rem;
    background-size: 100%;
    position: absolute;
    left: calc(50% - 2.42rem);
    bottom: 0.1rem;
  }
}
</style>
