<template>
  <div style="height: 7.36rem;position: relative;margin-top: 0.24rem;" :style="styleData.machineBox">
    <div
      :style="styleData.machineStyle"
      v-if="showlist != ''"
      ref="lotteryDrawMachine"
      @click="styleClick('click', 'lotteryDrawMachine')"
      @mousemove="styleClick('mousemove', 'lotteryDrawMachine')"
      @mouseout="styleClick('mouseout')"
    >
      <div :style="styleData.machineHeadStyle"></div>
      <div :style="styleData.machineContent">
        <div v-for="item in dataList" :key="item" class="machineList" :style="styleData.machineList" ref="machinePrerent">
          <div v-for="data in machineContent" :key="data.id" class="machineListBox" :style="styleData.machineListBox">
            <img :src="data.showImg" alt v-if="data.showImg != ''" />
            <!-- <div>{{data.showImg}}</div> -->
            <div class="ellipsis" v-if="data.showImg" style="width:100%;color:#f2270c">{{ data.prizeName }}</div>
            <div v-else style="width:100%;color:#f2270c">谢谢参与</div>
          </div>
        </div>
      </div>
      <div v-if="isWebClick" class="machineButton" :style="styleData.machineButton"></div>
      <div
        v-else
        class="machineButton"
        :style="styleData.machineButton"
        v-lz-click="'12'"
        @click="machineButtonClick"
      ></div>
    </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 { drawPrize, startDraw } = apis1;
