<template>
  <div class="prizeSwiperDivAlla" ref="swiperPrizeRanking88"
       @click="styleClick('click', 'swiperPrizeRanking88')"
       @mousemove="styleClick('mousemove', 'swiperPrizeRanking88')"
       @mouseout="styleClick('mouseout')" :style="styleData.prizeSwiperDivAll" v-if="isShow">
    <div :style="styleData.titlePrize"></div>
    <div :style="styleData.prizeDivAll">
      <div :style="styleData.swiperDivAll">
        <div class="swiper-container  sw2">
          <div class="swiper-wrapper" :style="styleData.swiperWrapper">
            <div class="swiper-slide swiper-slide-active" 
                 v-for="(item, index) in prizeList" :key="index">
                 <div :style="styleData.swiperSlide" class="prize-info-box">
                    <div :style="styleData.imgbox" >
                      <img :src="item.showImg" :style="styleData.imgdiv" alt="图片1加载失败"/>
                      <div :style="styleData.backName" class="back" v-if="item.prizeType == '1'">京豆</div>
                      <div :style="styleData.backName" class="back" v-if="item.prizeType == '2'">优惠券</div>
                      <div :style="styleData.backName" class="back" v-if="item.prizeType == '3'">实物</div>
                      <div :style="styleData.backName" class="back" v-if="item.prizeType == '4'">积分</div>
                      <div :style="styleData.backName" class="back" v-if="item.prizeType == '5'">专享价</div>
                      <div :style="styleData.backName" class="back" v-if="item.prizeType == '6'">红包</div>
                      <div :style="styleData.backName" class="back" v-if="item.prizeType == '7'">礼品卡</div>
                      <div :style="styleData.backName" class="back" v-if="item.prizeType == '8'">京东E卡</div>
                      <div :style="styleData.backName" class="back" v-if="item.prizeType == '9'">plus会员卡</div>
                      <div :style="styleData.backName" class="back" v-if="item.prizeType == '10'">爱奇艺会员卡</div>
                      <div :style="styleData.backName" class="back" v-if="item.prizeType == '11'">积分</div>
                      <div :style="styleData.backName" class="back" v-if="item.prizeType == '12'">福禄奖品</div>
                    </div>
                    <div class="rightDivAll1" :style="styleData.rightDivAll1">
                      <div :style="styleData.rightDivAll">
                        <div :style="styleData.prizeName">{{ item.prizeName }}</div>

                        <div :style="styleData.prizeRankNum" v-if="item.startNum==item.endNum ">
                          排名为<span :style="styleData.prizeRankNumSpan">第{{ item.startNum }}名</span>可领取
                        </div>
                        <div :style="styleData.prizeRankNum" v-else>
                          排名为<span :style="styleData.prizeRankNumSpan">第{{ item.startNum }}名~第{{ item.endNum }}名</span>可领取
                        </div>

                        <div :style="styleData.prizeNum">奖品剩余：{{ item.leftNum }}份</div>

                      </div>
                    </div>
                 </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="risingSignStatus == 1" :style="styleData.btn1" @click="conditionClick(1)">已报名</div>
    <div v-if="!risingSignStatus" :style="styleData.btn1" @click="conditionClick(0)">报名</div>
    <!-- <div v-if="risingSignStatus == 1" :style="styleData.signMsg" style="color: red;margin-top: .3rem;font-weight: bold;">已报名</div> -->

  </div>
</template>

<script>
import Swiper from 'swiper/swiper-bundle.min.js';
import 'swiper/swiper-bundle.min.css';
import apis1 from '../../../util/apis1.js';

let {immediatelyDraw, orderCourtesyPrizeList,orderCourtesySignApi,orderCourtesy} = apis1;
import {PrizeResultPopComService, NoPrizeResultPopComService} from '../../../util/comCreate.js';
import store from '../../../store/store';
import {goToShopPage} from "../../../util/tools";
import {hdzxtMyOrderPopService, orderEndPopService, orderGoodsPopService,AddressPopComService} from "../../../util/hdzxtcomCreate";

