<template>
  <div :style="styleData">
    <div v-show="isShowButton" class="signButton">
      <buttonCom
        :buttonStyle="dataStyle.signButtonStyle"
        :title="signTitle"
        :disabled="isDisabled"
        @btnClick="btnClick"
      ></buttonCom>
      <!-- <buttonCom :buttonStyle="dataStyle.signButtonStyle" :title="signTitle" @btnClick="btnClick"></buttonCom> -->
    </div>

    <div
      class="restDrawCount"
      :style="dataStyle.restDrawCountStyle"
      v-if="isShowDrawCount"
    >
      当前还有
      <span :style="dataStyle.restDrawCountStyle.restDrawCountSpanStyle"
        >{{ restDrawCount }}次</span
      >
      抽奖机会
    </div>

    <div
      class="turnMaskBox"
      @click="closeClick()"
      v-show="isShowRotary"
      :style="styleData.turnMaskBox"
    >
      <div id="turnBox" @click.stop="" :style="styleData.turnBox">
        <div
          class="turnBox1"
          :style="{ backgroundImage: 'url(' + datas[keyData.mainBg1] + ')' }"
        >
          <div v-if="isShowCircle" class="draw-plate"></div>

          <div
            v-show="isShowPaoMadengButton"
            class="turnBox2"
            :style="{ backgroundImage: 'url(' + datas[keyData.mainBg2] + ')' }"
          ></div>
          <div
            v-show="isShowPaoMadengButton1"
            class="turnBox2"
            :style="{ backgroundImage: 'url(' + datas[keyData.mainBg3] + ')' }"
          ></div>
          <ul
            id="turnUl"
            :style="{ backgroundImage: 'url(' + datas[keyData.mainBg] + ')' }"
          >
            <li
              class="itemLi"
              v-for="(item, index) in prizeListData"
              :key="index"
              :style="{ webkitTransform: 'rotate(' + item.angle + 'deg)' }"
            >
              <img
                class="cicyleImg"
                src="//img10.360buyimg.com/imgzone/jfs/t1/152954/6/9797/1554/5fd7383fEee3a5669/05850d3c07bc63cb.png"
                v-if="!hideCircle"
              />

              <div
                class="prizeName"
                :style="styleData.prizeName"
                v-if="index % 2 == 0 && item.prizeType"
              >
                <p>{{ item[keyData.prizeName] }}</p>
              </div>

              <div
                class="prizeName1"
                :style="styleData.prizeName"
                v-else-if="index % 2 != 0 && item.prizeType"
              >
                <p>{{ item[keyData.prizeName] }}</p>
              </div>
              <div
                class="prizeName3"
                v-else-if="index % 2 == 0 && !item.prizeType"
              >
                <p>{{ item[keyData.prizeName] }}</p>
              </div>
              <div class="prizeName1 prizeName2" v-else>
                <p>{{ item[keyData.prizeName] }}</p>
              </div>
              <img
                v-if="item[keyData.showImg]"
                :style="styleData.img"
                :src="item[keyData.showImg]"
              />
            </li>
          </ul>

          <img
            v-if="!isStartPlay"
            :src="datas[keyData.pointerImg]"
            alt=""
            v-lz-click="'12'"
            @click="startPlay"
            :style="styleData.turnBtn"
            class="turnBtn"
          />
          <img
            v-else
            :src="datas[keyData.pointerImg]"
            :style="styleData.turnBtn"
            alt=""
             @click="startPlay"
            class="turnBtn"
          />
        </div>
      </div>
      <div v-if="isShowCircle" class="f-tac jf-btn">
        {{ pointsPrize }}积分抽奖一次
      </div>
    </div>
    <div
      class="restDrawCount"
      :style="dataStyle.restDrawCountStyle"
      v-if="bottomDrawTimes"
    >
      当前还有
      <span :style="dataStyle.restDrawCountStyle.restDrawCountSpanStyle">{{
        restDrawCount
      }}</span>
      次 抽奖机会
    </div>
    <div class="f-tac draw-chance" style="margin-top: 0.2rem">
      <div
        class="f-ib drow-chance-btnR"
        @click="dialogMore"
        v-if="isShowEndButton"
      ></div>
    </div>
  </div>
