<template>
  <div
    class="jiugonggeDrawContentC"
    ref="scratchableLatex"
    @click.stop="styleClick('click', 'scratchableLatex')"
    @mousemove.stop="styleClick('mousemove', 'scratchableLatex')"
    @mouseout.stop="styleClick('mouseout')"
  >
    <div :style="styleData.drawInfo">
      <div class="drawInfoNei" :style="styleData.drawInfoNei">
        <div class="drawInfoRight" :style="styleData.drawInfoRight">
          剩余抽奖次数：
          <span :style="styleData.drawInfoDrawTime">{{ restDrawCount }}</span>
        </div>
        <div v-if="styleData.lookDrawConditionText" @click="toluckDrawPage()" :style="styleData.lookDrawConditionText">查看抽奖条件</div>
        <div v-else @click="toluckDrawPage()" :style="styleData.lookDrawCondition"></div>
      </div>
    </div>

    <div :style="styleData.drawPlateBg" :class="[isWebClick?'':'animated zoomInDown', styleData.changePositon ? styleData.changePositon :'']">
      <div v-for="(item, index) in prizeListData" :key="index">
        <div
          v-if="item.position % 2 == 0"
          :class="['lottery-unit11 lottery-unit lottery-unit-0 draw-item-0' + item.position,'active']"
          :style="styleData.drawItem"
          style="box-sizing: border-box">
          <div :style="styleData.drawItemnei">
            <div class="mask"  v-if="index == current"></div>
            <div>
              <div class="draw-item-name draw-item-jf" v-if="item.id" :style="styleData.drawItemName">
                <div>
                  <img class="icon-common" :src="item.showImg" />
                  <span
                    style="
                       white-space: nowrap;
                       text-overflow: ellipsis;
                       overflow: hidden;
                       word-break: break-all;
                       width: 100%;
                       display: block;
                     "
                  >
                    {{ item.prizeName }}
                  </span>
                </div>
              </div>
              <div class="draw-item-name1 draw-item-jf" v-if="!item.id" :style="styleData.drawItemName1">{{ item.prizeName }}</div>
            </div>
          </div>
        </div>

        <div
          v-else
          :class="['lottery-unit11 lottery-unit lottery-unit-0 draw-item-0' + item.position,'active']"
          :style="styleData.drawItem1"
          style="box-sizing: border-box">
          <div :style="styleData.drawItemnei">
            <div class="mask" v-if="index == current"></div>

            <div>
              <div class="draw-item-name draw-item-jf" v-if="item.id" :style="styleData.drawItemName">
                <div>
                  <img class="icon-common" :src="item.showImg" />
                  <span
                    style="
                       white-space: nowrap;
                       text-overflow: ellipsis;
                       overflow: hidden;
                       word-break: break-all;
                       width: 100%;
                       display: block;
                     "
                  >
                    {{ item.prizeName }}
                  </span>
                </div>
              </div>
              <div class="draw-item-name1 draw-item-jf" v-if="!item.id" :style="styleData.drawItemName1">{{ item.prizeName }}</div>
            </div>
          </div>
        </div>

        <div v-if="isWebClick" :style="styleData.drawStart"></div>
        <div v-else :style="styleData.drawStart" v-lz-click="'12'" @click="startPlay"></div>
        <!-- <div class="draw-isdraw-bg" style="display: none"></div> -->
      </div>
    </div>
  </div>
</template>
<script>
import buttonCom from '../../basisComponent/button/buttonCom.vue';
import dialogMore from '../../basisComponent/button/dialogMore.vue';
import { TaskPopComService, SharePopComService, ShopPopComService, FollowSkuPopComService, PingJiaPopComService } from '../../../util/comCreate.js';
import { PrizeResultPopComService, NoPrizeResultPopComService } from '../../../util/hdzxtcomCreate.js';
import apis1 from '../../../util/apis1.js';
import { noDrawPosition } from '../../../js/luckyDraw';
let { drawPrize, startDraw, evaluationMainRequest, followShop } = apis1;

