<template>
  <div class="purchaseDivAll">
    <div
      class="bgClass"
      ref="pruchasePrize"
      @click="styleClick('click', 'pruchasePrize')"
      @mousemove="styleClick('mousemove', 'pruchasePrize')"
      @mouseout="styleClick('mouseout')"
      :style="styleData.bgClass"
    >
      <div  class="orderEndTimeDiv" :style="styleData.orderEndTimeDiv">
        <van-count-down class="countDownStyle1" :style="styleData.countDownStyle1" :time="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>
          <div :style="styleData.topPic"></div>
         <div class="swipe_box" v-if="consumptionGiftPrizeVoList && consumptionGiftPrizeVoList.length > 1">
          <swiper ref="mySwiper" :options="swiperOption" :style="styleData.swiperAll">
            <swiper-slide v-for="(item,index) in consumptionGiftPrizeVoList" :key="index" :style="styleData.swiperItem">
              <div v-if="orderType == '0'" :style="styleData.fullMsg">
                    满<span :style="styleData.fullSpan">{{item.num}}</span>元即送
                </div>
                <div v-if="orderType == '1'" :style="styleData.fullMsg">
                    满<span :style="styleData.fullSpan">{{item.num}}</span>单即送
                </div>
                <div v-if="orderType == '2'" :style="styleData.fullMsg">
                    满<span :style="styleData.fullSpan">{{item.num}}</span>件即送
                </div>
                 <!-- 商品图片 -->
                <div :style="styleData.skuPicture">
                    <img :src="item.showImg" alt="" style="width:1.5rem;height:1.5rem">
                </div>

                <!-- 商品名称 -->
                <div :style="styleData.prizeName">
                    {{item.prizeName}}
                </div>

                <!-- 剩余份数 -->
                <div :style="styleData.stock" >
                    奖品剩余：{{item.stock}}份
                </div>

                <!-- 进度条 -->
                <div :style="styleData.progress" :class="keyData.progressLineClass">
                    <van-progress
                        v-if="orderType == '0'"
                        :percentage='(item.receivingPrice/item.num)*100 >= 100 ? 100 : (item.receivingPrice/item.num)*100'
                        pivot-color="#7232dd"
                        stroke-width="13"
                        :color="keyData.color"
                        track-color="#fef8de"
                        :show-pivot=false
                    />
                     <van-progress
                        v-if="orderType == '1'"
                        :percentage='(item.receivingNum/item.num)*100 >= 100 ? 100 : (item.receivingNum/item.num)*100'
                        pivot-color="#7232dd"
                        stroke-width="13"
                        :color="keyData.color"
                        track-color="#fef8de"
                        :show-pivot=false
                    />
                     <van-progress
                        v-if="orderType == '2'"
                        :percentage='(item.receivingSkuNum/item.num)*100 >= 100 ? 100 : (item.receivingSkuNum/item.num)*100'
                        pivot-color="#7232dd"
                        stroke-width="13"
                        :color="keyData.color"
                        track-color="#fef8de"
                        :show-pivot=false
                    />
                </div>
                <!-- 礼盒 -->
                <div :style="styleData.giftBox"></div>

                <!-- 确认收货msg -->
                <div :style="styleData.sureMsg" v-if="orderType == '0'">
                    <div>
                        您已下单 <span :style="styleData.sureSpan">{{item.orderPrice}}元</span>（已确认收货<span>{{item.receivingPrice}}元</span>）
                    </div>
                    <div :style="styleData.sureSpan1">{{item.num}}元</div>
                </div>
                <!-- 满次有礼 -->
                <div :style="styleData.sureMsg" v-if="orderType == '1'">
                    <div>
                      您已下单 <span :style="styleData.sureSpan">{{item.orderNum}}单</span>（已确认收货<span>{{item.receivingNum}}单</span>）
                    </div>
                    <div :style="styleData.sureSpan1">{{item.num}}单</div>
                </div>
                <!-- 满件有 -->
                <div :style="styleData.sureMsg" v-if="orderType == '2'">
                    <div>
                        您已下单 <span :style="styleData.sureSpan">{{item.orderSkuNum}}件</span>（已确认收货<span>{{item.receivingSkuNum}}件</span>）
                    </div>
                    <div :style="styleData.sureSpan1">{{item.num}}件</div>
                </div>

                <!-- 按钮 -->
                <div v-if="item.status == 0" :style="styleData.btn1" @click="conditionClick"></div>
                <div v-if="item.status == 1 && receiveStatus == 1" :style="styleData.btn2" @click="prizeStstusClick(item)"></div>
                <div v-if="item.status == 1 && receiveStatus == 0" :style="styleData.btn2" @click="receiveClick(item)"></div>
                <div v-if="item.status == 2" :style="styleData.btn3"></div>
                <div v-if="item.status == 3" :style="styleData.btn4"></div>
                <div v-if="item.status == 5" :style="styleData.btn5"></div>
                <div v-if="item.status == 6" :style="styleData.btn6"></div>
                
            </swiper-slide>
              
          </swiper>
        </div>
        <div v-if="consumptionGiftPrizeVoList.length == 1" :style="styleData.swiperAll1">
          <div v-for="(item,index) in consumptionGiftPrizeVoList" :key="index" :style="styleData.swiperItem">
             <div v-if="orderType == '0'" :style="styleData.fullMsg">
                    满<span :style="styleData.fullSpan">{{item.num}}</span>元即送
                </div>
                <div v-if="orderType == '1'" :style="styleData.fullMsg">
                    满<span :style="styleData.fullSpan">{{item.num}}</span>单即送
                </div>
                <div v-if="orderType == '2'" :style="styleData.fullMsg">
                    满<span :style="styleData.fullSpan">{{item.num}}</span>件即送
              </div>
              <!-- 商品图片 -->
                <div :style="styleData.skuPicture">
                    <img :src="item.showImg" alt="" style="width:1.5rem;height:1.5rem">
                </div>

                <!-- 商品名称 -->
                <div :style="styleData.prizeName">
                    {{item.prizeName}}
                </div>

                <!-- 剩余份数 -->
                <div :style="styleData.stock" >
                    奖品剩余：{{item.stock}}份
                </div>

                <!-- 进度条 -->
                <div :style="styleData.progress" :class="keyData.progressLineClass">
                   <van-progress
                       :style="styleData.progressInner"
                        v-if="orderType == '0'"
                        :percentage='(item.receivingPrice/item.num)*100 >= 100 ? 100 : (item.receivingPrice/item.num)*100'
                        pivot-color="#7232dd"
                        stroke-width="13"
                        :color="keyData.color"
                        track-color="#fef8de"
                        :show-pivot=false
                    />
                     <van-progress
                        :style="styleData.progressInner"
                        v-if="orderType == '1'"
                        :percentage='(item.receivingNum/item.num)*100 >= 100 ? 100 : (item.receivingNum/item.num)*100'
                        pivot-color="#7232dd"
                        stroke-width="13"
                        :color="keyData.color"
                        track-color="#fef8de"
                        :show-pivot=false
                    />
                     <van-progress
                        :style="styleData.progressInner"
                        v-if="orderType == '2'"
                        :percentage='(item.receivingSkuNum/item.num)*100 >= 100 ? 100 : (item.receivingSkuNum/item.num)*100'
                        pivot-color="#7232dd"
                        stroke-width="13"
                        :color="keyData.color"
                        track-color="#fef8de"
                        :show-pivot=false
                    />
                </div>
                <!-- 礼盒 -->
                <div :style="styleData.giftBox"></div>

                <!-- 确认收货msg -->
                <div :style="styleData.sureMsg" v-if="orderType == '0'">
                    <div>
                        您已下单 <span :style="styleData.sureSpan">{{item.orderPrice}}元</span>（已确认收货<span>{{item.receivingPrice}}元</span>）
                    </div>
                    <div :style="styleData.sureSpan1">{{item.num}}元</div>
                </div>

                <div :style="styleData.sureMsg" v-if="orderType == '1'">
                    <div>
                      您已确认收货 <span :style="styleData.sureSpan">{{item.orderNum}}单</span>（已确认收货<span>{{item.receivingNum}}单</span>）
                    </div>
                    <div :style="styleData.sureSpan1">{{item.num}}单</div>
                </div>

                <div :style="styleData.sureMsg" v-if="orderType == '2'">
                    <div>
                        您已下单 <span :style="styleData.sureSpan">{{item.orderSkuNum}}件</span>（已确认收货<span>{{item.receivingSkuNum}}件</span>）
                    </div>
                    <div :style="styleData.sureSpan1">{{item.num}}件</div>
                </div>

                <!-- 按钮 -->
                <div v-if="item.status == 0" :style="styleData.btn1" @click="conditionClick"></div>
                <div v-if="item.status == 1" :style="styleData.btn2" @click="prizeStstusClick(item)"></div>
                <div v-if="item.status == 2" :style="styleData.btn3"></div>
                <div v-if="item.status == 3" :style="styleData.btn4"></div>
                <div v-if="item.status == 5" :style="styleData.btn5"></div>
                <div v-if="item.status == 6" :style="styleData.btn6"></div>
          </div>
              
        </div>
      
  </div>
