<template>
  <div :style="styleData.machineStyle" v-if="showlist != ''"  ref="loveToken"
      @click.stop="styleClick('click', 'loveToken')"
      @mousemove.stop="styleClick('mousemove', 'loveToken')"
      @mouseout.stop="styleClick('mouseout')">
      <div :style="styleData.machineInner" class="machineInner">
         <div
      class="machineButton"
      :style="styleData.machineButton"
      @click="machineButtonClick"
     
    ></div>
    <div class="van-overlay" v-show="showAlert" style="z-index: 2006">
      <div
        class="van-popup van-popup--center van-popup--safe-area-inset-bottom"
        style="background-color: transparent; z-index: 2007"
      >
        <div class="team-detail-dialog">
          <img
            class="loveTokenImg"
            src="https://img10.360buyimg.com/imgzone/jfs/t1/177542/35/23216/211044/624e81bfE13249c69/8535adef586d28df.png"
            alt=""
          />
        </div>
      </div>
    </div>

      </div>
   
  </div>
</template>
<script>
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
} from "../../../util/hdzxtcomCreate.js";
import bus from "../../../util/bus.js";
import apis from "../../..//util/apis1.js";
import { Toast } from "vant";
let { drawPrize, startDraw } = apis;
export default {
  props: [
    "styleData",
    "keyData",
    "datas",
    "isTemplate",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      showAlert: false,
      restDrawCount: 0,
      styleDataOld: {},
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      ourDomHeight: 0,
      noSelectList: [],
      showlist: "1",
    };
  },
  created() {},
  mounted() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initDatas();
  },
  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(this.isWebClick){
        return
      }
      if (this.isTemplate == true) {
        Toast("活动预览，仅供查看");
        var datasAll = this.templateData;
        if (datasAll) {
          this.showlist = datasAll.draw.prizeList;
        } else {
          this.showlist = "1";
        }
      } else {
        // let actStatus = sessionStorage.getItem("actStatus");
        // if (actStatus == 2) {
        //   this.$toast("活动已结束");
        //   return;
        // }
        // if (actStatus == 1) {
        //   this.$toast("活动未开始");
        //   return;
        // }
        bus.$on("restDrawCount", (content) => {
          this.restDrawCount = content;
        });
        bus.$on("ourprizeList", (content) => {
          console.log(content, "console.log(content)");
          this.showlist = content;
        });
        console.log(this.noSelectList);
      }
    },
    machineButtonClick() {
      if (this.isTemplate) {
        if(!this.isWebClick) {
          this.$toast("活动预览，仅供查看");
        }
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      console.log(actStatus, 1111111111);
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }

      if (this.restDrawCount == 0) {
        this.$toast("您没有抽奖机会了，点击“更多机会”获取机会吧");
        return;
      } else {
        this.restDrawCount--;
        this.startMove();
      }
    },
    startMove() {
      //调用抽奖接口
      this.showAlert = true;
      bus.$emit("restDrawCount", this.restDrawCount);
      let that = this;
      setTimeout(function () {
        startDraw((initDatas) => {
          console.log("中奖信息", initDatas);
          if (initDatas.resp_code == 50009) {
            that.$toast("活动已结束");
            that.showAlert = false;
            return;
          } else if (initDatas.resp_code != 0) {
            that.showAlert = false;
          } else {
            if (initDatas.data == "") {
              that.fulfillHandle("未中奖", initDatas.data);
            } else {
              that.fulfillHandle("已中奖", initDatas.data);
            }
          }
          console.log("initDatas.data", initDatas.data);
        });
      }, 3000); //参数是函数名
    },
    fulfillHandle(prizeData, initDatas) {
      console.log(prizeData, initDatas);
      this.showAlert = false;
      var activityType = sessionStorage.getItem("activityType");
      if (prizeData == "未中奖") {
        NoPrizeResultPopComService.create(
         this.styleData,
          (submit) => {
            NoPrizeResultPopComService.close();
          }
        );
      } else {
        //中奖
        console.log(initDatas);
        let prizeData;
        for (let i = 0; i < this.showlist.length; i++) {
          if (initDatas.prizeInfoId == this.showlist[i].id) {
            prizeData = this.showlist[i];
          }
        }
        console.log(prizeData);
        this.publicData.$emit("isNotyFiceWinnerReorrd", true, this.isTemplate);
        this.prizeResultData.datas = prizeData;
        bus.$emit('data',{})
        PrizeResultPopComService.create(
          this.prizeResultData,
          initDatas,
          this.styleData,
          (submit) => {
            PrizeResultPopComService.close();
          }
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.machineInner{
      padding-top: 3.05rem;
      width: 100%;
      height: 100%;
      position: relative;
}
.machineList {
  flex: 1;
  width: 100%;
  height: 800%;
  margin: 0 0.015rem;
  background: #fff;
  color: #000;
  transition: 0.1s all;
}
.machineListBox {
  width: 1.6rem;
  height: 3.05rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.24rem;
}
.machineButton {
  width: 2.85rem;
  height: 1.98rem;
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 0.42rem auto 0;
}
.van-popup {
  width: 100%;
  height: 100%;
}
.team-detail-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.loveTokenImg {
  width: 4.11rem;
  height: 4.67rem;
  transform-origin: 50% 100%;
  transition: all 0.1s;
  animation: zy 2.5s 0.15s linear infinite;
  animation: zy 2.5s 0.15s linear infinite;
  animation: zy 2.5s 0.15s linear infinite;
  animation: zy 2.5s 0.15s linear infinite;
}

@-webkit-keyframes zy {
  10% {
    transform: rotate(25deg);
  }
  20% {
    transform: rotate(-25deg);
  }
  30% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-15deg);
  }
  50%,
  100% {
    transform: rotate(0deg);
  }
}
</style>