export default {
  name: 'carouselImg',
  props: ['isTemplate', 'datas', 'keyData', 'styleData', 'templateData', 'isWebClick'],
  components: {},
  data() {
    return {
      basic: {
        receivePrizeTimeStartTime: '', //领奖开始时间
        receivePrizeTimeEndTime: '' //领奖结束时间
      },
      nowDate: new Date().getTime(), //当前时间
      prizeList: [], //奖品列表
      prizeNum: 0, //当前奖品数量
      prizeName: '', //当前奖品名称
      signDay: 0, //签到天数
      start: true, //开始领奖倒计时
      end: false, //结束领奖倒计时
      buttonText: '', //按钮文案
      sign: true, //按钮状态
      isShow: true, //整个是否展示
      receivePrizesList: [],
      voteSelectCount: '', // 参与人数
      swiperss: '',
      activityType: '',
      awardNum: '',
      memberType: '',
      getPrizeNum: 0, // 单一型奖品可领次数
      styleDataOld:{},
      risingSignStatus:0,
      opportunityType:0,
      orderEndTime:''
    };
  },
  created() {
    this.activityType = sessionStorage.getItem('activityType');
    const templateId = sessionStorage.getItem('templateId');
    if(templateId == '20210824123534601112781'){
      this.styleData.btn1.backgroundImage = 'url(//img10.360buyimg.com/imgzone/jfs/t1/282095/3/15713/14223/67f39113F4823126d/661fd724a2488868.png)',
      this.styleData.btn1.display = 'flex',
      this.styleData.btn1.alignItems = 'center'
      this.styleData.btn1.justifyContent = 'center'
      this.styleData.btn1.color = '#fff'
      this.styleData.btn1.fontSize = '18px'
      this.styleData.btn1.fontWeight = 'bold'
    }
    this.publicData.$on('reloadPrize', datas => {
      if (datas == 'true' || datas == true) {
        this.initData();
      }
    });
    this.publicData.$on('voteSelectCount', data => {
      this.voteSelectCount = data;
    });
    this.publicData.$on('pizereFresh', type => {
      this.initData();
    })
  },
  mounted() {
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },
  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          isCustomSwitching: this.receive,
          c_this: this,
          styleDataOld: this.styleDataOld
        };
        this.$emit('opertaionCom', type, byValue);
      }
    },
    initData() {
      var datas = this.templateData;
      if (this.isTemplate == true) {
        if (datas) {
          console.log(datas, 'datasdatas')
          this.voteSelectCount = 0;
          this.datasTemplate = datas;
          // console.log(datas,'datasdatasdatasdatas')
          this.nowDate = this.nowTime;
          if (datas.rank.isOpen == 1) {
            this.isShow = true
            this.prizeList = datas.rank.draw.prizeList;

            let rule = datas.rank.rule;

            for (var i = 0; i < this.prizeList.length; i++) {
              this.prizeList[i].leftNum = this.prizeList[i].totalPrizeNum
              this.prizeList[i].startNum = rule[i].beginNum
              this.prizeList[i].endNum = rule[i].endNum


            }

            this.prizeNum = this.prizeList[0].totalPrizeNum;
            this.prizeName = this.prizeList[0].prizeName;
            this.signDay = this.prizeList[0].cotinueSignDay;
            this.leftNum = this.prizeList[0].totalPrizeNum;

          } else {
            this.isShow = false
          }
          if (datas.draw) {
            this.prizeList = datas.draw.prizeList;
            this.prizeNum = this.prizeList[0].totalPrizeNum;
            this.prizeName = this.prizeList[0].prizeName;
            this.signDay = this.prizeList[0].cotinueSignDay;
            this.prizeList.forEach(item => {
              item.leftNum = item.totalPrizeNum;
            });
          }

          var that = this;
          this.$nextTick(() => {
            var mySwiper = new Swiper('.sw2', {
              loop: false, // 循环模式选项
              loopedSlides: 1,
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
              },
              pagination: {
                el: '.swiper-pagination',
                type: 'bullets'
              },
              autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true
              }
            });
            mySwiper.on('slideChange', function () {
              that.activeIndex11 = this.activeIndex;
              that.prizeNum = that.prizeList[this.activeIndex].totalPrizeNum;
              that.prizeName = that.prizeList[this.activeIndex].prizeName;
              that.signDay = that.prizeList[this.activeIndex].cotinueSignDay;
              that.leftNum = that.prizeList[this.activeIndex].totalPrizeNum;
              console.log(that.leftNum, 'that.that.leftNum')
            });
          });
        } else {
          this.basic[this.keyData.receivePrizeTimeStartTime] = 1621506683000;
          this.basic[this.keyData.receivePrizeTimeEndTime] = 1683887483000;
          this.nowDate = this.nowTime = new Date().getTime();
          this.prizeList = [
            {
              showImg: '//img10.360buyimg.com/imgzone/jfs/t1/135708/33/20224/53331/5fd996ffE527ce925/d8282829b61c16d5.png',
              allNum: 1,
              days: 1,
              prizeName: '戴高A5按扣活页笔记本 / 年 会特等奖专供 512GA灰色scdasdaszxc大飒飒',
              prizeTypeName: 4,
              leftNum: 12,
              startNum: '1',
              endNum: '12'
            },
            {
              showImg: '//img10.360buyimg.com/imgzone/jfs/t1/149370/34/18647/46712/5fd996ffE13b5f450/db0928bd887bf1bc.png',
              allNum: 2,
              days: 2,
              prizeName: '京豆',
              prizeTypeName: 1,
              leftNum: 2,
              startNum: '13',
              endNum: '14'
            },
            {
              showImg: '//img10.360buyimg.com/imgzone/jfs/t1/163244/9/827/6488/5ff2b579E956f2913/d18f15bfc917fbb2.png',
              allNum: 3,
              days: 3,
              prizeName: '优惠券',
              prizeTypeName: 2,
              leftNum: 23,
              startNum: '15',
              endNum: '37'
            }
          ];
          this.prizeNum = this.prizeList[0].allNum;
          this.prizeName = this.prizeList[0].prizeName;
          this.signDay = this.prizeList[0].days;
          console.log('ccccccccccccccc');
          var that = this;
          this.$nextTick(() => {
            var mySwiper = new Swiper('.sw2', {
              loop: false, // 循环模式选项
              loopedSlides: 1,
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
              },
              pagination: {
                el: '.swiper-pagination',
                type: 'bullets'
              },
              autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true
              }
            });
            mySwiper.on('slideChange', function () {
              that.activeIndex11 = this.activeIndex;
              that.prizeNum = that.prizeList[this.activeIndex].allNum;
              that.prizeName = that.prizeList[this.activeIndex].prizeName;
              that.signDay = that.prizeList[this.activeIndex].days;
            });
          });

          //自动刷新
          this.signStartTime = this.basic[this.keyData.receivePrizeTimeStartTime];
          this.signEndTime = this.basic[this.keyData.receivePrizeTimeEndTime]; //1609736010000 1614418856000;

          if (this.basic[this.keyData.receivePrizeTimeStartTime] > this.nowDate) {
            this.start = true;
            this.end = false;
            this.sign = false;
            this.buttonText = '未开始';

            this.signStartTime = this.basic[this.keyData.receivePrizeTimeStartTime];
            this.signEndTime = this.basic[this.keyData.receivePrizeTimeEndTime]; //1609736010000 1614418856000;
          } else if (this.basic[this.keyData.receivePrizeTimeStartTime] < this.nowDate && this.nowDate < this.basic[this.keyData.receivePrizeTimeEndTime]) {
            this.start = false;
            this.end = true;
            this.sign = false;
            this.buttonText = '已领完';
          } else if (this.nowDate > this.basic[this.keyData.receivePrizeTimeEndTime]) {
            this.isShow = false;
          }
        }
      } else {
        this.orderCourtesyFun()
      }
    },
    orderCourtesyFun(){
      orderCourtesy(res=>{
        this.risingSignStatus = res.data.receiveStatus
        this.opportunityType = res.data.opportunityType
        this.orderEndTime = res.data.orderEndTime
        sessionStorage.setItem('opportunityType',this.opportunityType)
        var that = this;
        let activityId = sessionStorage.getItem('activityId')
        orderCourtesyPrizeList(activityId, prizesData => {
          console.log(prizesData.data.length <= 0, 'prizesDataprizesDataprizesData')
          if (prizesData.data.length <= 0) {
            this.isShow = false
          } else {
            this.isShow = true
            let prizesDataAll = prizesData;
            let endNum = prizesDataAll.data[prizesDataAll.data.length -1].endNum
            this.publicData.$emit('endNum',endNum)
            console.log(prizesData, 'prizesDataprizesDataprizesData')
            that.prizeList = prizesDataAll.data;
            this.prizeList.forEach(i => {
              i.leftNum = i.stock
              i.prizeType = i.prizeTypeName
            })
            that.prizeNum = that.prizeList[0].allNum;
            that.prizeName = that.prizeList[0].prizeName;
            that.activeIndex11 = 0;
            this.memberType = prizesDataAll.data.memberType
            this.awardNum = prizesDataAll.data.awardNum
            that.publicData.$emit('prizeList', prizesDataAll.data);
            console.log(prizesDataAll.data, 'that.prizelis---');
            this.$nextTick(() => {
              if (that.swiperss) {
                that.swiperss.destroy(false);
              }
              that.swiperss = new Swiper('.sw2', {
                loop: false, // 循环模式选项
                loopedSlides: 1,
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev'
                },
                pagination: {
                  el: '.swiper-pagination',
                  type: 'bullets'
                },
                autoplay: {
                  delay: 3000,
                  stopOnLastSlide: false,
                  disableOnInteraction: true
                }
              });
              // that.swiperss.navigation.update();
              // that.swiperss.on('slideChange', function () {
              //   that.activeIndex11 = this.activeIndex;
              //   that.prizeNum = that.prizeList[this.activeIndex].allNum;
              //   that.prizeName = that.prizeList[this.activeIndex].prizeName;
              //
              // });
            });
          }
        });
      })
    },
    //去下单
    conditionClick(type) {
      console.log(type,"type");
      
      if (this.isTemplate || this.isWebClick) {
        // this.$toast('活动预览，仅供参考');
        return;
      }

      if (sessionStorage.getItem('actStatus') == 1) {
        this.$toast('活动尚未开始');
        return;
      }
      if(type == 1){
        this.$toast("您已报名成功～");
        return
      }
      if(type == 0){
        if( new Date().getTime() <= this.orderEndTime){
           if(this.opportunityType == 1){
            var datas = {
              isEditAddress: true,
              isAlLookAddress: false,
            };
            AddressPopComService.create(datas,this.styleData, (submit) => {
              AddressPopComService.close();
              if(submit){
                this.risingSignStatus = 1
                orderCourtesySignApi(res=>{})
              }else{
                this.$toast("报名前请先填写收货信息，方便中奖后奖品的发放。");
              }
            });
          }else{
            this.risingSignStatus = 1
            orderCourtesySignApi(res=>{})
          }
        }else{
          orderEndPopService.create(this.isTemplate, '', submit => {
            orderEndPopService.close();
          });
        }
      }

      // this.$toast("您已报名成功～");
      // if (sessionStorage.getItem('canBuy')=='0') {
      //   if (sessionStorage.getItem("assignGoodsFlag") == '0') {
      //     goToShopPage(store.state.shopId);
      //   } else {
      //     this.stopScroll();
      //     orderGoodsPopService.create(this.isTemplate, this.styleData, submit => {
      //       this.canScroll();
      //       orderGoodsPopService.close();
      //     });
      //   }
      // } else {
      //   this.stopScroll();
      //   orderEndPopService.create(this.isTemplate, '', submit => {
      //     this.canScroll();
      //     orderEndPopService.close();
      //   });
      // }


    },
  }
};
</script>

