<template>
  <div class="purchaseDivAll">
    <div
      class="bgClass"
      ref="repurchasePrize"
      @click="styleClick('click', 'repurchasePrize')"
      @mousemove="styleClick('mousemove', 'repurchasePrize')"
      @mouseout="styleClick('mouseout')"
      :style="styleData.bgClass"
    >
      <div class="orderEndTimeDiv">
        <van-count-down class="countDownStyle1" :style="styleData.countDownStyle1" :time="dataAll.orderEndTime - new Date().getTime()" format="DD 天 HH 时 mm 分 ss 秒">
          <template #default="timeData">
           活动剩余时间：
            <div class="block1">
              <div style="display: flex;">
                <div class="block" v-if="timeData.days >= 100" :style="styleData.block">{{ parseInt(timeData.days / 100) % 10 }}</div>

                <div class="block" v-if="timeData.days >= 10" :style="styleData.block">{{ parseInt(timeData.days / 10) % 10 }}</div>
                <div class="block" v-if="timeData.days < 10" :style="styleData.block">0</div>
                <div class="block" :style="styleData.block">{{ timeData.days % 10 }}</div>
              </div>
            </div>
            <div class="colon">天</div>
            <div class="block1">
              <div style="display: flex;">
                <div class="block" v-if="timeData.hours >= 100" :style="styleData.block">{{ parseInt(timeData.hours / 100) % 10 }}</div>
                <div class="block" v-if="timeData.hours >= 10" :style="styleData.block">{{ parseInt(timeData.hours / 10) % 10 }}</div>
                <div class="block" v-if="timeData.hours < 10" :style="styleData.block">0</div>
                <div class="block" :style="styleData.block">{{ timeData.hours % 10 }}</div>
              </div>
            </div>
            <div class="colon">时</div>

            <div class="block1">
              <div style="display: flex;">
                <div class="block" v-if="timeData.minutes >= 100" :style="styleData.block">{{ parseInt(timeData.minutes / 100) % 10 }}</div>
                <div class="block" v-if="timeData.minutes >= 10" :style="styleData.block">{{ parseInt(timeData.minutes / 10) % 10 }}</div>
                <div class="block" v-if="timeData.minutes < 10" :style="styleData.block">0</div>
                <div class="block" :style="styleData.block">{{ timeData.minutes % 10 }}</div>
              </div>
            </div>

            <div class="colon">分</div>

            <div class="block1">
              <div style="display: flex;">
                <div class="block" v-if="timeData.seconds >= 100" :style="styleData.block">{{ parseInt(timeData.seconds / 100) % 10 }}</div>

                <div class="block" v-if="timeData.seconds >= 10" :style="styleData.block">{{ parseInt(timeData.seconds / 10) % 10 }}</div>
                <div class="block" v-if="timeData.seconds < 10" :style="styleData.block">0</div>
                <div class="block" :style="styleData.block">{{ timeData.seconds % 10 }}</div>
              </div>
            </div>

            <div class="colon">秒</div>
          </template>
        </van-count-down>
      </div>
      <div class="prizeDivAll" :style="styleData.prizeDivAll">
        <div class="prizeLeftDiv" :style="styleData.prizeLeftDiv"><img class="prizeImageDiv" :src="dataAll.userImg" /></div>
        <div class="prizeRightDiv" :style="styleData.prizeRightDiv">
          <div class="prizeName" :style="styleData.prizeName">{{ dataAll.prizeName }}</div>
          <div class="prizeRestDiv" :style="styleData.prizeRestDiv">奖品剩余：{{ dataAll.isStock }}份</div>
          <div class="prizeStatusDiv">
            <img v-if="dataAll.status == '0'" @click="prizeStstusClick(dataAll.status)" class="prizeStatusImgStyle" :src="styleData.prizeStatusImg.src" />
            <img v-if="dataAll.status == '1'" class="prizeStatusImgStyle" :src="styleData.prizeStatusImg.src1" />
            <img v-if="dataAll.status == '2'" class="prizeStatusImgStyle" :src="styleData.prizeStatusImg.src2" />
            <img v-if="dataAll.status == '3'" class="prizeStatusImgStyle" :src="styleData.prizeStatusImg.src3" />
            <img v-if="dataAll.status == '4'" v-lz-click="'4'" @click="prizeStstusClick(dataAll.status)" class="prizeStatusImgStyle" :src="styleData.prizeStatusImg.src4" />
          </div>
          <div class="getDrawConditionDiv" :style="styleData.getDrawConditionDiv" @click="conditionClick()">查看获奖条件></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { CountDown } from 'vant';
