<template>
  <div
    class="rotaryTable1DrawContentC"
    ref="rotaryTable1"
    v-if="rotaryShow"
    @click="styleClick('click', 'rotaryTable1')"
    @mousemove="styleClick('mousemove', 'rotaryTable1')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData.drawInfo">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
        "
      >
        <div>当前可抽奖</div>
        <div :style="styleData.drawInfoDrawTime">{{ count }}</div>
        <div style="margin-left: 0.2rem">次，{{ contnet }}</div>
      </div>
    </div>
    <div
      v-if="isWebClick"
      class="lookDrawCondition"
      :style="styleData.lookDrawCondition"
    ></div>
    <div
      v-else
      class="lookDrawCondition"
      @click="toluckDrawPage()"
      :style="styleData.lookDrawCondition"
    ></div>
    <div class="animated zoomInDown" :style="styleData.drawPlateBg">
      <div
        class="draw-plate"
        v-for="(item, index) in prizeListData"
        :key="index"
      >
        <div
          class="draw-item lottery-unit lottery-unit-0 active"
          :class="['draw-item-0' + item.position]"
          :style="[
            drawPosition == item.position ? 'z-index : 101' : 'z-index : 8',
            styleData.drawItem,
          ]"
        >
          <img :src="showImg" alt class="prizeIcon" />

          <i data-index="0" class="icon-common" v-if="item.id">
            <img :src="item.showImg" alt />
          </i>
          <div
            class="draw-item-name draw-item-jf"
            v-if="item.id"
            :style="styleData.drawItemName"
          >
            {{ item.prizeName }}
          </div>
          <div
            class="draw-item-name1 draw-item-jf"
            v-if="!item.id"
            :style="styleData.drawItemName1"
          >
            {{ item.prizeName }}
          </div>
        </div>

        <div v-if="isWebClick">
          <div v-if="!followShop" :style="styleData.drawStart"></div>
        </div>

        <div v-else>
          <div
            v-lz-click="'12'"
            @click="startPlay"
            :style="styleData.drawStart"
          ></div>
        </div>

        <div
          class="draw-isdraw-bg"
          :style="
            drawIdrawBg
              ? 'background: rgba(0, 0, 0, 0.2);z-index:100'
              : 'background: rgba(0, 0, 0, 0) ; z-index:0'
          "
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
import buttonCom from "../../basisComponent/button/buttonCom.vue";

import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
  PingJiaPopComService,
} from "../../../util/comCreate.js";
import apis1 from "../../../util/apis1.js";
let { drawPrize, startDraw, evaluationMainRequest, followShop } = apis1;

