<template>
  <div class="prizeSwiperDivAlla" ref="swiperPrize"
    @click="styleClick('click', 'swiperPrize')"
    @mousemove="styleClick('mousemove', 'swiperPrize')"
    @mouseout="styleClick('mouseout')" :style="styleData.prizeSwiperDivAll">
    <div id="root" :style="styleData.prizeDivAll">
      <div :style="styleData.swiperDivAll">
        <div v-if="activityType == 10044" :style="styleData.swiperTitle">
          <div>参与投票有机会获得以下奖品</div>
          <div :style="styleData.swiperWord">
            <span :style="styleData.swiperNum">{{ voteSelectCount }}</span>
            人已参与
          </div>
        </div>
        <div :style="styleData.swiperDivAll1">
          <div class="swiper-container">
            <div class="swiper-wrapper" :style="styleData.swiperWrapper">
              <div class="swiper-slide" :class="[keyData.resetSwiperSlid ? 'resetSwiperSlid' :'']" :style="styleData.swiperSlide" v-for="(item, index) in prizeList" :key="index">
                <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" v-if="styleData.rightDivAll1">
                  <div :style="styleData.rightDivAll">
                    <div :style="styleData.prizeName">{{ item.prizeName }}</div>

                    <div :style="styleData.prizeNum">奖品剩余：{{ item.leftNum }}份</div>
                  </div>
                  <div :style="styleData.currentPosition">
                    <div :style="styleData.currentPosition1">{{ index + 1 }}/{{ prizeList.length }}</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="swiper-pagination" v-if="styleData.rightDivAll1"></div>
          </div>
        </div>
      </div>
    </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 { getPrizeList, immediatelyDraw, immediatelyDrawGray, buildPrize } = apis1;