</template>
<script>
import dialogMore from "../../basisComponent/button/dialogMore.vue";
import buttonCom from "../../basisComponent/button/buttonCom.vue";
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
  TaskPopComService,
  SharePopComService,
  ShopPopComService,
  FollowSkuPopComService,
} from "../../../util/comCreate.js";
import apis from "../../../util/apis1.js";
let {
  drawPrize,
  startDraw1,
  jiugonggeRequest,
  consumePoints,
  niudanjiRequest,
  followShop,
} = apis;

import { noDrawPosition } from '../../../js/luckyDraw.js';

export default {
  props: ["isTemplate", "datas", "styleData", "keyData", "templateData"],
  components: {
    buttonCom,
    dialogMore,
  },
  data() {
    return {
      isShowRotary: false, //是否显示转盘
      isShowButton: true, //是否显示抽奖按钮
      isShowPaoMadengButton: false, //是否显示跑马灯
      isShowPaoMadengButton1: false, //是否显示跑马灯
      isShowEndButton: false, // 底部获取更多任务按钮 显示 true 默认不显示
      isshowDzhuanpan: false, // 大转盘抽奖 时为true，否则是false
      bottomDrawTimes: false, //底部抽奖次数
      isShowCircle: false, // 积分抽奖圆点显示
      pointsPrize: 0,
      pIndex: 0, // 中奖物品的下标
      rotNum: 0, // 旋转圈数基数
      time: 10000, // 旋转时间
      timer: null, // 定时器
      oTurntable: "", // 旋转圆盘背景图
      type: 0, // 0 图片 1 汉字
      prizeListData: [],
      isShowDrawCount: false, //是否显示抽次数
      isStartPlay: false, //是否可以点击抽奖
      hideCircle: false, //是否隐藏圆点图片
      showShare: false, // pop页显示分享任务
      showFoll: false, // pop页显示关注任务
      showBuy: false, // pop页显示购买商品任务
      pointFoll: 1, // pop页显示分享任务
      pointShare: 3, // pop页显示关注任务
      pointBuy: 2, // pop页显示购买商品任务
      restDrawCount: 0,
      signTitle: "立即抽奖",
      isDisabled: false,
      task: {}, //任务列表

      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
    };
  },

  created() {
    this.isShowPaoMadengButton =
      this.datas.isShowPaoMadengButton == true ? true : false;
    this.isShowCircle = this.datas.isShowCircle == true ? true : false;
    this.isShowPaoMadengButton1 =
      this.datas.isShowPaoMadengButton1 == true ? true : false;
    this.isShowEndButton = this.datas.isShowEndButton == true ? true : false;
    this.isshowDzhuanpan = this.datas.ishowZhuanpan == true ? true : false;
    if (this.isShowPaoMadengButton) {
      var golbalPlateStyle = 2;
      this.timer = setInterval(() => {
        if (golbalPlateStyle === 1) {
          golbalPlateStyle = 2;
          this.isShowPaoMadengButton = true;
          this.isShowPaoMadengButton1 = false;
        } else if (golbalPlateStyle === 2) {
          golbalPlateStyle = 1;
          this.isShowPaoMadengButton = false;
          this.isShowPaoMadengButton1 = true;
        }
      }, 500);
    }

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

    this.isShowButton = this.datas.isShowButton == false ? false : true;
    this.bottomDrawTimes = this.datas.bottomDrawTimes == true ? true : false;
    this.isShowDrawCount = this.datas.isShowDrawCount == false ? false : true;
    //是否隐藏圆点
    this.hideCircle = this.datas.hideCircle === true;
    this.dataStyle = this.styleData.dataStyleAll;

    this.dataStyle.signButtonStyle = this.dataStyle.originButton;
    for (var i = 0; i < 8; i++) {
      var prizeObj = {
        [this.keyData.position]: 0,
        [this.keyData.prizeName]: "谢谢参与",
        [this.keyData.showImg]: "",
        angle: 0,
      };
      var otherPrizeList = [];
      prizeObj.position = i + 1;
      this.prizeListData = this.prizeListData.concat(prizeObj);

      this.prizeListData = this.autoRotate(this.prizeListData);
    }

    //监听是否需要重新请求接口
    this.publicData.$on("notifyCallBack", (ress) => {
      if (ress == "updata") {
        this.initData();
      }
    });
  },

  mounted() {
    console.log("55555555555555555555", this.activityType);
    this.initData();
  },

  methods: {
    async initData() {
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        if (datasAll) {
          if (datasAll.drawChanceData) {
            this.pointsPrize = datasAll.drawChanceData.integral;
          }
          if (datasAll.activeConditions) {
            if (datasAll.drawChanceData) {
              if (datasAll.activeConditions.involvementFlag == 1) {
                this.datas[this.keyData.pointerImg] =
                  "http://img10.360buyimg.com/imgzone/jfs/t1/90896/19/15544/32528/5e7333ccEe7468630/3c953a9adaa97816.png";
              }
            } else {
              if (datasAll.activeConditions.involvementFlag == 1) {
                this.datas[this.keyData.pointerImg] =
                  "https://img10.360buyimg.com/imgzone/jfs/t1/95296/7/15719/10358/5e7455fbEbabf17c3/6a1ad4cde3fb8d3e.png";
              }
              if (datasAll.basicTask.taskList.length > 1) {
                this.isShowEndButton = true;
              }
            }
          }
          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];
                }
              }
            }
          }
        } else {
          this.pointsPrize = 10;
          this.prizeListData = [
            {
              position: 1,
              showImg: "",
              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: "谢谢参与",
            },
          ];
        }
        for (var i = 0; i < this.prizeListData.length; i++) {
          this.prizeListData[i].angle = 0;
        }
        this.prizeListData = this.autoRotate(this.prizeListData);
        this.oTurntable = document.querySelector("#turnUl");
        // 过度中属性用时5s
        this.oTurntable.style.webkitTransition =
          "transform " + this.time / 1000 + "s ease";

        this.restDrawCount = 0;
        if (this.restDrawCount == 0) {
          this.dataStyle.signButtonStyle = this.dataStyle.goneIndexButtonSign;
          this.isDisabled = true;
          return;
        }
      } else {
        if (this.isshowDzhuanpan) {
          const self = this;
          let actStatus = sessionStorage.getItem("actStatus");

          await jiugonggeRequest((mainDatas) => {
            this.count = mainDatas.data.count;
            console.log(mainDatas.data, "jiugonggeRequest");
            if (mainDatas.data.involvementFlag == 1) {
              this.followShow = true;
              this.datas[this.keyData.pointerImg] =
                "https://img10.360buyimg.com/imgzone/jfs/t1/95296/7/15719/10358/5e7455fbEbabf17c3/6a1ad4cde3fb8d3e.png";
            }
            if (
              mainDatas.data.taskActivityInfoVO.taskFollowSkuWaresVO ||
              mainDatas.data.taskActivityInfoVO.shareSkuRule ||
              mainDatas.data.taskActivityInfoVO.shareShopRule ||
              mainDatas.data.taskActivityInfoVO.taskOrderWaresVO ||
              mainDatas.data.taskActivityInfoVO.shareActiveRule
            ) {
              this.isShowEndButton = true;

              if (
                mainDatas.data.taskActivityInfoVO.shareSkuRule ||
                mainDatas.data.taskActivityInfoVO.shareShopRule ||
                mainDatas.data.taskActivityInfoVO.shareActiveRule
              ) {
                this.showShare = true;
                if (mainDatas.data.taskActivityInfoVO.shareSkuRule) {
                  this.pointShare =
                    mainDatas.data.taskActivityInfoVO.shareSkuRule.taskPosition;
                }
                if (mainDatas.data.taskActivityInfoVO.shareShopRule) {
                  this.pointShare =
                    mainDatas.data.taskActivityInfoVO.shareShopRule.taskPosition;
                }
                if (mainDatas.data.taskActivityInfoVO.shareActiveRule) {
                  this.pointShare =
                    mainDatas.data.taskActivityInfoVO.shareActiveRule.taskPosition;
                }
              }
              if (mainDatas.data.taskActivityInfoVO.taskFollowSkuWaresVO) {
                this.showFoll = true;
                this.pointFoll =
                  mainDatas.data.taskActivityInfoVO.taskFollowSkuWaresVO.taskPosition;
              }
              if (mainDatas.data.taskActivityInfoVO.taskOrderWaresVO) {
                this.showBuy = true;
                this.pointBuy =
                  mainDatas.data.taskActivityInfoVO.taskOrderWaresVO.taskPosition;
              }
              this.task = mainDatas.data.taskActivityInfoVO;
            }
          });
          if (this.activityType == 10031) {
            await niudanjiRequest((mainDatas) => {
              this.count = mainDatas.data.count;
              console.log(mainDatas.data, "niudanjiRequest");
              if (mainDatas.data.involvementFlag == 1) {
                this.followShow = true;
              }
              if (
                mainDatas.data.taskActivityInfoVO.taskFollowSkuWaresVO ||
                mainDatas.data.taskActivityInfoVO.shareSkuRule ||
                mainDatas.data.taskActivityInfoVO.shareShopRule ||
                mainDatas.data.taskActivityInfoVO.taskOrderWaresVO ||
                mainDatas.data.taskActivityInfoVO.shareActiveRule
              ) {
                this.moreShow = true;

                if (
                  mainDatas.data.taskActivityInfoVO.shareSkuRule ||
                  mainDatas.data.taskActivityInfoVO.shareShopRule ||
                  mainDatas.data.taskActivityInfoVO.shareActiveRule
                ) {
                  this.showShare = true;
                }
                if (mainDatas.data.taskActivityInfoVO.taskFollowSkuWaresVO) {
                  this.showFoll = true;
                }
                if (mainDatas.data.taskActivityInfoVO.taskOrderWaresVO) {
                  this.showBuy = true;
                }
                this.task = mainDatas.data.taskActivityInfoVO;
              }
            });
          }
        } else if (this.isShowCircle) {
          await consumePoints((datas) => {
            this.pointsPrize = datas.data.integral;
            // 是否关注店铺
            if (datas.data.integralMultiple == 1) {
              this.datas[this.keyData.pointerImg] =
                "http://img10.360buyimg.com/imgzone/jfs/t1/90896/19/15544/32528/5e7333ccEe7468630/3c953a9adaa97816.png";
              this.followShow = true;
            }
          });
        }

        //请求接口
        await drawPrize((initdatas) => {
          console.log(initdatas, "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.prizeListData = this.autoRotate(this.prizeListData);

          this.oTurntable = document.querySelector("#turnUl");
          // 过度中属性用时5s
          this.oTurntable.style.webkitTransition =
            "transform " + this.time / 1000 + "s ease";

          if (this.restDrawCount == 0) {
            this.dataStyle.signButtonStyle = this.dataStyle.goneIndexButtonSign;
            this.isDisabled = true;
            return;
          } else {
            this.dataStyle.signButtonStyle = this.dataStyle.originButton;
            this.isDisabled = false;
            return;
          }
        });
      }
    },

    dialogMore() {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      const self = this;
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      TaskPopComService.create(
        "非常遗憾，您与大奖擦肩而过~",
        this.showShare,
        this.showFoll,
        this.showBuy,
        this.restDrawCount,
        this.pointFoll,
        this.pointShare,
        this.pointBuy,
        (submit) => {
          console.log("cccc" + submit);
          TaskPopComService.close();
          if (submit == 2) {
            this.followSku();
          }
          if (submit == 3) {
            this.openShop();
          }
          if (submit == 4) {
            this.openShare();
          }
        }
      );
    },

    followSku() {
      var data = this.task.taskFollowSkuWaresVO;
      sessionStorage.setItem("taskShare", "taskShare");
      FollowSkuPopComService.create(data, this.restDrawCount, (submit) => {
        console.log("cccc" + submit);
        sessionStorage.setItem("taskShare", "");
        FollowSkuPopComService.close();
        this.restDrawCount = this.restDrawCount + submit;
      });
    },
    openShare() {
      var data;
      var title = "";
      if (this.task.shareSkuRule) {
        data = this.task.shareSkuRule;
        title = "分享指定商品";
      } else if (this.task.shareShopRule) {
        data = this.task.shareShopRule;
        title = "分享指定店铺";
      } else {
        data = this.task.shareActiveRule;
        title = "分享指定活动";
      }

      sessionStorage.setItem("taskShare", "taskShare");
      SharePopComService.create(title, data, this.restDrawCount, (submit) => {
        console.log("cccc" + submit);
        sessionStorage.setItem("taskShare", "");
        this.restDrawCount = this.restDrawCount + submit;
        SharePopComService.close();
      });
    },

    openShop() {
      var data = this.task.taskOrderWaresVO;
      sessionStorage.setItem("taskShare", "taskShare");
      ShopPopComService.create(data, this.restDrawCount, (submit) => {
        console.log("cccc" + submit);
        sessionStorage.setItem("taskShare", "");
        ShopPopComService.close();
        this.restDrawCount = this.restDrawCount + submit;
      });
    },

    btnClick() {
      let actStatus = sessionStorage.getItem("actStatus");
      console.log(actStatus);
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      // console.log('kjaslkjdalksjdlkwsj')
      if (!this.isDisabled) {
        this.isShowRotary = true;
      }
    },
    closeClick() {
      console.log(123, this.isStartPlay);
      if (this.isShowCircle) {
        return;
      }
      if (this.isStartPlay) {
         this.$toast("正在抽奖中，请勿重复点击");
        return;
      }
      this.isShowRotary = false;
    },

    //自动生成角度添加到数组上
    autoRotate(arr) {
      if (arr.length) {
        let len = arr.length;
        let base = 360 / len;
        // console.log('每个扇形的角度', base);
        arr.forEach((item, index) => {
          // 指的是某个奖品区域的中间 : base/2
          item.angle = parseInt(index * base);
        });
      }
      return arr;
    },
    // 点击开始,请求接口抽奖
    async startPlay() {

      console.log(this.isTemplate);
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      const self = this;
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      console.log(this.isStartPlay);
      if (this.isStartPlay == true) {
         this.$toast("正在抽奖中，请勿重复点击");
        return;
      }
        // console.log('1231237')

      if (!this.isShowCircle) {
        if (this.restDrawCount == 0) {
          if (this.isshowDzhuanpan) {
            this.$toast('您没有抽奖机会了，点击"获得更多抽奖机会"吧');
            return;
          } else {
            this.$toast("没有抽奖次数,无法抽奖");
            return;
          }
        }
      }

      this.isStartPlay = true;

      if (this.isTemplate == true) {
        // 拿到相应的角度调旋转接口
        //未中奖
        self.startrotate(self.prizeListData[7].angle, () => {
          self.fulfillHandle("未中奖");
        });
        return;
      }
      // 关注店铺

      if (this.followShow) {
        followShop((initdatas) => {
          startDraw1(this.pointsPrize, (initDatas) => {
            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 == "1") {
              this.$toast("积分不足,不可抽奖");
              this.isStartPlay = false;
              return;
            }
            if (initDatas.data == "2") {
              // this.$toast("没有抽奖次数,无法抽奖");
              if (this.isshowDzhuanpan) {
                this.$toast('您没有抽奖机会了，点击"获得更多抽奖机会"吧');
              } else {
                this.$toast("没有抽奖次数,无法抽奖");
              }
              this.isStartPlay = false;
              return;
            }

            if (initDatas.data) {
              for (var i = 0; i < this.prizeListData.length; i++) {
                if (this.prizeListData[i].id == initDatas.data.prizeInfoId) {
                  self.pIndex = i;
                  console.log("中奖id", self.pIndex);
                  // 拿到相应的角度调旋转接口
                  self.startrotate(
                    self.prizeListData[self.pIndex].angle,
                    () => {
                      self.fulfillHandle(
                        self.prizeListData[self.pIndex],
                        initDatas.data
                      );
                      console.log("奖品id", self.pIndex);
                      this.isStartPlay = false;
                      this.publicData.$emit(
                        "isNotyFiceWinnerReorrd",
                        true,
                        this.isTemplate
                      );
                    }
                  );
                  break;
                }
              }
            } else {
           //未中奖
            noDrawPosition('rotaryTable','prizeListData',this,(position)=>{
              self.startrotate(self.prizeListData[position].angle, () => {
                self.fulfillHandle("未中奖");
                self.isStartPlay = false;
              });
            })

            }
            this.restDrawCount = this.restDrawCount - 1;
            if (this.restDrawCount == 0) {
              this.dataStyle.signButtonStyle =
                this.dataStyle.goneIndexButtonSign;
              this.isDisabled = true;
              this.publicData.$emit("upDataCalendar");
              return;
            }
          });
        });
      } else {
        startDraw1(this.pointsPrize, (initDatas) => {
          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 == "1") {
            this.$toast("积分不足,不可抽奖");
            this.isStartPlay = false;
            return;
          }

          if (initDatas.data == "2") {
            // this.$toast("没有抽奖次数,无法抽奖");
            if (this.isshowDzhuanpan) {
              this.$toast('您没有抽奖机会了，点击"获得更多抽奖机会"吧');
            } else {
              this.$toast("没有抽奖次数,无法抽奖");
            }
            this.isStartPlay = false;
            return;
          }

          if (initDatas.data) {
            for (var i = 0; i < this.prizeListData.length; i++) {
              if (this.prizeListData[i].id == initDatas.data.prizeInfoId) {
                self.pIndex = i;
                console.log("中奖id", self.pIndex);
                // 拿到相应的角度调旋转接口
                self.startrotate(self.prizeListData[self.pIndex].angle, () => {
                  self.fulfillHandle(
                    self.prizeListData[self.pIndex],
                    initDatas.data
                  );
                  console.log("奖品id", self.pIndex);
                  this.isStartPlay = false;
                  this.publicData.$emit(
                    "isNotyFiceWinnerReorrd",
                    true,
                    this.isTemplate
                  );
                });
                break;
              }
            }
          } else {
              //未中奖
            noDrawPosition('rotaryTable','prizeListData',this,(position)=>{
              self.startrotate(self.prizeListData[position].angle, () => {
                self.fulfillHandle("未中奖");
                self.isStartPlay = false;
              });
            })
          }
          this.restDrawCount = this.restDrawCount - 1;
          if (this.restDrawCount == 0) {
            this.dataStyle.signButtonStyle = this.dataStyle.goneIndexButtonSign;
            this.isDisabled = true;
            this.publicData.$emit("upDataCalendar");
            return;
          }
        });
      }
    },

    //开始旋转 angle角度  complete回调成功函数
    startrotate(angle, complete) {
      // 相应的角度 + 满圈 只是在原角度多转了几圈 360 * 6
      // let rotate = 360 - (2160 * (this.rotNum + 1) + angle);
      let rotate = 2160 * (this.rotNum + 1) + 360 - angle;
      this.oTurntable.style.webkitTransform = "rotate(" + rotate + "deg)";
      clearTimeout(this.timer);
      // 设置5秒后停止旋转,处理接口返回的数据
      this.timer = setTimeout(() => {
        complete();
        this.rotNum++;
      }, this.time);
    },

    //得奖后的处理
    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();
                this.isStartPlay = false;
          }
        );
      } else {
        //中奖
        this.prizeResultData.datas = prizeData;
        PrizeResultPopComService.create(
          this.prizeResultData,
          initDatas,
          (submit) => {
            PrizeResultPopComService.close();
                this.isStartPlay = false;
          }
        );
      }

      // this.$emit('drawPrizeEmit', prizeName);
    },

    //自动换行
    autoWrap(str) {
      if (str.length > 5 && str.length <= 10) {
        str = str.substring(0, 5) + "<br/>" + str.substring(5, str.length);
      } else if (str.length > 10) {
        str = str.substring(0, 5) + "<br/>" + str.substring(5, 9) + "...";
      }
      return str;
    },
  },
};
</script>
<style lang="scss" scoped>
// .f-tac {
//   text-align: center;
// }
// .drow-chance-btnR {
//   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;
// }
.turnMaskBox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 120;
  background: rgba($color: #000000, $alpha: 0.7);
  background-size: 100%;
}
#turnBox {
  width: 100%;
  height: 7.14rem;
  position: relative;
  overflow: hidden;
  margin-top: 35%;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  .itemDiv {
    background: #2c3e50;
    z-index: 12;
  }
  .turnBox1 {
    background-size: 100% 100%;
    width: 7.14rem;
    height: 7.14rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .turnBox2 {
    background-size: 100% 100%;
    width: 6.24rem;
    height: 6.24rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
  }
  .turnBtn {
    position: absolute;
    width: 1.3rem;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-59%);
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 3;
  }
  ul {
    position: absolute;
    width: 6.31rem;
    height: 6.31rem;
    z-index: 1;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    li {
      position: absolute;
      box-sizing: border-box;
      color: #000;
      width: 100%;
      height: 100%;
      line-height: 20px;
      transform-origin: 50% 50%;
      text-align: center;

      img {
        // margin-top: 12%;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
      }
      .cicyleImg {
        position: absolute;
        top: 0;
        width: 0.4rem;
        height: 0.4rem;
        text-align: left;

        transform: translateX(1.05rem);
        // transform:rotate(45deg);
      }

      .prizeName {
        font-size: 0.2rem;
        margin-top: 0.28rem;
        color: #ffffff;
        word-break: break-all;
        word-wrap: break-word;
        display: flex;
        justify-content: center;
        p {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          width: 1.82rem;
        }
      }
      .prizeNameD {
        font-size: 0.2rem;
        margin-top: 0.8rem;
        color: #ffffff;
        word-break: break-all;
        word-wrap: break-word;
      }
      .prizeName1 {
        font-size: 0.2rem;
        margin-top: 0.28rem;
        color: #ec1341;
        word-break: break-all;
        word-wrap: break-word;
        display: flex;
        justify-content: center;
        p {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          width: 1.82rem;
        }
      }
      .prizeName2 {
        font-size: 0.2rem;
        margin-top: 1rem;
        word-break: break-all;
        word-wrap: break-word;
        display: flex;
        justify-content: center;
        p {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          width: 1.82rem;
        }
      }
      .prizeName3 {
        font-size: 0.2rem;
        margin-top: 1rem;
        color: #ffffff;

        word-break: break-all;
        word-wrap: break-word;
        display: flex;
        justify-content: center;
        p {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          width: 1.82rem;
        }
      }
    }
  }
}
.draw-plate {
  width: 19rem;
  height: 6.21rem;
  display: inline-block;
  background: url(http://img10.360buyimg.com/imgzone/jfs/t25612/159/110168808/10290/a6d78ac4/5b656346N0f1881bf.png)
    no-repeat;
  background-size: 100%;
  position: relative;
  top: 0.4rem;
  left: 0.9rem;
  z-index: 2;
  -o-transition: transform 6s;
  -ms-transition: transform 6s;
  -moz-transition: transform 6s;
  -webkit-transition: transform 6s;
  -webkit-transition: -webkit-transform 6s;
  transition: transform 6s;
}
.jf-btn {
  width: 3.76rem;
  height: 0.67rem;
  line-height: 0.67rem;
  background: url(//img10.360buyimg.com/imgzone/jfs/t25495/156/105700770/17968/55a17c17/5b65633eN63454ab4.png)
    no-repeat;
  -webkit-background-size: 100%;
  background-size: 100%;
  margin-left: 24.9%;
  text-align: center;
  color: #f23c3c;
}
.draw-chance .drow-chance-btnR {
  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;
}
</style>
