<template name="everyDayPresent">
  <div :style="styleData.prerentBox" ref="everyDayPresent"
    @click="styleClick('click', 'everyDayPresent')"
    @mousemove="styleClick('mousemove', 'everyDayPresent')"
    @mouseout="styleClick('mouseout')">
    <div :style="styleData.fTac">
      <div :style="[styleData.fIb,styleData.drawName,styleData.animated,styleData.fideInUp]"></div>
    </div>
    <div :style="[styleData.fTac,styleData.timePeriod,styleData.animated,styleData.fideInUp]">
      活动时间：{{ activityStartTime }}-{{ activityEndTime }}
    </div>

    <div :style="[styleData.animated,styleData.fideInUp]">
      <div :style="styleData.downTime" v-if="!isShow && isShowTime">
        <van-count-down :time="robTime - new Date().getTime()">
          <template #default="timeData">
              <span :style="styleData.drawClock"></span>
            <span :style="styleData.spanStyle">距开抢：</span>
            <span :style="[styleData.spanStyle,styleData.block]">{{
              timeData.hours >= 10 ? (timeData.hours+"").substring(0,1) : "0"
            }}</span>
            <span :style="[styleData.spanStyle,styleData.block]">{{
              timeData.hours >= 10 ? (timeData.hours+"").substring(1,2) : timeData.hours
            }}</span>
            <span :style="styleData.spanStyle">时</span>
            <span :style="[styleData.spanStyle,styleData.block]">{{
              timeData.minutes >= 10 ? (timeData.minutes+"").substring(0,1)  : "0"
            }}</span>
            <span :style="[styleData.spanStyle,styleData.block]">{{
              timeData.minutes >= 10 ? (timeData.minutes+"").substring(1,2)  : timeData.minutes
            }}</span>
            <span :style="styleData.spanStyle">分</span>
            <span :style="[styleData.spanStyle,styleData.block]">{{
              timeData.seconds >= 10 ? (timeData.seconds+"").substring(0,1)  : "0" 
            }}</span>
            <span :style="[styleData.spanStyle,styleData.block]">{{
              timeData.seconds >= 10 ? (timeData.seconds+"").substring(1,2)  : timeData.seconds
            }}</span>
            <span :style="styleData.spanStyle">秒</span>
          </template>
        </van-count-down>
      </div>
      <div v-if="isShow">
        已有 <span :style="styleData.yesUserNum"></span>{{ winPrize }} 位用户抢到礼品
      </div>
    </div>
    <div :style="[styleData.fTac , styleData.prizeContainer]">
      <div :style="[styleData.drawPrize,styleData.drawPrizeShiwu,styleData.fadeInUp,styleData.animated]">
        <img :src="showImg" :style="styleData.showImg" />
      </div>
    </div>
    <div :style="[styleData.fTac , styleData.prizeValue]">
      <span :style="styleData.shopName">{{ shopName }}</span>
    </div>
    <div :style="styleData.fTac" v-if="!isShow">
      <a v-if="isWebClick" :style="[styleData.fIb , styleData.attrBtn, styleData.animated, styleData.tada]">先进店逛逛</a>
      <a v-else :style="[styleData.fIb , styleData.attrBtn, styleData.animated, styleData.tada]" v-lz-click="'4'" @click="enterstore">先进店逛逛</a>
    </div>
    <div :style="styleData.fTac" v-if="isShow && isShowTa">
      <span :style="styleData.yesUserNum">今日奖品已抢完，明日{{ hour }}:{{ minutes }}继续开抢</span>
      <a :style="[styleData.fIb , styleData.attrBtn, styleData.animated, styleData.tada]" v-lz-click="'4'" @click="enterstore"
        >先进店逛逛</a
      >
    </div>
    <div :style="styleData.fTac" v-if="isShow && !isShowTa">
      <a :style="[styleData.fIb , styleData.attrBtn, styleData.animated, styleData.tada]" v-lz-click="'12'" @click="startGive">{{contnet}}</a>
    </div>
  </div>
