<template>
  <div v-if="isShow">
    <van-count-down
      :time="basic[keyData.receivePrizeTimeStartTime] - nowDate"
      format="DD 天 HH 时 mm 分 ss 秒"
      :style="styleData.countDownStyle1"
      v-if="start"
    >
      <template #default="timeData">
        <span class="block" :style="styleData.blockStyle1">{{
          timeData.days >= 10 ? timeData.days : "0" + timeData.days
        }}</span>
        <span class="colon" :style="styleData.colonStyle1">天</span>
        <span class="block" :style="styleData.blockStyle1">{{
          timeData.hours >= 10 ? timeData.hours : "0" + timeData.hours
        }}</span>
        <span class="colon" :style="styleData.colonStyle1">时</span>
        <span class="block" :style="styleData.blockStyle1">{{
          timeData.minutes >= 10 ? timeData.minutes : "0" + timeData.minutes
        }}</span>
        <span class="colon" :style="styleData.colonStyle1">分</span>
        <span class="block" :style="styleData.blockStyle1">{{
          timeData.seconds >= 10 ? timeData.seconds : "0" + timeData.seconds
        }}</span>
        <span class="colon" :style="styleData.colonStyle1">秒</span>
        <span :style="styleData.colonStyle1">后开始领奖</span>
      </template>
    </van-count-down>

    <van-count-down
      :time="basic[keyData.receivePrizeTimeEndTime] - nowDate"
      format="DD 天 HH 时 mm 分 ss 秒"
      :style="styleData.countDownStyle1"
      v-if="end"
    >
      <template #default="timeData">
        <span class="block" :style="styleData.blockStyle1">{{
          timeData.days >= 10 ? timeData.days : "0" + timeData.days
        }}</span>
        <span class="colon" :style="styleData.colonStyle1">天</span>
        <span class="block" :style="styleData.blockStyle1">{{
          timeData.hours >= 10 ? timeData.hours : "0" + timeData.hours
        }}</span>
        <span class="colon" :style="styleData.colonStyle1">时</span>
        <span class="block" :style="styleData.blockStyle1">{{
          timeData.minutes >= 10 ? timeData.minutes : "0" + timeData.minutes
        }}</span>
        <span class="colon" :style="styleData.colonStyle1">分</span>
        <span class="block" :style="styleData.blockStyle1">{{
          timeData.seconds >= 10 ? timeData.seconds : "0" + timeData.seconds
        }}</span>
        <span class="colon" :style="styleData.colonStyle1">秒</span>
        <span :style="styleData.colonStyle1">后结束领奖</span>
      </template>
    </van-count-down>
    <div class="title"></div>
    <div id="root" style="overflow: hidden">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in prizeList"
            :key="index"
          >
            <img :src="item.showImg" />
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-button-next"></div>
    <div class="signPrize">{{ prizeName }} 共{{ prizeNum }}份</div>
    <div class="signDay">累计签到{{ signDay }}天领取</div>
    <div class="prizeButton">
      <div class="button" v-if="sign" v-lz-click="'16'" @click="drawprize">开始领取</div>
      <div class="signButton" v-else>{{ buttonText }}</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 } = apis1;
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
} from "../../../util/comCreate.js";
import store from "../../../store/store";
export default {
  name: "carouselImg",
  props: ["isTemplate", "datas", "keyData", "styleData", "templateData"],
  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: [],
      swiperss: "",
      nowTime111:''
    };
  },
  created() {
    var ss = Date(new Date().getTime()+(parseInt(new Date().getTimezoneOffset()/60) + 8)*3600*1000); 
    this.nowTime111 = new Date(ss).getTime()
    console.log(this.nowTime111)
    this.publicData.$on("showCarouselimg", (datas) => {
      if (datas == false) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    });
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      var datas = this.templateData;
      if (this.isTemplate == true) {
        if (datas) {
          this.datasTemplate = datas;
          var tabValue = store.state.tabValue; //模板预览时期

          // this.basic[this.keyData.receivePrizeTimeStartTime] = datas.sign.receive.startTime;
          // this.basic[this.keyData.receivePrizeTimeEndTime] = datas.sign.receive.endTime;
          // this.activityEndTime = datas.activity.endTime;
          if (tabValue) {
            if (tabValue == "1") {
              //签到期
              this.nowTime = new Date().getTime(); //1613721651000; //2021-02-19 16:00:51
              this.basic[this.keyData.receivePrizeTimeStartTime] =
                datas.sign.receive.startTime; //1613960669000; //2021-02-23 15:03:56
              this.basic[this.keyData.receivePrizeTimeEndTime] =
                datas.sign.receive.endTime; //1614047069000; //2021-02-24 16:03:56 1609774412000 1609837728000
              this.start = true;
              this.end = false;
              this.sign = false;
              this.buttonText = "未开始";
            } else if (tabValue == "2") {
              //领奖期
              // this.nowTime = 1613355869000; //2021-02-15 10:24:29
              // this.basic[this.keyData.receivePrizeTimeStartTime] = 1611208276000; //2021-01-21 13:51:16
              // this.basic[this.keyData.receivePrizeTimeEndTime] = 1613721651000; //2021-02-19 16:00:51 1609774412000 1609837728000
              this.nowTime = new Date().getTime(); //1613721651000; //2021-02-19 16:00:51
              this.basic[this.keyData.receivePrizeTimeStartTime] =
                datas.sign.receive.startTime; //1613960669000; //2021-02-23 15:03:56
              this.basic[this.keyData.receivePrizeTimeEndTime] =
                datas.sign.receive.endTime; //161
              this.start = false;
              this.end = true;
              this.sign = true;
              this.publicData.$emit(
                "isNotyFiceWinnerReorrd",
                false,
                this.isTemplate
              );
            } else if (tabValue == "3") {
              //公告期
              this.isFinish = true;
              this.nowTime = 1614219869000; //2021-02-19 16:00:51
              this.basic[
                this.keyData.receivePrizeTimeStartTime
              ] = 1611208276000; //2021-01-21 13:51:16
              this.basic[this.keyData.receivePrizeTimeEndTime] = 1613960669000; //2021-02-22 10:24:29
              this.publicData.$emit(
                "isNotyFiceWinnerReorrd",
                true,
                this.isTemplate
              );
              this.isShow = false;
            }
          } else {
            this.nowTime = 1613721651000; //2021-02-19 16:00:51
            this.basic[this.keyData.receivePrizeTimeStartTime] = 1613891036000; //2021-02-21 15:03:56
            this.basic[this.keyData.receivePrizeTimeEndTime] = 1613894636000; //2021-02-21 16:03:56 1609774412000 1609837728000
          }

          this.nowDate = this.nowTime;
          this.prizeList = datas.draw.prizeList;
          this.prizeNum = this.prizeList[0].totalPrizeNum;
          this.prizeName = this.prizeList[0].prizeName;
          this.signDay = this.prizeList[0].cotinueSignDay;
          // this.activityEndTime =

          var that = this;
          this.$nextTick(() => {
            var mySwiper = new Swiper(".swiper-container", {
              loop: false, // 循环模式选项
              loopedSlides: 1,
              navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
              },
            });
            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;
            });
          });

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

          // if (this.basic[this.keyData.receivePrizeTimeStartTime] > this.nowDate) {
          //   console.log('carusellmg未开始')
          //   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;
          //   this.publicData.$emit('isNotyFiceWinnerReorrd', false, this.isTemplate);
          // } else if (this.basic[this.keyData.receivePrizeTimeStartTime] < this.nowDate && this.nowDate < this.basic[this.keyData.receivePrizeTimeEndTime]) {
          //    console.log('carusellmg已领完')
          //   this.start = false;
          //   this.end = true;
          //   this.sign = true;
          //   this.publicData.$emit('isNotyFiceWinnerReorrd', false, this.isTemplate);
          // } else if (this.nowDate > this.basic[this.keyData.receivePrizeTimeEndTime]) {
          //   this.publicData.$emit('isNotyFiceWinnerReorrd', true, this.isTemplate);
          //       console.log('carusellmg已结束')
          // }
        } 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: "积分",
            },
            {
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/149370/34/18647/46712/5fd996ffE13b5f450/db0928bd887bf1bc.png",
              allNum: 2,
              days: 2,
              prizeName: "京豆",
            },
            {
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/163244/9/827/6488/5ff2b579E956f2913/d18f15bfc917fbb2.png",
              allNum: 3,
              days: 3,
              prizeName: "优惠券",
            },
          ];
          this.prizeNum = this.prizeList[0].allNum;
          this.prizeName = this.prizeList[0].prizeName;
          this.signDay = this.prizeList[0].days;

          var that = this;
          this.$nextTick(() => {
            var mySwiper = new Swiper(".swiper-container", {
              loop: false, // 循环模式选项
              loopedSlides: 1,
              navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
              },
            });
            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;
        getPrizeList((prizesData) => {
          this.basic[this.keyData.receivePrizeTimeStartTime] =
            prizesData.data.startTime;
          this.basic[this.keyData.receivePrizeTimeEndTime] =
            prizesData.data.endTime;
          this.nowDate = this.nowTime = new Date().getTime();
          this.prizeList = prizesData.data.prizeInfo;
          that.prizeNum = that.prizeList[0].allNum;
          that.prizeName = that.prizeList[0].prizeName;
          that.signDay = that.prizeList[0].days;
          that.activeIndex11 = 0;
          immediatelyDrawGray((receiveListData) => {
            this.receiveListData = receiveListData;
            this.receivePrizesList = receiveListData.data.receivePrizes; //可领取奖品列表
            this.$nextTick(() => {
              if (that.swiperss) {
                that.swiperss.destroy(false);
              }

              that.swiperss = new Swiper(".swiper-container", {
                loop: false, // 循环模式选项
                loopedSlides: 1,
                navigation: {
                  nextEl: ".swiper-button-next",
                  prevEl: ".swiper-button-prev",
                },
              });
              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.signDay = that.prizeList[this.activeIndex].days;

                that.checkStatus();
              });
            });

            //自动刷新
            this.signStartTime =
              this.basic[this.keyData.receivePrizeTimeStartTime];
            this.signEndTime = this.basic[this.keyData.receivePrizeTimeEndTime]; //1609736010000 1614418856000;
            var timeDiff = parseInt(this.signStartTime - this.nowDate) + "";

            if (timeDiff > 0 && timeDiff.length < 9) {
              //定时刷新判断签到时间是否结束
              var a = setInterval(() => {
                //重新请求
                this.initData();
                clearInterval(a);
              }, timeDiff);
            } else {
              this.acEndTime = prizesData.data.activityEndTime;
              var timeDiff2 = parseInt(this.acEndTime - this.nowDate) + "";
              if (timeDiff2 > 0 && timeDiff2.length < 9) {
                //定时刷新判断活动时间是否结束
                var a = setInterval(() => {
                  //重新请求
                  location.reload();
                  clearInterval(a);
                }, timeDiff2);
              }
            }

            //自动刷新 到20号晚上8点
        // var time1 = this.nowDate
        var time2 = 1624190400000;
        var timeDiff = parseInt(time2 - this.nowTime111) + '';
        if (timeDiff.length >= 9) {
          var timeDiff1 = 24 * 60 * 60 * 1000;
        } else {
          var timeDiff1 = timeDiff;
        }
        if (timeDiff > 0) {
          //定时刷新判断签到时间是否结束
          var a = setInterval(() => {
            //重新请求
            this.initData();
            clearInterval(a);
          }, parseInt(timeDiff1));
        }


            this.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 class="scss" scoped="scoped">
.title {
  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 {
  overflow: visible !important;
  width: 2rem;
  height: 2.2rem;
}
.swiper-container .swiper-wrapper .swiper-slide {
  width: 3rem;
  border-radius: 0.2rem;
  background: #ffffff;
}
.swiper-container .swiper-wrapper .swiper-slide img {
  border-radius: 0.2rem;
  width: 2rem;
}
.swiper-container .swiper-wrapper .swiper-slide-prev {
  margin-top: 0.18rem;
  height: 2rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-prev img {
  height: 2rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-next {
  margin-top: 0.18rem;
  height: 2rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-next img {
  height: 2rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-active {
  width: 2rem;
  margin-right: 10px;
  margin-left: 10px;
}
/* .swiper-slide .swiper-slide-active{
  width: 100px ! important;
} */
</style>