Vue.use(CountDown);
import apis1 from '../../../util/apis1.js';
let { getDoRepurchase, immediatelyDraw } = apis1;
// immediatelyDraw 领奖
import { goToShopPage } from '../../../util/tools.js';
import store from '../../../store/store.js';
import { conditionPopAnotherService } from '../../../util/hdzxtcomCreate.js';
import { PrizeResultPopComService, NoPrizeResultPopComService } from '../../../util/hdzxtcomCreate.js';
export default {
  props: ['datas', 'styleData', 'keyData', 'isTemplate', 'templateData', 'modifyContent', 'isWebClick'],
  data() {
    return {
      dataAll: {
        orderEndTime: null,
        prizeName: null,
        isStock: 0,
        userImg: null,
        status: '0'
      }
    };
  },
  created() {
    this.initData();
    //  console.warn('1111111111111111111111111')
  },
  methods: {
    initData() {
      //  console.warn('22222222222222222222222',this.isTemplate)
      if (this.isTemplate) {
        // console.warn(this.templateData, 'this.templateData','金师傅');
        if (this.templateData) {
          let activityCommonRule = {
            orderEndTime: this.templateData.activityAnotherCommonRule.orderEndTime,
            prizeName: this.templateData.draw.prizeList[0].prizeName,
            isStock: this.templateData.draw.prizeList[0].totalPrizeNum,
            userImg: this.templateData.draw.prizeList[0].showImg,
            status: '1' // 0 可以领取 1可以领取的置灰 2 以领取 3已领光 4 不满足条件（进店框框）
          };
          this.dataAll = activityCommonRule;
        } else {
          let activityCommonRule = {
            orderEndTime: new Date().getTime() + 10000000,
            prizeName: '爱德华操作教程',
            isStock: 20,
            userImg: '//img10.360buyimg.com/imgzone/jfs/t1/19663/5/17991/10333/63072da1E1e856464/822343662db73a13.png',
            status: '0' // 0 可以领取 1可以领取的置灰 2 以领取 3已领光 4 不满足条件（进店框框）
          };
          this.dataAll = activityCommonRule;
          console.log(this.dataAll, 'this.dataAll');
        }
      } else {
          // console.warn('孙师傅')
        getDoRepurchase(responseData => {
          // console.warn(responseData,'responseData','金师傅');
          this.prizeInfoId = responseData.data.prizeId;
          this.dataAll = responseData.data;
          // console.warn( this.dataAll,'金打手');
          // console.warn(  this.prizeInfoId,'金打手2');
        });
      }
    },
    //奖品状态点击
    prizeStstusClick(prizeStatus) {
      if (this.isTemplate) {
        this.$toast('活动预览，仅供参考');
        return;
      }
      let actStatus4 = sessionStorage.getItem('actStatus');
      if (actStatus4 == 1) {
        this.$toast('活动尚未开始');
        return;
      }
      if (prizeStatus == 0) {
        //正常领奖
        immediatelyDraw(this.prizeInfoId, receiveData => {
          if (receiveData.resp_code == 0) {
            if (receiveData.data.result == true) {
              this.initData();
              this.publicData.$emit('isNotyFiceWinnerReorrd',true,this.isTemplate);
              var obj = {
                datas: {},
                keyData: {
                  prizeUrl: 'showImg',
                  prizeName: 'prizeName',
                  prizeType: 'prizeType',
                  priceInfo: 'priceInfo',
                  discountType: 'discountType',
                  couponType: 'couponType'
                }
              };
              obj.datas = receiveData.data;
              PrizeResultPopComService.create(obj, receiveData.data, this.styleData, submit => {
                PrizeResultPopComService.close();
              });
            } else {
              NoPrizeResultPopComService.create(this.styleData, submit => {
                NoPrizeResultPopComService.close();
              });
              this.initData();
            }
          } else {
            this.$toast('奖品已领完，下次早点哦');
          }
        });
      }
      if (prizeStatus == 1) {
        this.$toast('您还不符合奖品领取条件，请点击【查看获奖条件】查看获奖门槛');
        return;
      }
      if (prizeStatus == 4) {
        goToShopPage(store.state.shopId);
      }
    },
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleDataNew,
          isCustomSwitching: this.receive,
          c_this: this,
          styleDataOld: this.styleDataOld
        };
        this.$emit('opertaionCom', type, byValue);
      }
    },
    //查看获奖条件
    conditionClick() {
      if (this.isTemplate) {
        this.$toast('活动预览，仅供参考');
        return;
      }
      this.stopScroll();
      console.log(this.styleData, 'this.styleDatathis.styleData');

      conditionPopAnotherService.create(this.isTemplate, this.styleData, submit => {
        conditionPopAnotherService.close();
      });
    }
  }
};
</script>

<style lang="scss">
.purchaseDivAll {
  .getDrawConditionDiv {
    // text-decoration: underline;
  }
  .orderEndTimeDiv {
    padding-top: 0.29rem;
    // padding-left: 0.28rem;
    font-size: 0.3rem;
    font-weight: bold;
    line-height: 0.36rem;
  }
  .prizeDivAll {
    padding: 0.45rem 0.44rem 0 0.44rem;
  }

  .prizeImageDiv {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
  }

  .prizeStatusImgStyle {
    width: 1.91rem;
    height: 0.55rem;
  }
}
</style>
