<template>
  <div :style="styleData.goldEggBoxStyle">
    <div :style="styleData.topTitle"></div>
    <div :style="styleData.allGoldEgg">
      <div  :style="styleData.allGoldEggInner">
        <div :style="styleData.allGoldEggBox" v-for="(data,index) in prizeList" :key="index">
          <button :disabled="disabled" :style="styleData.goldEggStyle" @click="hitEgg(index)" ref="eggDom"></button>
        </div>
      </div>
      
      <div class="hammerStyle" :style="[styleData.hammerStyle , styleData.hammerAnimition]" ref="hammerDom"></div>
    </div>
  </div>
</template>
<script>
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
} from "../../../util/hdzxtcomCreate.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,
      disabled:false,
    };
  },
  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.disabled){
        this.$toast("正在抽奖中，请勿重复点击");
        
        return;
      }
      if(this.restDrawCount == 0){
        this.$toast('您没有抽奖机会了，点击"做任务获取抽奖机会"吧');
        return;
      }else{
        this.restDrawCount--
        bus.$emit("restDrawCount", this.restDrawCount);
      }
      this.disabled = true
      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 - 35) + egg.parentNode.offsetWidth * index}px`
        hammer.style.top = `${egg.offsetHeight / 2}px`
      }else if(index >= 3){
        hammer.style.left = `${(egg.offsetWidth - 35) + egg.parentNode.offsetWidth * (index - 3)}px`
        hammer.style.top = `${egg.parentNode.offsetHeight + egg.offsetHeight /2}px`
      }
      hammer.style.animation = "hitHammer-data-v-9d8eaf12 .4s linear infinite alternate"
      setTimeout(()=>{
        egg.style.background = 'url(https://img10.360buyimg.com/imgzone/jfs/t1/77741/31/19522/62623/62aae811E0cad4d87/4ef872dd2e66b6dd.png) no-repeat'
        egg.style.width = '2.53rem'
        egg.style.marginLeft = '-.24rem'
        egg.style.marginRight = '.1rem'
        egg.style.backgroundSize = 'cover'
      },2000)
      if (prize == "未中奖") {
        //判定是否中奖
        setTimeout(() => {
          NoPrizeResultPopComService.create(
          this.styleData,
          (submit) => {
            this.drawTime = 0
            this.disabled = false
            NoPrizeResultPopComService.close();
            hammer.style.animation = "hammer-data-v-9d8eaf12 .6s linear infinite alternate"
             hammer.style.left = '1.7rem'
            hammer.style.top = '.56rem'
            egg.style.background = 'url(//img10.360buyimg.com/imgzone/jfs/t1/201752/1/23862/149477/62aa98e5E5a887e1e/493468930d87ce74.png) no-repeat'
            egg.style.width = '2.38rem'
            egg.style.marginLeft = '0'
            egg.style.marginRight = '0'
            egg.style.backgroundSize = 'cover'
          }
        );}, 3000);
      } else {
        console.log(prize)
        setTimeout(() => {
          this.publicData.$emit("prizeInit",true);
          this.publicData.$emit("isNotyFiceWinnerReorrd",true,this.isTemplate);
          this.prizeResultData.datas = prize
          PrizeResultPopComService.create(
          this.prizeResultData,
          prize,
          this.styleData,
          (submit) => {
            this.drawTime = 0
             this.disabled = false
            PrizeResultPopComService.close();
            hammer.style.animation = "hammer-data-v-9d8eaf12 .6s linear infinite alternate"
            hammer.style.left = '1.7rem'
            hammer.style.top = '.56rem'
            egg.style.background = 'url(//img10.360buyimg.com/imgzone/jfs/t1/201752/1/23862/149477/62aa98e5E5a887e1e/493468930d87ce74.png) no-repeat'
            egg.style.width = '2.38rem'
            egg.style.marginLeft = '0'
            egg.style.marginRight = '0'
            egg.style.backgroundSize = 'cover'
          }
        );

        }, 3000);
      }
    },
  },
};
</script>
<style scoped>
.hammerStyle{
    color: #000;
}
@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(25deg);
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(-25deg);
  }
}
</style>