<style lang="scss" scoped="scoped">
.prizeSwiperDivAlla {
  .swiper-container {
    z-index: 0 !important;
    width: 6.34rem;
    overflow: hidden;

  }

  .swiper-container .swiper-wrapper .swiper-slide {
    display: flex;
    width: 6.34rem !important;
    // height: 2.7rem;
    margin: 0 auto;
  }

  .swiper-pagination {
    position: initial;
    /* bottom: 0; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.2rem;
  }

  .swiper-pagination-bullet {
    width: 0.1rem;
    height: 0.1rem;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }

  .swiper-pagination-bullet-active {
    width: 1rem;
    height: 0.1rem;
    background: #ffffff;
    border-radius: 0.05rem;
    background: #fff;
    border-radius: .1rem
  }

  .title {
    background: rgba(0, 0, 0, 0.7);
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/154087/9/21095/16555/6040a5feEb4e16989/e566e45702a66e92.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 4.6rem;
    height: 0.95rem;
    margin: 0.5rem auto;
  }

  .signPrize {
    margin-top: 0.3rem;
    color: white;
    font-size: 0.33rem;
  }

  .signDay {
    font-size: 0.33rem;
    color: #68ae7c;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
  }

  .prizeButton {
    margin-top: 1rem;
  }

  .signButton {
    width: 3.1rem;
    height: 0.8rem;
    line-height: 0.8rem;
    background-color: #cbcbcb;
    border-radius: 0.5rem;
    margin: auto;
    font-size: 0.4rem;
    color: #7f7f7f;
    margin-top: -1rem;
  }

  .button {
    width: 3.1rem;
    height: 0.8rem;
    line-height: 0.8rem;
    background-color: #ddba71;
    border-radius: 0.5rem;
    margin: auto;
    font-size: 0.4rem;
    color: #7f5935;
  }

  .swiper-button-prev {
    color: white;
    margin-top: 11rem;
    --swiper-navigation-size: 30px;
  }

  .swiper-button-next {
    color: white;
    margin-top: 11rem;
    --swiper-navigation-size: 30px;
  }

  .button {
    margin-top: -1rem;
  }

  .left {
    width: 0.33rem;
    height: 0.57rem;
    float: left;
    margin-left: 0.25rem;
  }

  .right {
    width: 0.33rem;
    height: 0.57rem;
    float: right;
    margin-right: 0.25rem;
  }

  .swiper-container .swiper-wrapper .swiper-slide img {
    width: 2rem;
    height: 2rem;
  }
}
.prize-info-box{
  display: flex;
}
</style>
