<template>
  <div :style="styleData.goldEggBoxStyle">
    <div :style="styleData.allGoldEgg">
      <div :style="styleData.allGoldEggBox" v-for="(data,index) in prizeList">
        <div :style="styleData.goldEggStyle" @click="hitEgg(index)" ref="eggDom"></div>
      </div>
    </div>
    <div :style="[styleData.hammerStyle , styleData.hammerAnimition]" ref="hammerDom"></div>
  </div>
</template>
<script>
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
} from "../../../util/comCreate.js";
import bus from "../../../util/bus.js";
import apis1 from "../../../util/apis1.js";
import { Toast } from "vant";
let { startDraw } = apis1;
export default {
  props: ["isTemplate", "datas", "styleData", "keyData", "templateData"],
  data() {
    return {
      prizeList: [
        {
          id: 1,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          id: 2,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          id: 3,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          id: 4,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          id: 5,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          id: 6,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
      ],
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      restDrawCount:0,
      drawTime:0,
    };
  },
  created(){
    this.initdata()
  },
  methods:{
    initdata(){
      if (this.isTemplate == true) {
      } else {
        bus.$on("restDrawCount", (content) => {
          this.restDrawCount = content;
        });
        bus.$on("ourprizeList", (content) => {
          if (content.length != 0) {
            content.forEach((v) => {
              this.prizeList.forEach((i, a) => {
                if (v.position == i.id) {
                  this.prizeList[a] = v;
                }
              });
            });
          }
          console.log(this.prizeList , '哈啊啊啊啊')
        });
      }
    },
    hitEgg(index){
      if(this.isTemplate){
        this.$toast("活动预览，仅供查看")
        return
      }
      if(this.drawTime != 0){
        this.$toast("正在抽奖中，请勿重复点击");
        return;
      }
      if(this.restDrawCount == 0){
        this.$toast('您没有抽奖机会了，点击"获得更多抽奖机会"吧');
        return;
      }else{
        this.restDrawCount--
        bus.$emit("restDrawCount", this.restDrawCount);
      }
      startDraw((initDatas) => {
        console.log("中奖信息", initDatas);
        if (initDatas.resp_code == 50009) {
          this.$toast("活动已结束");
          return;
        }
        if (initDatas.resp_code != 0) {

        }
        console.log("initDatas.data", initDatas.data);
        if(initDatas.data){
          this.startRoll(initDatas.data,index)
        }else{
          this.startRoll('未中奖',index)
        }
      });
    },
    startRoll(prize,index){
      this.drawTime++
      var hammer = this.$refs.hammerDom
      var egg = this.$refs.eggDom[index]
      var eggBox = egg.parentNode
      if(index < 3){
        hammer.style.left = `${(egg.offsetWidth - 10) + egg.parentNode.offsetWidth * index}px`
        hammer.style.top = `${-egg.offsetHeight / 1.8}px`
      }else if(index >= 3){
        hammer.style.left = `${(egg.offsetWidth - 10) + egg.parentNode.offsetWidth * (index - 3)}px`
        hammer.style.top = `${egg.parentNode.offsetHeight - egg.offsetHeight / 1.8}px`
      }
      hammer.style.animation = "hitHammer-data-v-62c8bace .4s linear infinite alternate"
      setTimeout(()=>{
        egg.style.background = 'url(https://img10.360buyimg.com/imgzone/jfs/t1/159126/31/15188/31552/605b001eEd24d6904/bae26ffcd0f5b823.png) no-repeat'
        egg.style.width = '2.38rem'
        egg.style.marginTop = '.55rem'
        egg.style.backgroundSize = '100%'
      },2000)
      if (prize == "未中奖") {
        //判定是否中奖
        setTimeout(() => {
          NoPrizeResultPopComService.create(
          "非常遗憾，您与大奖擦肩而过~",
          "//img10.360buyimg.com/imgzone/jfs/t1/136745/32/20121/48059/5fd996feE56314a28/b952f0e6f3fe811f.png",
          (submit) => {
            this.drawTime = 0
            NoPrizeResultPopComService.close();
            hammer.style.animation = "hammer-data-v-62c8bace .6s linear infinite alternate"
            hammer.style.left = `${(this.$refs.eggDom[0].offsetWidth - 10)}px`
            hammer.style.top = `${-this.$refs.eggDom[0].offsetHeight / 1.8}px`
            egg.style.background = 'url(//img10.360buyimg.com/imgzone/jfs/t1/172082/6/181/24036/605b001eEa4f2607c/a61ca29fbada875f.png) no-repeat'
            egg.style.width = '1.44rem'
            egg.style.marginTop = '0'
            egg.style.backgroundSize = '100%'
          }
        );}, 3000);
      } else {
        console.log(prize)
        setTimeout(() => {
          this.publicData.$emit("isNotyFiceWinnerReorrd",true,this.isTemplate);
          this.prizeResultData.datas = prize
          PrizeResultPopComService.create(
          this.prizeResultData,
          prize,
          (submit) => {
            this.drawTime = 0
            PrizeResultPopComService.close();
            hammer.style.animation = "hammer-data-v-62c8bace .6s linear infinite alternate"
            hammer.style.left = `${(this.$refs.eggDom[0].offsetWidth - 10)}px`
            hammer.style.top = `${-this.$refs.eggDom[0].offsetHeight / 1.8}px`
            egg.style.background = 'url(//img10.360buyimg.com/imgzone/jfs/t1/172082/6/181/24036/605b001eEa4f2607c/a61ca29fbada875f.png) no-repeat'
            egg.style.width = '1.44rem'
            egg.style.marginTop = '0'
            egg.style.backgroundSize = '100%'
          }
        );
        }, 3000);
      }
    },
  },
};
</script>
<style scoped>
@keyframes hammer {
  0% {
    transform-origin: right bottom;
    transform: rotate(0deg);
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(-15deg);
  }
}
@keyframes hitHammer{
  0% {
    transform-origin: right bottom;
    transform: rotate(15deg);
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(-15deg);
  }
}
</style>