<template>
  <div
    :style="styleData.touboxfu"
    :class="notstarted ? 'notoubox' : 'toubox'"
    ref="dice"
    @click.stop="styleClick('click', 'dice')"
    @mousemove.stop="styleClick('mousemove', 'dice')"
    @mouseout.stop="styleClick('mouseout')"
  >
    <!-- 骰子图 -->
    <div :style="styleData.touzitu">
      <div class="dice-content" :class="endName"></div>
    </div>
    <!-- GO -->
    <div
      class="start-btn"
      :style="styleData.go"
      @click="guess"
      v-lz-click="'12'"
    ></div>
    <div class="fd-hand" v-if="styleData.hand"></div>
    <!-- 机会 -->
    <!-- <div class="draw-times" :style="styleData.jihui ">
                剩余{{keyData.jihui}}次机会
    </div>-->
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
import moveOpportunity from "../../../components/basisComponent/moveOpportunity/moveOpportunity";
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
  TaskPopComService,
  SharePopComService,
  ShopPopComService,
  FollowSkuPopComService,
} from "../../../util/comCreate.js";
import bus from "../../../util/bus.js";
let { drawPrize, followShop, startDraw } = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  components: {
    moveOpportunity,
  },
  data() {
    return {
      endName: "dice",
      readyName: "",
      touzi: "",
      restDrawCount: 0,
      speed: 1000,
      moveLi: 10,
      nowNum: 1,
      nowtime: 0,
      ourtime: 1000,
      lastClick: null,
      endLi: 1,
      dataListLength: 0,
      notstarted: false,
      prizeListData: [
        {
          position: 1,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 2,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 3,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 4,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 5,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 6,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 7,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 8,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
      ],
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      styleDataOld: {},
    };
  },
  created() {},
  mounted() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initDatas();
  },
  updated() {
    bus.$on("restDrawCount", (content) => {
      console.log(content, "1111111111");
      this.restDrawCount = content;
      //将剩余抽奖次数数据赋值
    });
  },
  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          styleDataOld: this.styleDataOld,
          c_this: this,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initDatas() {
      // if(document.getElementsByClassName('countDownDiv').length==1){
      //    this.notstarted = true
      // }
      // alert(document.getElementsByClassName('countDownDiv').length,"嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎")
      var ms = 2000;
      this.lastClick = Date.now() - ms;
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      } else {
        bus.$on("restDrawCount", (content) => {
          this.restDrawCount = content;
        });
        bus.$on("ourprizeList", (content) => {
          var prizelist = content;
          if (prizelist.length != 0) {
            prizelist.forEach((v) => {
              this.prizeListData.forEach((i, a) => {
                if (v.position == i.position) {
                  this.prizeListData[a] = v;
                }
              });
            });
          }
          console.log(this.prizeListData);
        });
        bus.$on("data", (content) => {
          this.dataListLength = content.taskList.length;
        });
      }
    },
    moveInit() {
      this.moveLi = 2;
      this.speed = 1000;
      this.ourtime = 1000;
      this.nowtime = 0;
    },
    movePlay(hope, tope) {
      console.log(hope, tope, "tope");
      this.ourtime = this.speed * this.moveLi + tope * this.speed;
      this.endName = `moving`;
      console.log(this.nowtime, this.ourtime);
      if (this.nowtime == this.ourtime) {
        console.log(this.nowtime, 222222222);
        if (hope == "未中奖") {
          this.nowtime = 0;
          this.endName = `end${this.endLi}`;
          setTimeout(() => {
            this.fulfillHandle("未中奖");
            this.endName = `dice`;
          }, 500);
        } else {
          this.nowtime = 0;
          this.endName = `end${this.endLi}`;
          setTimeout(() => {
            this.fulfillHandle(this.prizeListData[tope], hope);
            this.publicData.$emit(
              "isNotyFiceWinnerReorrd",
              true,
              this.isTemplate
            );
            this.endName = `dice`;
          }, 500);
        }
      } else {
        setTimeout(() => {
          this.movePlay(hope, tope);
        }, this.speed);
        this.nowtime += this.speed;
      }
    },
    fulfillHandle(prizeData, initDatas) {
      this.isStartPlay = false;
      var activityType = sessionStorage.getItem("activityType");
      this.isShowRotary = this.datas.isShowRotary == true ? true : false;
      console.log("self");
      if (prizeData == "未中奖") {
        NoPrizeResultPopComService.create(
          "非常遗憾，您与大奖擦肩而过~",
          "//img10.360buyimg.com/imgzone/jfs/t1/136745/32/20121/48059/5fd996feE56314a28/b952f0e6f3fe811f.png",
          (submit) => {
            NoPrizeResultPopComService.close();
          }
        );
      } else {
        //中奖
        this.prizeResultData.datas = prizeData;
        // 通知刷新奖品组件
        this.publicData.$emit('prizeInit',true);
        PrizeResultPopComService.create(
          this.prizeResultData,
          initDatas,
          (submit) => {
            PrizeResultPopComService.close();
          }
        );
      }
    },
    guess() {
      var ms = 2000;
      if (Date.now() - this.lastClick >= ms) {
        this.lastClick = Date.now();
      } else {
        return;
      }
      this.choujiang = true;
      console.log(this.restDrawCount, "00000");
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      if (this.nowtime != 0) {
        this.$toast("正在抽奖中，请勿重复点击");
      } else {
        if (this.restDrawCount <= 0) {
          if (this.dataListLength > 0) {
            this.$toast('您没有抽奖机会了，点击"做任务获取抽奖机会"吧');
          } else {
            this.$toast("您没有抽奖机会了");
          }
          return;
        }
        this.restDrawCount--;
        bus.$emit("restDrawCount", this.restDrawCount);
        this.moveInit();
        startDraw((initDatas) => {
          console.log("中奖信息", initDatas);
          if (initDatas.resp_code == 50009) {
            this.$toast("活动已结束");
            this.isStartPlay = false;
            return;
          }
          if (initDatas.resp_code != 0) {
            this.isStartPlay = false;
          }
          const self = this;
          console.log("initDatas.data", initDatas.data);
          if (initDatas.data) {
            // 奖品id没有匹配上的时候
            var noSelect = true;
            for (var i = 0; i < this.prizeListData.length; i++) {
              if (this.prizeListData[i].id == initDatas.data.prizeInfoId) {
                console.log(self.prizeListData);
                self.pIndex = i;
                console.log("中奖id", self.pIndex);
                this.prize = self.prizeListData[self.pIndex].position - 1;
                this.endLi = [2, 3, 4, 5, 6];
                var suka = Math.floor(Math.random() * this.endLi.length);
                console.log(this.endLi, suka, "endli");
                this.endLi = this.endLi[suka];
                console.log(
                  self.pIndex,
                  initDatas.data,
                  "self.pIndex, initDatas.data"
                );
                this.movePlay(initDatas.data, self.pIndex); //执行抽奖
                // 拿到相应的角度调旋转接口
                console.log("奖品id", self.pIndex);
                this.isStartPlay = false;
                noSelect = false;
                break;
              }
            }
            if (noSelect) {
              console.log("nonono");
              for (var i = 0; i < self.prizeListData.length; i++) {
                if (!self.prizeListData[i].prizeType) {
                  this.prize = self.prizeListData[i].position - 1;
                }
              }
              this.endLi = 1;
              this.movePlay("未中奖", this.endLi);

              this.isStartPlay = false;
            }
          } else {
            for (var i = 0; i < self.prizeListData.length; i++) {
              if (!self.prizeListData[i].prizeType) {
                this.prize = self.prizeListData[i].position - 1;
              }
            }
            this.endLi = 1;
            this.movePlay("未中奖", this.endLi);
          }
        });
      }
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      if (this.isPlaying) {
        return;
      }
      // 判断是否符合抽奖条件
      if (this.needFollow == 1) {
        followShop((initdatas) => {});
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.toubox {
  // background: powderblue;
  display: block;
  position: relative;
}
.notoubox {
  position: absolute;
  left: 2.25rem !important;
  top: 4.7rem !important;
}
.dice {
  // animation: wobbleDick 1.5s ease-in-out infinite alternate;
  animation: wobbleDick 1.5s ease-in-out infinite alternate;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/193178/39/25699/42404/62a7f8c8Ed5a7c4e6/fef8e218141bf75b.png);
  display: block;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 2.85rem;
  height: 2.95rem;
  margin: .71rem auto 0 auto;
  // background: pink;
}
.dice-content{
  margin-top: .71rem;
}
// .dice .dice-content {
//  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t16087/150/2019041475/15710/d0e41d0/5a78668bN0e57bfe6.png);
//   width: 2.8rem;
//   height: 2.8rem;
//   background-size: 100%;
//   background-repeat: no-repeat;
//   display: block;
//   animation: wobbleDick 1.5s ease-in-out infinite alternate;
// }
#appC .dice-content.moving {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t19129/231/426516753/70155/db5fd4f1/5a78668bNf4559ee7.png");
  -webkit-animation: movingDice 0.4s steps(4) infinite;
  animation: movingDice 0.4s steps(4) infinite;
  display: block;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 2.8rem;
  height: 2.8rem;
  margin: .71rem auto 0 auto;
}
#appC .dice-content.end1 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t16087/150/2019041475/15710/d0e41d0/5a78668bN0e57bfe6.png") !important;
  animation: tada 1s;
  display: block;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 2.8rem;
  height: 2.8rem;
  margin: .71rem auto 0 auto;
}