import { PrizeResultPopComService, NoPrizeResultPopComService } from '../../../util/comCreate.js';
import store from '../../../store/store';
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: '0', // 参与人数
      swiperss: '',
      activityType: ''
    };
  },
  created() {
    this.activityType = sessionStorage.getItem('activityType');
    this.publicData.$on('reloadPrize', datas => {
      if (datas == 'true' || datas == true) {
        this.initData();
      }
    });
    this.publicData.$on('voteSelectCount', data => {
      this.voteSelectCount = data;
    });
    this.publicData.$on('prizeInit', data => {
      this.initData();
    });
  },
  mounted() {
    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) {
          this.voteSelectCount = 0;
          this.datasTemplate = datas;
          // console.log(datas,'datasdatasdatasdatas')
          this.nowDate = this.nowTime;
          if (datas.bulidingSettingData) {
             this.prizeList = datas.bulidingSettingData.draw.prizeList;
            for(var i = 0;i<this.prizeList.length;i++){
              this.prizeList[i].leftNum = this.prizeList[i].totalPrizeNum
            }

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

          }
          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('.swiper-container', {
              loop: false, // 循环模式选项
              loopedSlides: 1,
              width: this.keyData.resetSwiperSlid ? (2.11/7.5)*375 : undefined,
              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大飒飒',
              prizeType: 4,
              leftNum: 12
            },
            {
              showImg: '//img10.360buyimg.com/imgzone/jfs/t1/149370/34/18647/46712/5fd996ffE13b5f450/db0928bd887bf1bc.png',
              allNum: 2,
              days: 2,
              prizeName: '京豆',
              prizeType: 1,
              leftNum: 2
            },
            {
              showImg: '//img10.360buyimg.com/imgzone/jfs/t1/163244/9/827/6488/5ff2b579E956f2913/d18f15bfc917fbb2.png',
              allNum: 3,
              days: 3,
              prizeName: '优惠券',
              prizeType: 2,
              leftNum: 22
            }
          ];
          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('.swiper-container', {
              loop: false, // 循环模式选项
              loopedSlides: 1,
              width: this.keyData.resetSwiperSlid ? (2.11/7.5)*375 : undefined,
              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 {
        var that = this;
        buildPrize(prizesData => {
          let prizesDataAll = prizesData;
          that.prizeList = prizesDataAll.data;
          that.prizeNum = that.prizeList[0].allNum;
          that.prizeName = that.prizeList[0].prizeName;
          that.activeIndex11 = 0;
          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('.swiper-container', {
              loop: false, // 循环模式选项
              loopedSlides: 1,
              width: this.keyData.resetSwiperSlid ? (2.11/7.5)*375 : undefined,
              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;

              // that.checkStatus();
            });
          });
        });
      }
    },
    //检查领奖状态
    checkStatus() {
      if (this.basic[this.keyData.receivePrizeTimeStartTime] > this.nowDate) {
        this.start = true;
        this.end = false;
        this.sign = false;
        this.buttonText = '未开始';
      } else if (this.basic[this.keyData.receivePrizeTimeStartTime] < this.nowDate && this.nowDate < this.basic[this.keyData.receivePrizeTimeEndTime]) {
        if (this.nowDate < 1624190400000) {
          // 1624190400000
          if (this.prizeList[this.activeIndex11].prizeType == '3') {
            this.sign = false;
            this.buttonText = '敬请期待';
          } else {
            this.sign = false;
            this.buttonText = '未达成领取资格';
            let receivePrizesList = this.receivePrizesList; //可领取奖品列表
            if (this.receiveListData.data.canReceive == false) {
              this.sign = false;
              this.buttonText = '已达领取上限';
            } else {
              for (var i = 0; i < receivePrizesList.length; i++) {
                if (this.prizeList[this.activeIndex11].id == receivePrizesList[i].prizeInfoId) {
                  if (receivePrizesList[i].status == 0) {
                    if (this.prizeList[this.activeIndex11].leftNum > 0) {
                      this.sign = true;
                    } else {
                      this.sign = false;
                      this.buttonText = '已抢完';
                    }
                  } else if (receivePrizesList[i].status == 1) {
                    this.sign = false;
                    this.buttonText = '已领取';
                  } else if (receivePrizesList[i].status == 2) {
                    this.sign = false;
                    this.buttonText = '立即领取';
                  }
                }
              }
            }
            this.start = false;
            this.end = true;
          }
        } else {
          this.sign = false;
          this.buttonText = '未达成领取资格';
          let receivePrizesList = this.receivePrizesList; //可领取奖品列表
          if (this.receiveListData.data.canReceive == false) {
            this.sign = false;
            this.buttonText = '已达领取上限';
          } else {
            for (var i = 0; i < receivePrizesList.length; i++) {
              if (this.prizeList[this.activeIndex11].id == receivePrizesList[i].prizeInfoId) {
                if (receivePrizesList[i].status == 0) {
                  if (this.prizeList[this.activeIndex11].leftNum > 0) {
                    this.sign = true;
                  } else {
                    this.sign = false;
                    this.buttonText = '已抢完';
                  }
                } else if (receivePrizesList[i].status == 1) {
                  this.sign = false;
                  this.buttonText = '已领取';
                } else if (receivePrizesList[i].status == 2) {
                  this.sign = false;
                  this.buttonText = '立即领取';
                }
              }
            }
          }
          this.start = false;
          this.end = true;
        }
      }
    },
    //立即领取点击按钮
    drawprize() {
      if (this.isTemplate) {
        // this.$toast('活动预览，仅供查看');
        return;
      } else if (!this.isTemplate) {
        let actStatus = sessionStorage.getItem('actStatus');
        if (actStatus == 1) {
          Toast('活动尚未开始');
          return;
        } else if (actStatus == 2) {
          Toast('活动已结束');
          return;
        }
        immediatelyDraw(this.prizeList[this.activeIndex11].id, receiveData => {
          if (receiveData.resp_code == 0) {
            if (receiveData.data.result == true) {
              this.initData();
              var obj = {
                datas: {},
                keyData: {
                  prizeUrl: 'showImg',
                  prizeName: 'prizeName',
                  prizeType: 'prizeType',
                  priceInfo: 'priceInfo',
                  discountType: 'discountType',
                  couponType: 'couponType'
                }
              };
              obj.datas = this.prizeList[this.activeIndex11];
              PrizeResultPopComService.create(obj, receiveData.data, submit => {
                PrizeResultPopComService.close();
              });
            } else {
              NoPrizeResultPopComService.create(
                '抱歉您与奖品擦肩而过~',
                '//img10.360buyimg.com/imgzone/jfs/t1/152859/24/15591/14697/6008f58fE1744005f/765fe66b5a48aefc.png',
                submit => {
                  NoPrizeResultPopComService.close();
                }
              );
              this.initData();
            }
          } else if (receiveData.resp_code == 1000) {
            this.$toast('已领取');
          }
        });
      }
    }
  }
};
</script>

<style lang="scss">
.prizeSwiperDivAlla {
  .swiper-container {
    z-index: 0 !important;
  }
  .swiper-container .swiper-wrapper .swiper-slide {
    display: flex;
    background: #ffffff;
    border-radius: 0.2rem;
  }
 .swiper-container .swiper-wrapper .resetSwiperSlid{
    width: 2.01rem !important;
    margin-right: 0.2rem;
  }
  .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;
  }

  .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;
  }
  #root {
    margin: 0 1rem;
  }

  .swiper-container .swiper-wrapper .swiper-slide img {
    width: 2rem;
    height: 2rem;
  }
}
</style>
