<template>
  <div>
      <div :style="styleData.topTitle"></div>
    <div :style="styleData.halfPassStyle">
      <div v-for="(item,index) in prizeList" :key="index" :style="styleData.cardStyle" @click="halfPassCard(index)" ref="BenZ">
        <div :style="styleData.cardShadow" v-if="shadowNum != index"></div>
      </div>
    </div>
    <div :style="styleData.allShadow" v-if="shadowShow"></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",
        },
      },
      shadowNum: 0,
      timeBoom: null,
      shadowShow: false,
      drawTime: false,
      restDrawCount:0
    };
  },
  created() {
    this.initdata();
  },
  methods: {
    initdata() {
      if (this.isTemplate) {
        var datasAll = this.templateData;
        if (datasAll) {
        }
        this.shadowCard();
        return;
      }
      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;
              }
            });
          });
        }
      });
      this.shadowCard();
    },
    halfPassCard(index) {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      if (this.drawTime) {
        this.$toast("正在抽奖中，请勿重复点击");
        return;
      }
      this.drawTime = true
      if (this.restDrawCount == 0) {
         this.drawTime = false
        this.$toast('您没有抽奖机会了，点击"做任务获取抽奖机会"吧');
        return;
      } else {
        this.restDrawCount--;
        bus.$emit("restDrawCount", this.restDrawCount);
      }
      clearInterval(this.timeBoom);
      this.shadowNum = index;
      var audi = this.$refs.BenZ[index];
      var bmw = document.documentElement.clientWidth;
      var man = document.documentElement.clientHeight;
      var windowTop = document.documentElement.scrollTop;
      var audiTop = audi.getBoundingClientRect().top;
      var audiLeft = audi.getBoundingClientRect().left;
      audi.style.zIndex = "101";
      startDraw((initDatas) => {
        audi.style.transition = "1s all";
        audi.style.transform = `translate3d(${bmw / 2 - (audiLeft + audi.offsetWidth / 2)}px , ${man / 2 - (audiTop + audi.offsetHeight / 2)}px , 300px) scale(1.5)`;
        setTimeout(() => {
          audi.style.transform = `translate3d(${bmw / 2 - (audiLeft + audi.offsetWidth / 2)}px , ${man / 2 - (audiTop + audi.offsetHeight / 2)}px , 300px) rotate3d(0,.5,0,90deg) scale(1.5)`;
        }, 1500);
        console.log("中奖信息", initDatas);
        if (initDatas.resp_code == 50009) {
          this.$toast("活动已结束");
          return;
        }
        if (initDatas.resp_code != 0) {
        }
        if (initDatas.data) {
          this.startRoll(initDatas.data, index, audi);
        } else {
          this.startRoll("未中奖", index, audi);
        }
      });
      this.shadowShow = true;
    },
    shadowCard() {
      this.timeBoom = setInterval(() => {
        this.shadowNum++;
        if (this.shadowNum >= 6) {
          this.shadowNum = 0;
        }
      }, 1000);
    },
    startRoll(prize, index, audi) {
      if (prize == "未中奖") {
        //判定是否中奖
        setTimeout(() => {
          this.shadowShow = false;
          audi.style.transition = "none";
          audi.style.zIndex = "1";
          NoPrizeResultPopComService.create(
           this.styleData,
            (submit) => {
              this.drawTime = false;
              NoPrizeResultPopComService.close();
              audi.style.transform = "none";
              this.shadowCard();
            }
          );
        }, 2300);
      } else {
        setTimeout(() => {
          this.publicData.$emit(
            "isNotyFiceWinnerReorrd",
            true,
            this.isTemplate
          );
          this.prizeResultData.datas = prize;
          this.shadowShow = false;
          audi.style.transition = "none";
          audi.style.zIndex = "1";
          PrizeResultPopComService.create(
            this.prizeResultData,
            prize,
            this.styleData,
            (submit) => {
               this.drawTime = false;
              PrizeResultPopComService.close();
              audi.style.transform = "none";
              this.shadowCard();
            }
          );
        }, 2300);
      }
    },
  },
};
</script>
<style scoped>
.s{
  transform: scale3d();
}
</style>