export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  components: {
    buttonCom,
  },
  data() {
    return {
      rotaryShow: true,
      styleDataOld: {},
      isCustomSwitching: "1", //有tab切换时
      count: 0,
      drawPosition: 1,
      speed: 30, // 抽奖切换速度
      oneMove: 1, //抽奖圈数
      prizeWinning: 3, //抽奖当前圈最终位置
      drawTime: 0, //抽奖总共时间
      drawIdrawBg: false,
      endTime: "",
      startDisabled: false,

      showImg:
        "https://img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
      prizeListData: [
        {
          position: 1,
          id: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "好物大奖",
        },
        {
          position: 2,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 3,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 4,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 5,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 6,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 7,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 8,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
      ],
      followShop: false,
      contnet: "呜呜~",
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
    };
  },
  created() {
    this.initData();
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));

    this.publicData.$on(
      "pingjiaPopSwitchValue",
      (isCustomSwitching, refName) => {
        this.isCustomSwitching = isCustomSwitching;
        if (isCustomSwitching == "1") {
          this.rotaryShow = true;
        } else if (isCustomSwitching == "2") {
          this.rotaryShow = false;
        }
      }
    );

    this.publicData.$on("backRotrat", (rotaryShow) => {
      this.rotaryShow = rotaryShow;
    });
  },

  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          isCustomSwitching: this.isCustomSwitching, //有tab切换时
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    toluckDrawPage() {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      (this.rotaryShow = false), this.publicData.$emit("pingjiaPopFn", true);
    },
    drawInit() {
      console.log("抽奖数据初始化");
      //抽奖数据初始化
      this.speed = 30; //抽奖速度
      this.oneMove = 2; // 总共走的圈数
      this.prizeWinning = 2; //当前圈最终停止位置
      this.drawPosition = 1; // 起始位置
      this.drawTime = 0; //开始至结束时间
    },
    drawAnmtion(shu, vote, hope) {
      const self = this;
      //抽奖动画
      if (vote == "未中奖") {
      } else {
        this.prizeWinning = vote; //如果中奖将奖品位置赋值
      }
      setTimeout(() => {
        //启动抽奖
        this.drawPosition++; //每次调用位置 +1
        if (this.drawPosition > 8) {
          //效果到头后复位
          this.drawPosition = 1;
        }
        this.drawTime++; // 记录用时
        if (this.drawTime != shu) {
          console.log(shu, this.drawTime);
          this.speed += 10;
          this.drawAnmtion(
            this.prizeListData.length * this.oneMove + this.prizeWinning,
            vote,
            hope
          );
        } else {
          if (vote == "未中奖") {
            setTimeout(() => {
              self.fulfillHandle("未中奖");
              this.drawIdrawBg = !this.drawIdrawBg;
            }, 500);
          } else {
            setTimeout(() => {
              this.isStartPlay = false;
              this.isShowRotary =
                this.datas.isShowRotary == true ? true : false;
              this.prizeResultData.datas = self.prizeListData[vote];
              PrizeResultPopComService.create(
                this.prizeResultData,
                hope,
                (submit) => {
                  PrizeResultPopComService.close();
                }
              );

              // self.fulfillHandle(
              //   self.prizeListData[self.pIndex],
              //   hope
              // );
              this.drawIdrawBg = !this.drawIdrawBg;
            }, 500);
          }
        }
      }, this.speed);
    },

    async initData() {
      if (!this.isTemplate) {
        await evaluationMainRequest((mainDatas) => {
          this.count = mainDatas.data.count;

          if (this.count > 0) {
            this.contnet = "真棒！";
          }
          if (mainDatas.data.followShop == 1) {
            this.followShop = true;
          }
          console.log(this.count);
        });
      }
      console.log(this.templateData + "ccccccdddd");
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        if (datasAll) {
          var prizeList = datasAll.draw.prizeList;
          if (prizeList.length > 0) {
            for (var i = 0; i < this.prizeListData.length; i++) {
              for (var j = 0; j < prizeList.length; j++) {
                if (prizeList[j].position == this.prizeListData[i].position) {
                  this.prizeListData[i] = prizeList[j];
                  this.prizeListData[i].id = prizeList[j].position;
                  console.log(this.prizeListData[i] + "this.prizeListData1");
                }
              }
            }
          }
          console.log(datasAll.evaluation);
          if (datasAll.evaluation) {
            if (datasAll.evaluation.followGoodsFlag == "1") {
              this.followShop = true;
            }
          }
        }
        console.log(this.prizeListData[0].position + "this.prizeListData");
        this.$set(this.prizeListData);

        this.restDrawCount = 0;
      } else {
        //请求接口
        drawPrize((initdatas) => {
          console.log(initdatas);
          let prizeList = initdatas.data.prizeInfo;
          this.restDrawCount = initdatas.data.drawNumber;

          if (prizeList.length > 0) {
            for (var i = 0; i < this.prizeListData.length; i++) {
              for (var j = 0; j < prizeList.length; j++) {
                if (prizeList[j].position == this.prizeListData[i].position) {
                  this.prizeListData[i] = prizeList[j];
                }
              }
            }
          }
          this.$set(this.prizeListData);
        });
      }
    },
    // 点击开始,请求接口抽奖
    async startPlay() {
      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.count == 0) {
        this.$toast("没有抽奖次数,无法抽奖");
        return;
      }
      // 关注店铺

      if (this.followShop) {
        followShop((initdatas) => {});
      }
      this.drawIdrawBg = !this.drawIdrawBg;
      this.count = this.count - 1;

      if (this.count == 0) {
        this.contnet = "呜呜~";
      }
      this.drawInit();
      // console.log('1231237')
      this.isStartPlay = true;
      startDraw((initDatas) => {
        if (initDatas.resp_code == 1000) {
        }
        console.log("中奖信息", initDatas);
        if (initDatas.resp_code == 50009) {
          this.$toast("活动已结束");
          this.isStartPlay = false;
          return;
        }

        if (initDatas.resp_code != 0) {
          this.isStartPlay = false;
        }

        if (initDatas.data) {
          for (var i = 0; i < this.prizeListData.length; i++) {
            if (this.prizeListData[i].id == initDatas.data.prizeInfoId) {
              self.pIndex = i;
              this.drawAnmtion(
                this.prizeListData.length * this.oneMove + this.prizeWinning,
                self.pIndex,
                initDatas.data
              );
              console.log("中奖id", self.pIndex);
              // 拿到相应的角度调旋转接口
              console.log("奖品id", self.pIndex);
              this.isStartPlay = false;
              this.publicData.$emit(
                "isNotyFiceWinnerReorrd",
                true,
                this.isTemplate
              );
              break;
            }
          }
        } else {
          var randomnum = [];
          this.prizeListData.filter((v, i) => {
            if (v.id == undefined) {
              randomnum.push(v.position - 1);
            }
          });
          console.log(randomnum);
          var finishnum = Math.floor(Math.random() * randomnum.length);
          this.prizeWinning = randomnum[finishnum];
          this.drawAnmtion(
            this.prizeListData.length * this.oneMove + this.prizeWinning,
            "未中奖"
          );
          this.isStartPlay = false;
        }
        this.restDrawCount = this.restDrawCount - 1;
        if (this.restDrawCount == 0) {
          this.contnet = "呜呜~";
        }

        if (this.count == 0) {
          this.contnet = "呜呜~";
        }
      });
    },
    //得奖后的处理
    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.prizeListData + "aaaaa");
        this.prizeResultData.datas = this.prizeListData[this.pIndex];
        PrizeResultPopComService.create(
          this.prizeResultData,
          initDatas,
          (submit) => {
            PrizeResultPopComService.close();
          }
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.rotaryTable1DrawContentC {
  text-align: center;
  margin-top: 0.2rem;
  position: absolute;
  top: 4rem;
  left: 0;
  right: 0;
  z-index: 100;
  .animated {
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  .zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
  }
  .draw-item.active {
    z-index: 8;
  }

  .draw-item-01 {
    top: 0.5rem;
    left: 0.36rem;
  }
  .draw-item-02 {
    top: 0.5rem;
    left: 2.43rem;
  }
  .draw-item-03 {
    top: 0.5rem;
    left: 4.5rem;
  }
  .draw-item-04 {
    top: 2.82rem;
    left: 4.5rem;
  }
  .draw-item-05 {
    top: 5.15rem;
    left: 4.5rem;
  }
  .draw-item-06 {
    top: 5.15rem;
    left: 2.43rem;
  }
  .draw-item-07 {
    top: 5.15rem;
    left: 0.36rem;
  }
  .draw-item-08 {
    top: 2.82rem;
    left: 0.36rem;
  }
  .draw-isdraw-bg {
    position: absolute;
    transition: 0.5s all;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    border-radius: 0.35rem;
  }
  .draw-item-mtext {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 1.62rem;
    font-size: 0.24rem;
    color: #333;
  }
  .prizeIcon {
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1rem;
  }

  img {
    border: 0;
    max-width: 100%;
  }
  .icon-jifen {
    background: url(//img10.360buyimg.com/imgzone/jfs/t1/82425/7/320/5494/5ce7a2dbE0cf643aa/d798e181a8e294af.png)
      no-repeat;
    background-size: 100%;
  }
  .icon-common {
    display: block;
    width: 1.1rem;
    height: 0.8rem;
    margin: 0.2rem auto 0;
    margin-top: 0.1em;
  }
}
</style>