</template>
<script>
import { Toast, CountDown } from "vant";
import dateUtil from "../../../util/dateUtil.js";
import apis1 from "../../../util/apis1.js";
let { drawPrize, dailyGiftRequest, getWinnerData, grabNow, followShop } = apis1;
import store from "../../../store/store";
import { goToShopPage } from "../../../util/tools.js";
import countDown from "../../basisComponent/countdown/countdown.vue"; //倒计时
import { PrizeResultPopComService } from "../../../util/comCreate.js";
export default {
  props: ["isTemplate", "datas", "keyData", "styleData", "templateData","isWebClick", "modifyContent"],
  components: {
    countDown,
  },
  data() {
    return {
      styleDataOld:{},
      isCustomSwitching:"", //有tab切换时
      isShow: false,
      isShowTa: false,
      isShowTime: true,
      activityStartTime: "",
      activityEndTime: "",
      shopName: "",
      prizeListData: [],
      showImg:
        "https://img10.360buyimg.com/imgzone/jfs/t14494/298/2173199374/72835/f5e23f35/5a715f68N4b55cc32.png",
      winPrize: "0",
      robTime: null,
      hour: "0",
      minutes: "0",
      status: "1",
      contnet: "立即开抢",
      followShow: false,
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
    };
  },
  watch: {
    datas() {
      this.initData();
    },
  },
  created() {
    this.initData();
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
  },
  methods: {
      //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          isCustomSwitching: this.isCustomSwitching, //有tab切换时
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    async initData() {
      if (this.isTemplate) {
        var datasAll = this.templateData;
        this.isShowTime = false;
        if (datasAll) {
          var prizeList = datasAll.dailyPrize.draw.prizeList;
          if (prizeList.length > 0) {
            this.shopName = prizeList[0].prizeName;
            this.showImg = prizeList[0].showImg;
            // if (prizeList[0].prizeType == 1) {
            //   this.showImg =
            //     "https://img10.360buyimg.com/imgzone/jfs/t15022/42/1929662629/70086/9092ed2/5a715f68Nb891fb36.png";
            // } else if (prizeList[0].prizeType == 4) {
            //   this.showImg =
            //     "https://img10.360buyimg.com/imgzone/jfs/t17743/240/378042394/60905/5242d72e/5a715f68N467a89eb.png";
            // } else if (prizeList[0].prizeType == 2) {
            //   this.showImg =
            //     "https://img10.360buyimg.com/imgzone/jfs/t14488/314/2148931122/26515/4f9bc7d9/5a715f68Nd878eb7d.png";
            // } else {
            //   this.showImg =
            //     "https://img10.360buyimg.com/imgzone/jfs/t14494/298/2173199374/72835/f5e23f35/5a715f68N4b55cc32.png";
            // }
          }

          //时间转换
          var data = dateUtil.dateChangeYYYY(
            new Date(datasAll.activity.endTime),
            3
          );
          this.activityEndTime =
            data.year + "年" + data.month + "月" + data.day + "日";
          var data = dateUtil.dateChangeYYYY(
            new Date(datasAll.activity.startTime),
            3
          );
          this.activityStartTime =
            data.year + "年" + data.month + "月" + data.day + "日";

          let hour = datasAll.dailyPrize.hours;
          let min = datasAll.dailyPrize.minutes;
          // if (parseInt(datasAll.dailyPrize.hours) < 10) {
          //   hour = "0" + datasAll.dailyPrize.hours;
          // }
          // if (parseInt(datasAll.dailyPrize.minutes) < 10) {
          //   min = "0" + datasAll.dailyPrize.minutes + "";
          // }
          this.hour = hour;
          this.minutes = min;
          var nowDate = dateUtil.dateChangeYYYY(new Date().getTime(), 1);
          let times =
            nowDate.substring(0, 4) +
            "-" +
            nowDate.substring(5, 7) +
            "-" +
            nowDate.substring(8, 10) +
            " " +
            hour +
            ":" +
            min +
            ":00.0";
          var date = times.substring(0, 19);
          console.log(date + "ssss");
          date = date.replace(/-/g, "/");
          this.robTime = new Date(date).getTime();
          if (this.robTime - new Date().getTime() <= 0) {
            this.isShow = true;
          } else {
            this.isShow = false;
          }
          console.log(datasAll.dailyPrize.status + "mainDatas.data.status");
          if (datasAll.dailyPrize.isFollow == 1) {
            this.contnet = "关注店铺 立即开抢";
          }

          let actStatus = sessionStorage.getItem("actStatus");
          // 活动已结束
          if (actStatus == 2) {
            this.isShowTime = false;
            this.isShow = false;
            return;
          }
          // 活动未开始
          if (actStatus == 1) {
            this.isShowTime = false;
            this.isShow = false;
            return;
          }
          var timeDiff = parseInt(this.robTime - new Date().getTime()) + "";
          if (timeDiff > 0) {
            //定时刷新判断抢好礼时间是否开始
            var a = setInterval(() => {
              //重新请求
              this.initData();
              clearInterval(a);
            }, parseInt(timeDiff));
          }
        } else {
          //时间转换
          var data = dateUtil.dateChangeYYYY(new Date().getTime(), 3);
          this.activityEndTime =
            data.year + "年" + data.month + "月" + data.day + "日";
          var data = dateUtil.dateChangeYYYY(new Date().getTime(), 3);
          this.activityStartTime =
            data.year + "年" + data.month + "月" + data.day + "日";

          let hour = 10;
          let min = 30;
          // if (parseInt(datasAll.dailyPrize.hours) < 10) {
          //   hour = "0" + datasAll.dailyPrize.hours;
          // }
          // if (parseInt(datasAll.dailyPrize.minutes) < 10) {
          //   min = "0" + datasAll.dailyPrize.minutes + "";
          // }
          this.hour = hour;
          this.minutes = min;
          var nowDate = dateUtil.dateChangeYYYY(new Date().getTime(), 1);
          let times =
            nowDate.substring(0, 4) +
            "-" +
            nowDate.substring(5, 7) +
            "-" +
            nowDate.substring(8, 10) +
            " " +
            hour +
            ":" +
            min +
            ":00.0";
          var date = times.substring(0, 19);
          console.log(date + "ssss");
          date = date.replace(/-/g, "/");
          this.robTime = new Date(date).getTime();
          this.showImg =
            "//img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png";
        }
        for (var i = 0; i < this.prizeListData.length; i++) {
          this.prizeListData[i].angle = 0;
        }
        this.$set(this.prizeListData);
        if(this.isWebClick){
          this.isShow = false;
          this.isShowTime = true;
          this.shopName = "京豆"
    }
      } else {
        await dailyGiftRequest((mainDatas) => {
          this.count = mainDatas.data.count;
          if (mainDatas.data.isFollow == 1) {
            this.contnet = "关注店铺 立即开抢";
            this.followShow = true;
          }
          console.log(mainDatas.data);
          //时间转换
          var data = dateUtil.dateChangeYYYY(mainDatas.data.activityEndTime, 3);
          this.activityEndTime =
            data.year + "年" + data.month + "月" + data.day + "日";
          var data = dateUtil.dateChangeYYYY(
            mainDatas.data.activityStartTime,
            3
          );
          this.activityStartTime =
            data.year + "年" + data.month + "月" + data.day + "日";
          let hour = mainDatas.data.hours;
          let min = mainDatas.data.minutes;
          if (parseInt(mainDatas.data.hours) < 10) {
            hour = "0" + mainDatas.data.hours;
          }
          if (parseInt(mainDatas.data.minutes) < 10) {
            min = "0" + mainDatas.data.minutes + "";
          }
          this.hour = hour;
          this.minutes = min;
          var nowDate = dateUtil.dateChangeYYYY(new Date().getTime(), 1);
          let times =
            nowDate.substring(0, 4) +
            "-" +
            nowDate.substring(5, 7) +
            "-" +
            nowDate.substring(8, 10) +
            " " +
            hour +
            ":" +
            min +
            ":00.0";
          var date = times.substring(0, 19);
          console.log(date + "ssss");
          date = date.replace(/-/g, "/");
          this.robTime = new Date(date).getTime();
          if (this.robTime - new Date().getTime() <= 0) {
            this.isShow = true;
          } else {
            this.isShow = false;
          }
          console.log(mainDatas.data.status + "mainDatas.data.status");
          if (mainDatas.data.status != "0") {
            this.isShowTa = true;
          }
          let actStatus = sessionStorage.getItem("actStatus");
          // 活动已结束
          if (actStatus == 2) {
            this.isShowTime = false;
            this.isShow = false;
            return;
          }
          // 活动未开始
          if (actStatus == 1) {
            this.isShowTime = false;
            this.isShow = false;
            return;
          }
          var timeDiff = parseInt(this.robTime - new Date().getTime()) + "";
          if (timeDiff > 0) {
            //定时刷新判断抢好礼时间是否开始
            var a = setInterval(() => {
              //重新请求
              this.initData();
              clearInterval(a);
            }, parseInt(timeDiff));
          }
        });
        //请求接口
        drawPrize((initdatas) => {
          console.log("jinlai", initdatas);
          let prizeList = initdatas.data.prizeInfo;
          this.restDrawCount = initdatas.data.drawNumber;
          if (prizeList.length > 0) {
            this.prizeListData = initdatas.data;
            console.log("wew", prizeList);
            this.shopName = prizeList[0].prizeName;
            this.showImg = prizeList[0].showImg;
            // if (prizeList[0].prizeType == 1) {
            //   this.showImg =
            //     "https://img10.360buyimg.com/imgzone/jfs/t15022/42/1929662629/70086/9092ed2/5a715f68Nb891fb36.png";
            // } else if (prizeList[0].prizeType == 4) {
            //   this.showImg =
            //     "https://img10.360buyimg.com/imgzone/jfs/t17743/240/378042394/60905/5242d72e/5a715f68N467a89eb.png";
            // } else if (prizeList[0].prizeType == 2) {
            //   this.showImg =
            //     "https://img10.360buyimg.com/imgzone/jfs/t14488/314/2148931122/26515/4f9bc7d9/5a715f68Nd878eb7d.png";
            // } else {
            //   this.showImg =
            //     "https://img10.360buyimg.com/imgzone/jfs/t14494/298/2173199374/72835/f5e23f35/5a715f68N4b55cc32.png";
            // }
          }
          // this.$set(this.prizeListData);
        });
        // 获取获奖用户数
        getWinnerData((initDtasAll) => {
          let winRcordListData = initDtasAll.data;
          if (winRcordListData) {
            this.winPrize = winRcordListData.length;
          }
        });
      }
    },

    startGive() {
      const self = this;
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }

      // 立即开枪
      grabNow((initDtasAll) => {
        if (initDtasAll.resp_code == 50009) {
          this.$toast("活动已结束");
          this.isStartPlay = false;
          return;
        }
        let status = initDtasAll.data;
        // 关注店铺
        if (this.followShow) {
          followShop((initdatas) => {});
        }
        if (initDtasAll.data) {
          this.fulfillHandle(self.prizeListData.prizeInfo[0], initDtasAll.data);
          (this.isShowTa = true), this.initData();
        } else {
          this.$toast("奖品已经抢光啦");
          this.isShowTa = true;
        }
        console.log(status + "status");
      });
    },

    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      this.prizeResultData.datas = prizeData;
      console.log(this.prizeResultData.datas + "this.prizeResultData.datas");
      PrizeResultPopComService.create(
        this.prizeResultData,
        initDatas,
        (submit) => {
          PrizeResultPopComService.close();
        }
      );
    },

    enterstore() {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      document.querySelector("body").removeAttribute("style");
      console.log("进入商店");
      let shopId = store.state.shopId;
      goToShopPage(shopId);
    },
  },
};
</script>
<style lang="scss" scoped>
.timePeriod {
  margin-top: -0.1rem;
  margin-bottom: 0.2rem;
  font-size: 0.18rem;
  color: #fff;
}
.animated {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.f-tac {
  text-align: center;
}
.draw-info {
  margin-top: 0.6rem;
  margin-bottom: 0.3rem;
  color: #333;
  text-align: center;
  font-size: 0.36rem;
}
.downTime {
  height: 0.5rem;
  font-size: 0.3rem;
  color: #c03810;
  span {
    color: #c03810;
    font-size: 0.24rem;
  }
  .block {
    display: inline-block;
    color: #ffda44;
    width: .35rem;
    height: 0.53rem;
    background: #f23c3c;
    line-height: 0.4rem;
    font-size: 0.33rem;
    font-weight: 500;
  }
}
.animated {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.yesUserNum {
  color: #fc3c2c;
}
.draw-prize-shiwu {
  background-size: 100%;
  background-repeat: no-repeat;
  height: 1rem;
}
.draw-prize {
  width: 5.26rem;
  height: 2rem;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}
.attr-btn {
  position: relative;
  overflow: hidden;
  width: 5.27rem;
  height: 1rem;
  line-height: 0.9rem;
  margin-top: 0.2rem;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t16420/266/2010730322/7156/d0ff59e5/5a715f67Nc524fb80.png);
  background-size: 100%;
  background-repeat: no-repeat;
  font-size: 0.42rem;
  color: #fff;
}
.f-ib {
  display: inline-block;
  vertical-align: middle;
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
.animated {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.prizeIcon {
  width: 1.7rem;
  height: 1.7rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 7.3rem;
}
.draw-clock{
  width: .23rem;
    height: .24rem;
    display: inline-block;
    vertical-align: middle;
    background-image: url(https://img10.360buyimg.com/imgzone/jfs/t17737/235/406285901/1631/f6dc5fc2/5a715f67N5c3570d7.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
</style>