</template>

<script>
// import Swiper from "swiper";
// import Swiper, {Pagination,Navigation} from "swiper"
// Swiper.use([Pagination,Navigation])
// import "swiper/swiper-bundle.css"

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper.scss'
import Vue from 'vue';
import { CountDown,Progress,Dialog } from 'vant';
Vue.use(CountDown);
Vue.use(Progress);
Vue.use(Dialog);
import apis1 from '../../../util/apis1.js';
let { consumptionGift, immediatelyDraw } = apis1;
// immediatelyDraw 领奖
import { goToShopPage } from '../../../util/tools.js';
import store from '../../../store/store.js';
import { conditionPopService1 } from '../../../util/hdzxtcomCreate.js';
import { PrizeResultPopComService, NoPrizeResultPopComService } from '../../../util/hdzxtcomCreate.js';
export default {
  props: ['datas', 'styleData', 'keyData', 'isTemplate', 'templateData', 'modifyContent', 'isWebClick'],
  components:{
    Swiper,
    SwiperSlide
  },
  data() {
    return {
     orderEndTime:null,
     consumptionGiftPrizeVoList:[],
     orderType:'',
     basicData:{},
     receiveStatus:'0',
      swiperOption: {
        slidesPerView: 1.1,
        spaceBetween: 5,
        loop: false,
    }
    };
    
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      if (this.isTemplate) {
        // console.log(this.templateData, 'this.templateData');
        if (this.templateData) {
          let activityCommonRule = []
          this.templateData.consumptionGift.draw.prizeList.map((item,index)=>{
            activityCommonRule.push({
              prizeName: this.templateData.consumptionGift.draw.prizeList[index].prizeName,
              showImg: this.templateData.consumptionGift.draw.prizeList[index].showImg,
              num: this.templateData.consumptionGift.draw.prizeList[index].num,
              stock: this.templateData.consumptionGift.draw.prizeList[index].totalPrizeNum,
              orderPrice:0,
              receivingPrice:0,
              orderNum:0,
              receivingNum:0,
              orderSkuNum:0,
              receivingSkuNum:0,
              status: '0' // 0 可以领取 1可以领取的置灰 2 以领取 3已领光 4 不满足条件（进店框框）
            })
          })
            this.orderEndTime = this.templateData.consumptionGift.rules.orderEndTime
            this.orderType = this.templateData.consumptionGift.rules.orderType
            this.consumptionGiftPrizeVoList = activityCommonRule
        } else {
            let activityCommonRule = [{
            prizeName: '积分',
            showImg: '//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png',
            num: 20,
            stock: 5,
            orderPrice:0,
            receivingPrice:0,
            orderNum:0,
            receivingNum:0,
            orderSkuNum:0,
            receivingSkuNum:0,
            status: '0' // 0 可以领取 1可以领取的置灰 2 以领取 3已领光 4 不满足条件（进店框框）
          }]
          this.orderEndTime = 0
          
          this.consumptionGiftPrizeVoList = activityCommonRule
          let templateId = sessionStorage.getItem('templateId')
          if(templateId == '20210824190900zxjyx0111278' ||templateId == '20210824190900zxjyx011127801' ||templateId =="2022112501xfylme"){
            this.orderType = '0'
          }else if(templateId == '20220902xfylmj01' || templateId == '20220902xfylmj0101' || templateId == '20221125xfylmj'){
            this.orderType = '2'
          }else if(templateId == '20220902xfylmd01' ||  templateId == '20220902xfylmd0101' || templateId =="20221125xfylmc"){
            this.orderType = '1'
          }else{
            this.orderType = '0'
          }
        }
      } else {
        consumptionGift(res => {
        
           
            this.orderType = res.data.consumptionGiftCRuleVo.orderType
            this.receiveStatus = res.data.consumptionGiftCRuleVo.receiveStatus
            this.consumptionGiftPrizeVoList = res.data.consumptionGiftPrizeVoList
            this.basicData = res.data
            this.publicData.$emit("skuType", res.data.consumptionGiftCRuleVo.skuType);
              let actStatus = sessionStorage.getItem("actStatus");
                if(new Date().getTime() < res.data.consumptionGiftCRuleVo.activityStartTime){
                  this.orderEndTime = ''
                  console.log(this.orderEndTime,"orderEndTime");
                }else{
                  this.orderEndTime = res.data.consumptionGiftCRuleVo.orderEndTime
                }
                // if(this.consumptionGiftPrizeVoList &&this.consumptionGiftPrizeVoList.length > 0 && this.consumptionGiftPrizeVoList[0].status == 5){
                //   this.$toast('活动期间内，仅可领取一次奖励');
                // }
        this.timer = new Date().getTime();
        });
      }
    },
    receiveClick(item){
      Dialog.confirm({
        message: '本活动奖品仅限选择一件领取，一旦确认领取，将无法再领取其他奖品。请确认是否领取？',
      })
        .then(() => {
          this.prizeStstusClick(item)
        })
        .catch(() => {
          
        });
    },
    //奖品状态点击
    prizeStstusClick(item) {
        console.log(item);
      if (this.isTemplate) {
        this.$toast('活动预览，仅供参考');
        return;
      }
      let actStatus4 = sessionStorage.getItem('actStatus');
      if (actStatus4 == 1) {
        this.$toast('活动尚未开始');
        return;
      }
      if (actStatus4 == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (item.status == 1) {
        //正常领奖
        immediatelyDraw(item.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 if(receiveData.resp_code ==60010) {
            this.$toast('抱歉，奖品已发完~');
             setTimeout(() => {
              this.initData();
            }, 1000);
            
          }
        });
      }
    },
    //点击可修改位置的方法
    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');

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

<style lang="scss">
.purchaseDivAll {
  .getDrawConditionDiv {
    // text-decoration: underline;
  }
  .orderEndTimeDiv {
     font-size: 0.3rem;
    font-weight: bold;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-align: center;
    -ms-flex-align: center;
    height: 100%;
    background: #8f3f37;
    height: 0.4rem;
    border-radius: 0.2rem;
    margin-left: 3.5rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
  .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;
  }
  .van-swipe__indicators{
    display: none;
  }
  .swipe_box{
    width: 100%;
    height: 5.5rem;
    // background: skyblue;
  }
  .van-progress{
    // background: red !important;
  }
}
.progressLine {
  .van-progress {
    .van-progress__portion {
      background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/138163/14/38617/370/64d49395Fd3cc0f71/7cc47e3040212e77.png) !important;
      background-size: 0.16rem 0.38rem !important;
    }
  }
}
</style>