#appC .dice-content.end2 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t14356/354/2167565867/16607/3b661c1/5a78668cN960929f4.png") !important;
  animation: tada 1s;
  display: block;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 2.8rem;
  height: 2.8rem;
  margin: .71rem auto 0 auto;
}

#appC .dice-content.end3 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t16885/247/438272867/16179/c234d837/5a78668cNbcf5f26f.png") !important;
  animation: tada 1s;
  display: block;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 2.8rem;
  height: 2.8rem;
  margin:.71rem auto 0 auto;
}

#appC .dice-content.end4 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t16279/96/1916958641/16909/71ffcf55/5a78668cN1c12ed0f.png") !important;
  animation: tada 1s;
  display: block;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 2.8rem;
  height: 2.8rem;
  margin: .71rem auto 0 auto;
}

#appC .dice-content.end5 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t18631/179/462131108/17357/2cff87bc/5a78668cN12b03c68.png") !important;
  animation: tada 1s;
  display: block;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 2.8rem;
  height: 2.8rem;
  margin: .71rem auto 0 auto;
}

#appC .dice-content.end6 {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t18508/194/460327619/17294/4725ff16/5a78668cNc9ba88de.png") !important;
  animation: tada 1s;
  display: block;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 2.8rem;
  height: 2.8rem;
  margin: .71rem auto 0 auto;
}
@keyframes wobbleDick {
  0% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes movingDice {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}
.draw-times {
  color: rgb(255, 255, 255);
  font-size: 0.29rem;
  opacity: 1;
  width: 100%;
  text-align: center;
  // background: pink;
  height: 0.29rem;
  display: inline-block;
  line-height: 0.29rem;
}
.fd-hand{
  position: absolute;
  width: .85rem;
  height: .86rem;
  background: url('//img10.360buyimg.com/imgzone/jfs/t1/81203/39/19064/11028/62a7f635E99c3ab1e/44ab68839efe66e7.png') no-repeat;
  background-size: 100% 100%;
  bottom: -.35rem;
  left: 4.1rem;
}
</style>