export default {
  props: [
    "styleData",
    "keyData",
    "datas",
    "isTemplate",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      machineContent: [
        {
          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: "谢谢参与",
        },
        {
          id: 7,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          id: 8,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
      ],
      restDrawCount: 0,
      dataListLength:0,
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      dataList: [1, 2, 3],
      speed: 60, // 抽奖切换速度
      oneMove: 4, //抽奖圈数
      prizeWinning: 3, //抽奖当前圈最终位置
      drawTime: 0, //抽奖总共时间
      ourDomHeight: 0,
      noSelectList: [],
      showlist: "",
      nowNum: 0,
      lastClick: null,
      styleDataOld: {},
      startPlay:false
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
  },
  mounted() {
    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() {
      var ms = 2000;
      this.lastClick = Date.now() - ms;
      if (this.isTemplate == true) {
        if (!this.isWebClick) {
          Toast("活动预览，仅供查看");
        }
        var datasAll = this.templateData;
        if (datasAll) {
          this.showlist = datasAll.draw.prizeList;
        } else {
          this.showlist = "1";
        }
      } else {
        let actStatus = sessionStorage.getItem("actStatus");
        bus.$on("restDrawCount", (content) => {
          this.restDrawCount = content;
        });
        bus.$on("ourprizeList", (content) => {
          this.showlist = content;
          let prizelist = content;
          if (prizelist.length != 0) {
            prizelist.forEach((v) => {
              this.machineContent.forEach((i, a) => {
                if (v.position == i.id) {
                  this.machineContent[a] = v;
                }
              });
            });
          }
          this.machineContent.forEach((v, i) => {
            console.log(v, "machine");
            if (v.position == undefined) {
              this.noSelectList.push(v.id);
            }
          });
        });
        bus.$on("data" , (content)=>{
          this.dataListLength = content.taskList.length
        })
        console.log(this.noSelectList, "finishnum");
      }
    },
    machineButtonClick() {
      var ms = 2000;
      if (Date.now() - this.lastClick >= ms) {
        this.lastClick = Date.now();
      } else {
        return;
      }
      console.log(this.machineContent);
      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.drawTime != 0) {
        //判定是否正在抽奖
        this.$toast("正在抽奖中，请勿重复点击");
        return;
      }
      if (this.restDrawCount == 0) {
        if(this.dataListLength > 0){
          this.$toast('您没有抽奖机会了，点击"获得更多抽奖机会"吧');
        }else{
          this.$toast('您没有抽奖机会了');
        }
        return;
      } else {
        this.restDrawCount--;
        this.drawInit();
        this.startMove();
      }
    },
    drawInit() {
      console.log("抽奖数据初始化");
       console.log(this.$refs.machinePrerent[1],111111);
      console.log(this.$refs.machinePrerent[1].offsetHeight,111111);
      console.log(this.machineContent.length,2222);
      //抽奖数据初始化
      this.speed = 60; //抽奖速度
      this.oneMove = 3; // 总共走的圈数
      this.prizeWinning = 2; //当前圈最终停止位置
      this.drawPosition = 1; // 起始位置
      this.drawTime = 0; //开始至结束时间
      this.startPlay = false
      this.ourDomHeight = this.$refs.machinePrerent[1].offsetHeight / this.machineContent.length;
    },
    startRoll(tope, hope) {
      //tope为中奖Id hope为中奖数据
      const self = this;
      this.prizeWinning = tope;
      if (hope == "未中奖") {
        this.prizeWinning =
          8 * this.oneMove * this.speed + this.prizeWinning * this.speed;
      } else {
        this.prizeWinning =
          8 * this.oneMove * this.speed + this.nowNum * this.speed;
      }
      console.log(
        this.prizeWinning,
        this.oneMove,
        this.speed,
        tope,
        this.nowNum
      );
      //计算抽奖停留最终位置
      this.ourDomHeight -=
        this.$refs.machinePrerent[1].offsetHeight / this.machineContent.length;
        console.log(this.ourDomHeight,"kokokokok");
      //每次执行调整位移位置
      if (this.ourDomHeight == -this.$refs.machinePrerent[1].offsetHeight) {
        //如果位移位置即将超过总高度将其归位
        this.ourDomHeight =
          this.$refs.machinePrerent[1].offsetHeight /
          this.machineContent.length;
      } else {
        if (this.startPlay) {
          this.$refs.machinePrerent[0].style.transform = `translate3d(0px, ${this.ourDomHeight}px, 0px)`;
          this.$refs.machinePrerent[1].style.transform = `translate3d(0px, ${this.ourDomHeight}px, 0px)`;
          this.$refs.machinePrerent[2].style.transform = `translate3d(0px, ${this.ourDomHeight}px, 0px)`;
        } else {
          this.$refs.machinePrerent[0].style.transform = `translate3d(0px, ${this.ourDomHeight}px, 0px)`;
          setTimeout(() => {
            this.$refs.machinePrerent[1].style.transform = `translate3d(0px, ${this.ourDomHeight}px, 0px)`;
          }, 300);
          setTimeout(() => {
            this.$refs.machinePrerent[2].style.transform = `translate3d(0px, ${this.ourDomHeight}px, 0px)`;
            this.startPlay = true
          }, 600);
        }
      }
      if (this.drawTime == this.prizeWinning) {
        //判定如果总时间等于抽奖停留最终位置做停止处理
        if (hope == "未中奖") {
          //判定是否中奖
          setTimeout(() => {
            self.fulfillHandle("未中奖");
          }, 600);
        } else {
          setTimeout(() => {
            this.publicData.$emit(
              "isNotyFiceWinnerReorrd",
              true,
              this.isTemplate
            );
            self.fulfillHandle(this.machineContent[tope], hope);
          }, 600);
        }
        this.drawInit();
      } else {
        //如果还未到中奖最终位置将调用自己
        console.log(this.drawTime, this.prizeWinning);
        this.drawTime += this.speed;
        setTimeout(() => {
          this.startRoll(tope, hope);
        }, this.speed);
      }
    },
    startMove() {
      //每次执行将初始化抽奖数据
      //调用抽奖接口
      this.nowNum = 0;
      this.prizeWinning = 0;
      bus.$emit("restDrawCount", this.restDrawCount);
      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.machineContent.length; i++) {
            if (this.machineContent[i].id == initDatas.data.prizeInfoId) {
              self.pIndex = i;
              this.prize = self.machineContent[self.pIndex].position - 1;
              this.nowNum = self.pIndex;
              this.nowNum += 3;
              this.startRoll(self.pIndex, initDatas.data); //执行抽奖
              // 拿到相应的角度调旋转接口
              this.isStartPlay = false;
              noSelect = false;
              break;
            }
          }
          if (noSelect) {
            for (var i = 0; i < self.prizeListData.length; i++) {
              if (!self.machineContent[i].text) {
                this.prize = self.prizeListData[i].position - 1;
              }
            }
            //如果未中奖将把所有未中奖位置做随机选中处理
            var finishnum = Math.floor(
              Math.random() * this.noSelectList.length
            );
            this.prizeWinning = this.noSelectList[finishnum];
            this.prizeWinning += 2;
            console.log(this.prizeWinning, this.noSelectList[finishnum]);
            this.startRoll(this.prizeWinning, "未中奖");
            this.isStartPlay = false;
          }
        } else {
          for (var i = 0; i < self.machineContent; i++) {
            if (!self.machineContent[i].text) {
              this.prize = self.machineContent[i].position - 1;
            }
          }
          var finishnum = Math.floor(Math.random() * this.noSelectList.length);
          this.prizeWinning = this.noSelectList[finishnum];
          this.prizeWinning += 2;
          console.log(this.prizeWinning, this.noSelectList[finishnum]);
          this.startRoll(this.prizeWinning, "未中奖");
        }
      });
    },
    fulfillHandle(prizeData, initDatas) {
      this.isStartPlay = false;

      var activityType = sessionStorage.getItem("activityType");
      this.isShowRotary = this.datas.isShowRotary == true ? true : false;

      if (prizeData == "未中奖") {
        NoPrizeResultPopComService.create(
          "非常遗憾，您与大奖擦肩而过~",
          "//img10.360buyimg.com/imgzone/jfs/t1/136745/32/20121/48059/5fd996feE56314a28/b952f0e6f3fe811f.png",
          (submit) => {
            NoPrizeResultPopComService.close();
          }
        );
      } else {
        //中奖
        console.log(this.machineContent + 'aaaaa');
        this.publicData.$emit('prizeInit',true);
        this.prizeResultData.datas = this.machineContent[this.pIndex];
        PrizeResultPopComService.create(
          this.prizeResultData,
          initDatas,
          (submit) => {
            PrizeResultPopComService.close();
          }
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.machineList {
  // flex: 1;
  width: 1.7rem;
  height: 21.6rem;
  margin: 0 0.015rem;
  transition: 0.3s all;
}
.machineListBox {
  width: 1.7rem;
  height: 2.7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 0.24rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/220925/3/19031/26211/62a1536dE18ed522e/727c3c9ac358daa9.png);
  background-size: 100%;
}
.machineButton {
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 0.85rem auto 0;
}
.ellipsis{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
</style>