export default {
  props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData', 'isWebClick', 'modifyContent'],
  components: {
    buttonCom,
    dialogMore
  },
  data() {
    return {
      isStartPlay: false,
      current: -1, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置
      count: 0, // 总共有多少个位置
      times: 0, // 转动跑格子次数,
      cycle: 10, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      speed: 500, // 初始转动速度
      lampShow: false, //开始抽奖，灯光闪烁
      followShow: false, //关注店铺
      moreShow: false, //更多任务按钮
      showShare: false, //
      showFoll: false,
      showBuy: false,
      noPrizeList: [],
      pointFoll: 1, // pop页显示分享任务
      pointShare: 3, // pop页显示关注任务
      pointBuy: 2, // pop页显示购买商品任务
      timer: 0, // 转动定时器
      prize: 0, // 中奖位置，接口返回
      restDrawCount: 0,
      rotNum: 0, // 旋转圈数基数
      time: 0, // 旋转时间
      endTime: '',
      startDisabled: false,
      task: {}, //任务列表
      showImg: '',
      styleDataOld: {},
      prizeListData: [
        {
          position: 1,
          showImg: '//img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 2,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 3,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 4,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 5,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 6,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 7,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 8,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        }
      ],
      backgroundDiv: {
        backgroundImage: ''
      },
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: 'showImg',
          prizeName: 'prizeName',
          prizeType: 'prizeType',
          priceInfo: 'priceInfo',
          discountType: 'discountType',
          couponType: 'couponType'
        }
      }
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    var golbalPlateStyle = 2;
    // this.timer = setInterval(() => {
    //   if (golbalPlateStyle === 1) {
    //     golbalPlateStyle = 2;
    //     this.backgroundDiv.backgroundImage =
    //       "url(https://img10.360buyimg.com/imgzone/jfs/t12637/103/1737108222/2226/82017388/5a7126dcN3d308426.png)";
    //   } else if (golbalPlateStyle === 2) {
    //     golbalPlateStyle = 1;
    //     this.backgroundDiv.backgroundImage =
    //       "url(https://img10.360buyimg.com/imgzone/jfs/t15637/321/1962178342/2198/25ad4f94/5a7126dcNd107479f.png)";
    //   }
    // }, 500);
    this.initData();
  },

  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          styleDataOld: this.styleDataOld,
          c_this: this,
          isCustomSwitching: this.isCustomSwitching
        };
        this.$emit('opertaionCom', type, byValue);
      }
    },

    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);
        });
      }
    },

    //点击开始抽奖
    move() {
      const self = this;
      if (this.times != 0 && this.isStartPlay) {
      } else {
        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;
          this.speed = 100; //每次抽奖速度初始化为200

          console.log('initDatas.data', initDatas.data);
          if (initDatas.data) {
            // 奖品id没有匹配上的时候
            var noSelect = true;
            for (var i = 0; i < this.prizeListData.length; i++) {
              if (this.prizeListData[i].id == initDatas.data.prizeInfoId) {
                console.log(self.prizeListData);
                self.pIndex = i;
                console.log('中奖id', self.pIndex);
                this.prize = self.prizeListData[self.pIndex].position - 1;
                this.startRoll(self.pIndex, initDatas.data); //执行抽奖
                // 拿到相应的角度调旋转接口

                console.log('奖品id', self.pIndex);
                // this.isStartPlay = false;
                noSelect = false;
                break;
              }
            }
            if (noSelect) {
              for (var i = 0; i < self.prizeListData.length; i++) {
                if (!self.prizeListData[i].prizeType) {
                  this.prize = self.prizeListData[i].position - 1;
                }
              }
              noDrawPosition('rotaryTable', 'prizeListData', this, position => {
                this.prize = self.prizeListData[position].position - 1;
                this.startRoll('未中奖');
              });

              this.isStartPlay = false;
            }
          } else {
            for (var i = 0; i < self.prizeListData.length; i++) {
              if (!self.prizeListData[i].prizeType) {
                this.prize = self.prizeListData[i].position - 1;
              }
            }
            noDrawPosition('rotaryTable', 'prizeListData', this, position => {
              this.prize = self.prizeListData[position].position - 1;
              this.startRoll('未中奖');
            });
          }
        });
      }
    },

    // 开始转动
    startRoll(tope, hope) {
      this.times += 1; // 转动次数
      this.time += this.speed;
      this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
      // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
      if (this.times > this.cycle + 10 && this.prize === this.current) {
        const self = this;
        if (tope == '未中奖') {
          setTimeout(() => {
            self.fulfillHandle('未中奖');
          }, 1000);
        } else {
          setTimeout(() => {
            self.fulfillHandle(self.prizeListData[tope], hope);
          }, 1000);
          console.log(self.prizeListData, hope);
        }
      } else {
        if (this.times < this.cycle - 20) {
          this.speed -= 4; // 加快转动速度
        } else {
          this.speed += 10; // 抽奖即将结束，放慢转动速度
        }
        this.timer = setTimeout(() => {
          this.startRoll(tope, hope);
        }, this.speed); //开始转动
      }
    },

    // 每一次转动
    oneRoll() {
      let index = this.current; // 当前转动到哪个位置
      const count = 8; // 总共有多少个位置
      index += 1;
      if (index > count - 1) {
        index = 0;
      }
      this.current = index;
      console.log('a' + this.current);
    },

    // 点击开始,请求接口抽奖
    async startPlay() {
      if (this.isTemplate) {
        if(!this.isWebClick){
          this.$toast('活动预览，仅供查看');
        }
        return;
      }

      let actStatus = sessionStorage.getItem('actStatus');
      console.log(actStatus);
      if (actStatus == 2) {
        this.$toast('活动已结束');
        return;
      }
      if (actStatus == 1) {
        this.$toast('活动未开始');
        return;
      }

      if (this.isStartPlay) {
        this.$toast('正在抽奖中，请勿重复点击');
        return;
      }
      if (this.restDrawCount == 0) {
        this.$toast('您没有抽奖机会了');
        return;
      }
      this.isStartPlay = true;
      this.restDrawCount -= 1;
      console.log(this.times, '---', this.isStartPlay, 'okkkk');

      this.move();
      // console.log('1231237')
    },
    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      this.isStartPlay = false;
      var activityType = sessionStorage.getItem('activityType');
      this.isShowRotary = this.datas.isShowRotary == true ? true : false;
      console.log('self');
      if (prizeData == '未中奖') {
        NoPrizeResultPopComService.create(this.styleData, submit => {
          NoPrizeResultPopComService.close();
          clearTimeout(this.timer); // 清除转动定时器
          this.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖
          this.publicData.$emit('isNotyFiceWinnerReorrd', true, this.isTemplate);
        });
      } else {
        //中奖
        this.prizeResultData.datas = prizeData;
        PrizeResultPopComService.create(this.prizeResultData, initDatas, this.styleData, submit => {
          PrizeResultPopComService.close();
          clearTimeout(this.timer); // 清除转动定时器
          this.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖
          this.publicData.$emit('isNotyFiceWinnerReorrd', true, this.isTemplate);
        });
      }
    },
    toluckDrawPage() {
      if (this.isTemplate) {
        if(!this.isWebClick){
          this.$toast('活动预览，仅供查看');
        }
        return;
      }
      this.doFrontBuryPoint({code: 'cjq-ckcjtj',value: '',event: 'pop'})
      PingJiaPopComService.create('', prizeRecordDetilClick => {
        PingJiaPopComService.close();
      });
      //    this.publicData.$emit("pingjiaPopFn", true);
    }
  }
};
</script>
<style lang="scss" scoped>
.jiugonggeDrawContentC {
  text-align: center;
  margin-top: -0.1rem;
  .draw-start span {
    color: #fff;
    font-size: 0.2rem;
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    margin-left: -0.45rem;
  }
  .drawInfoNei {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 0.25rem 0 0.32rem;
  }
  .drawInfoRight {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-bottom: 0.1rem;
    margin-left: 2.22rem;
  }
  .active {
    .mask {
      width: 1.99rem;
      height: 2.07rem;
      position: absolute;
      left: 0;
      bottom: 0;
      border-radius: 0.09rem;
      background-color: black;
      opacity: 0.2;
    }
  }

  // .draw-plate-bg {
  //   width: 7.3rem;
  //   height: 7.5rem;
  //   margin: 0 auto;
  //   background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/189192/18/19329/105400/611fa4bcEadb99c34/941d16c18c949bde.png);
  //   background-size: 100%;
  //   position: relative;
  //   top: -1rem;
  //   z-index: 1;
  // }
  .draw-plate {
    width: 6.3rem;
    height: 6.2rem;
    display: inline-block;
    // background-image: url(https://img10.360buyimg.com/imgzone/jfs/t15637/321/1962178342/2198/25ad4f94/5a7126dcNd107479f.png);
    // background-repeat: no-repeat;
    // background-size: 100%;
    position: relative;
    top: 1.3rem;
    z-index: 2;
  }
  .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.38rem;
    left: 0.39rem;
  }
  .draw-item-02 {
    top: 0.38rem;
    left: 2.45rem;
    background: #ffe792;
  }
  .draw-item-03 {
    top: 0.38rem;
    left: 4.51rem;
  }
  .draw-item-04 {
    top: 2.46rem;
    left: 4.51rem;
    background: #ffe792;
  }
  .draw-item-05 {
    top: 4.52rem;
    left: 4.51rem;
  }
  .draw-item-06 {
    top: 4.52rem;
    left: 2.45rem;
    background: #ffe792;
  }
  .draw-item-07 {
    top: 4.52rem;
    left: 0.39rem;
  }
  .draw-item-08 {
    top: 2.46rem;
    left: 0.39rem;
    background: #ffe792;
  }
  // .draw-start {
  //   position: absolute;
  //   top: 2.26rem;
  //   left: 2.34rem;
  //   width: 1.64rem;
  //   height: 1.69rem;
  //   background: url(https://img10.360buyimg.com/imgzone/jfs/t27337/183/2617377802/1907/52f64fef/5c05f07cNb3d7c12b.png)
  //     no-repeat;
  //   background-size: 100%;
  // }
  .draw-isdraw-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.35rem;
  }
  .draw-item-mtext {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 1.69rem;
    font-size: 0.24rem;
    color: #333;
  }
  // .draw-item {
  //   position: absolute;
  //   z-index: 2;
  //   width: 1.64rem;
  //   height: 1.69rem;
  //   background: url(https://img10.360buyimg.com/imgzone/jfs/t17275/289/374056995/546/c3d782c8/5a7126dcNb5a90721.png)
  //     no-repeat;
  //   background-size: 100%;
  // }
  .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: 0.94rem;
    height: 0.94rem;
    margin: 0.2rem auto 0;
    margin-top: 0.1em;
  }
  .iconImg {
  }
  // .draw-info {
  //   color: #424d58;
  //   text-align: center;
  //   font-size: 0.3rem;
  //   margin-top: -0.8rem;
  // }
  .draw-item-name {
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.2rem;
    color: #e65596;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .draw-item-name1 {
    position: absolute;
    width: 90%;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.2rem;
  }
  .draw-info-drawTime {
    width: 1.16rem;
    height: 1.16rem;
    margin-left: 0.2rem;
    border-radius: 50%;
    background: #fc3c2c;
    font-size: 0.6rem;
    color: #fff;
    text-align: center;
    line-height: 1.16rem;
    margin-top: 0.1rem;
  }
  .lookDrawCondition {
    color: #fff;
    font-size: 0.24rem;
    z-index: 2;
    margin: -0.6rem auto 0;
    text-align: center;
  }
  .seeShiwuPrizes {
    color: #000 !important;
    line-height: 0.3rem;
  }
  // .draw-chance .drow-chance-btn {
  //   position: relative;
  //   overflow: hidden;
  //   width: 3.5rem;
  //   height: 1rem;
  //   line-height: 0.72rem;
  //   background-image: url(https://img10.360buyimg.com/imgzone/jfs/t20218/109/472562343/14078/12e90d2b/5b0e256eNfd19da8f.png);
  //   background-size: 100%;
  //   background-repeat: no-repeat;
  // }
  .f-tac {
    text-align: center;
  }
  .f-ib {
    display: inline-block;
    vertical-align: middle;
  }
}
.changePositon-1{
  .draw-item-01 {
    top: 0.9rem;
    left: 0.39rem;
  }
  .draw-item-02 {
    top: 0.9rem;
    left: 2.45rem;
    background: transparent;
  }
  .draw-item-03 {
    top: 0.9rem;
    left: 4.51rem;
  }
  .draw-item-04 {
    top: 3.04rem;
    left: 4.51rem;
    background: transparent;
  }
  .draw-item-05 {
    top: 5.18rem;
    left: 4.51rem;
  }
  .draw-item-06 {
    top: 5.18rem;
    left: 2.45rem;
    background: transparent;
  }
  .draw-item-07 {
    top: 5.18rem;
    left: 0.39rem;
  }
  .draw-item-08 {
    top: 3.04rem;
    left: 0.39rem;
    background: transparent;
  }
}
</style>
