<template>
  <div
    class="hdzxtRotaryTablePopC"
    :style="styleData.allStyle"
    ref="hdzxtRotaryTablePop"
    @click.stop="styleClick('click', 'hdzxtRotaryTablePop')"
    @mousemove.stop="styleClick('mousemove', 'hdzxtRotaryTablePop')"
    @mouseout.stop="styleClick('mouseout')"
  >

    <div class="choujiang" :style="styleDataNew.choujiang">
      <div :style="styleDataNew.restDrawCountStyle" v-if="isShowDrawCount" ref="restDrawCountStyle">剩余可抽奖机会：{{ restDrawCount }}次</div>
      <div v-if="isDisabled" :style="styleDataNew.signButtonStyle"></div>

      <div v-else v-lz-click="'12'" :style="styleDataNew.signButtonStyle1" @click="btnClick()"></div>

      <div v-if="isShowRedCicle">
        <div v-if="restDrawCount < 10" :style="styleDataNew.restDrawCount1">{{ restDrawCount }}</div>
        <div v-else-if="restDrawCount > 10 && restDrawCount < 100" :style="styleDataNew.restDrawCount2">{{ restDrawCount }}</div>
        <div v-else :style="styleDataNew.restDrawCount3">{{ restDrawCount }}</div>
      </div>
    </div>

    <div @click="closeClick()" v-show="isShowRotary" :style="styleDataNew.turnMaskBox" class="turnMaskBox">
      <div id="turnBox" @click.stop="" :style="styleDataNew.turnBox">
        <div
          :style="styleDataNew.turnBox1"
          ref="turnBox1"
          @click.stop="styleClick('click', 'rotaryTable2')"
          @mousemove.stop="styleClick('mousemove', 'rotaryTable2')"
          @mouseout.stop="styleClick('mouseout')"
        >
          <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="styleDataNew.turnUl" ref="turnUl">
            <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 :style="styleDataNew.prizeName" v-if="item.prizeType">
                <!-- <div v-if="item.prizeType == 1">京豆</div>
                <div v-if="item.prizeType == 2">优惠券</div>
                <div v-if="item.prizeType == 4">积分</div>
                <div v-if="item.prizeType == 5">专享价</div>
                <div v-if="item.prizeType == 6">红包</div>
                <div v-if="item.prizeType == 8">京东E卡</div>
                <div v-if="item.prizeType == 9">PLUS会员卡</div>
                <div v-if="item.prizeType == 10">爱奇艺会员卡</div> -->
                <div>
                  <div
                    style="
                      width: 1.8rem;
                      margin: 0 auto;
                      overflow: hidden;
                      white-space: nowrap;
                      -o-text-overflow: ellipsis;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ item.prizeName }}
                  </div>
                  <div class=""><img :style="styleDataNew.img" :src="item[keyData.showImg]" /></div>
                </div>
                <!-- <div v-else :style="styleDataNew.prizeNameChild">
                  {{ item.beanNum }}
                </div> -->
              </div>
              <div class="prizeName1 prizeName2" :style="styleDataNew.prizeName1" v-else>{{ item[keyData.prizeName] }}</div>
            </li>
          </ul>

          <img v-if="!isStartPlay && !isWebClick" :src="styleDataNew.turnBtn.imageUrl" alt="" v-lz-click="'12'" @click="startPlay" :style="styleDataNew.turnBtn" class="turnBtn" />
          <img v-else :src="styleDataNew.turnBtn.imageUrl" :style="styleDataNew.turnBtn" alt="" class="turnBtn" />
        </div>
      </div>
    </div>
    <!-- <div
      class="restDrawCount"
      :style="styleDataNew.restDrawCountStyle"
      v-if="bottomDrawTimes"
      ref="restDrawCountStyle"
    >
      当前还有
      <span :style="styleDataNew.restDrawCountStyle.restDrawCountSpanStyle">{{
        restDrawCount
      }}</span
      >次 抽奖机会
    </div>
    <div class="f-tac draw-chance" style="margin-top: 0.2rem">
      <div
        class="f-ib drow-chance-btn"
        :style="styleDataNew.drowChanceBtn"
        @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 styleJson from './rotaryTable.json';
import {
  // PrizeResultPopComService,
  // NoPrizeResultPopComService,
  TaskPopComService,
  SharePopComService,
  ShopPopComService,
  FollowSkuPopComService
} from '../../../util/comCreate.js';
import { PrizeResultPopComService, NoPrizeResultPopComService } from '../../../util/hdzxtcomCreate.js';
import apis from '../../../util/apis1.js';
let { drawPrize, startDraw, jiugonggeRequest } = apis;

export default {
  props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData', 'isWebClick', 'modifyContent'],
  components: {
    buttonCom,
    dialogMore
  },
  data() {
    return {
      isShowRedCicle: false, //是否显示红点
      isShowRotary: false, //是否显示转盘
      isShowButton: true, //是否显示抽奖按钮
      isShowPaoMadengButton: false, //是否显示跑马灯
      isShowPaoMadengButton1: false, //是否显示跑马灯
      isShowEndButton: false,
      isshowDzhuanpan: false,
      bottomDrawTimes: false, //底部抽奖次数
      isDrawNoCountPrompt: false, //没有抽奖次数点击丑啊经toast是否提示
      pIndex: 0, // 中奖物品的下标
      rotNum: 0, // 旋转圈数基数
      time: 10000, // 旋转时间
      timer: null, // 定时器
      oTurntable: '', // 旋转圆盘背景图
      type: 0, // 0 图片 1 汉字
      prizeListData: [],
      isShowDrawCount: false, //是否显示抽次数
      isStartPlay: false, //是否可以点击抽奖
      hideCircle: false, //是否隐藏圆点图片
      showShare: false, //
      showFoll: false,
      showBuy: false,
      restDrawCount: 0,
      signTitle: '立即抽奖',
      isDisabled: true,
      task: {}, //任务列表
      styleDataNew: {},
      styleDataOld: {},
      isCustomSwitching: 3,
      acStatus:sessionStorage.getItem('actStatus'),//活动状态
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: 'showImg',
          prizeName: 'prizeName',
          prizeType: 'prizeType',
          priceInfo: 'priceInfo',
          discountType: 'discountType',
          couponType: 'couponType'
        }
      }
    };
  },

  watch: {
    styleData: {
      handler(val) {
        console.log('val', val);
        this.styleDataNew = val;
        this.$forceUpdate();
      },
      deep: true
    }
  },

  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));

    this.isShowPaoMadengButton = this.datas.isShowPaoMadengButton == 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;
    this.isShowRedCicle = this.datas.isShowRedCicle == true ? true : false;
    this.isDrawNoCountPrompt = this.datas.isDrawNoCountPrompt == 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.styleDataNew = this.styleData;
    console.log(this.styleData, 'this.styleData');
    // this.dataStyle = this.styleData.dataStyleAll;

    // this.styleDataNew.signButtonStyle = this.styleDataNew.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);
    }
    //b端点击唤起转盘
    this.publicData.$on('clickRotaryTable', (isCustomSwitching, refName) => {
      if (isCustomSwitching == 1) {
        this.isShowRotary = true;
        this.isCustomSwitching = 1;
        this.styleClick('click', refName);
      } else {
        this.isCustomSwitching = 3;
        this.isShowRotary = false;
      }
    });

    //监听是否需要重新请求接口
    this.publicData.$on('notifyCallBack', ress => {
      if (ress == 'updata') {
        this.initData();
      }
    });
    //如果父组件传递过来的样式数据则使用样式数据否则使用默认数据
    // if (this.styleDataNew && JSON.stringify(this.styleDataNew) != "{}") {
    //   console.log(333);
    //   this.styleDataNew = this.styleData; //父组件传递过来的样式数据
    // } else {
    //   this.styleDataNew = styleJson; //默认数据
    //   console.log(123333333, styleJson);
    // }
  },

  mounted() {
    this.initData();
    if (this.isWebClick) {
      this.isStartPlay = true;
    }
  },

  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleDataNew,
          styleDataOld: this.styleDataOld,
          c_this: this,
          isCustomSwitching: this.isCustomSwitching
        };
        this.$emit('opertaionCom', type, byValue);
      }
    },
    async initData() {
      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];
                }
              }
            }
          }
        } else {
          this.prizeListData = [
            {
              position: 1,
              showImg: '//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png',
              angle: 0,
              prizeName: '1'
            },
            {
              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.styleDataNew.signButtonStyle =
          //   this.styleDataNew.goneIndexButtonSign;
          if (this.isDrawNoCountPrompt) {
            this.isDisabled = false;
          } else {
            this.isDisabled = true;
          }
          return;
        } else {
          // this.styleDataNew.signButtonStyle = this.styleDataNew.originButton;
          this.isDisabled = false;
          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;
            }
            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;
            }
          });
        }

        //请求接口
        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.styleDataNew.signButtonStyle =
            //   this.styleDataNew.goneIndexButtonSign;
            if (this.isDrawNoCountPrompt) {
              this.isDisabled = false;
            } else {
              this.isDisabled = true;
            }
            return;
          } else {
            // this.styleDataNew.signButtonStyle = this.styleDataNew.originButton;
            //如果是从游戏页面返回并且抽奖次数大于0直接呼起抽奖大转盘

            this.isDisabled = false;
            if ((sessionStorage.getItem('gameDraw') == true || sessionStorage.getItem('gameDraw') == 'true') && this.restDrawCount > 0) {
              this.btnClick();
            }
            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, 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();
      });
    },
    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();
      });
    },

    btnClick() {
      console.log('ascvvvvvvvvv');
      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.restDrawCount == 0) {
        this.$toast('当前可抽奖次数为0，请通过游戏获得更多抽奖机会~');
        return;
      }
      console.log(this.isDisabled, 'kjaslkjdalksjdlkwsj');
      if (!this.isDisabled) {
        this.isShowRotary = true;
      }
    },
    jjj() {
      this.isShowRotary = true;
    },
    closeClick() {
      // this.status = 2;
      // this.styleClick("click", "rotaryTable");
      if (!this.isWebClick) {
        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() {
      const self = this;
      let actStatus = sessionStorage.getItem('actStatus');
      if (actStatus == 2) {
        this.$toast('活动已结束');
        return;
      }
      if (actStatus == 1) {
        this.$toast('活动未开始');
        return;
      }
      if (this.restDrawCount == 0) {
        this.$toast('没有抽奖次数,无法抽奖');
        return;
      }
      // console.log('1231237')
      this.isStartPlay = true;

      if (this.isTemplate == true) {
        // 拿到相应的角度调旋转接口
        //未中奖
        self.startrotate(self.prizeListData[7].angle, () => {
          self.fulfillHandle('未中奖');
        });
        return;
      }
      startDraw(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.resp_code==1000){
          this.isStartPlay = false;
          this.isShowRotary = false
          this.restDrawCount = 0;
          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 {
          //未中奖
          for (var i = 0; i < self.prizeListData.length; i++) {
            if (!self.prizeListData[i].prizeType) {
              self.startrotate(self.prizeListData[i].angle, () => {
                self.fulfillHandle('未中奖');
                this.isStartPlay = false;
              });
            }
          }
        }
        this.restDrawCount = this.restDrawCount - 1;
        if (this.restDrawCount == 0) {
          //   this.styleDataNew.signButtonStyle =
          //     this.styleDataNew.goneIndexButtonSign;
          // this.isDisabled = true;
          this.publicData.$emit('upDataCalendar');
          this.isStartPlay = false;
          return;
        }
      });
    },

    //开始旋转 angle角度  complete回调成功函数
    startrotate(angle, complete) {
      console.log(angle, 'angle');
      // 相应的角度 + 满圈 只是在原角度多转了几圈 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;

      console.log(initDatas);
      var activityType = sessionStorage.getItem('activityType');
      this.isShowRotary = this.datas.isShowRotary == true ? true : false;

      if (prizeData == '未中奖') {
        NoPrizeResultPopComService.create(this.styleData, submit => {
          NoPrizeResultPopComService.close();
        });
      } else {
        //中奖
        this.prizeResultData.datas = prizeData;
        PrizeResultPopComService.create(this.prizeResultData, initDatas, this.styleData, submit => {
          PrizeResultPopComService.close();
          this.publicData.$emit('showPrizePreview', null, true);
        });
      }
      this.$toast.clear()
      // 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>
ul {
  /*组合选择器*/
  list-style: none; /*清除列表默认样式*/
  padding: 0; /*清除padding*/
  margin: 0;
}
li {
  float: left;
}
.f-tac {
  text-align: center;
}
.drow-chance-btn {
  position: relative;
  overflow: hidden;
  line-height: 0.72rem;
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
}
.turnMaskBox {
  // position: absolute;
  position: fixed;
  width: 7.5rem;
  height: 100%;
  top: 0;
  z-index: 120;
  background: rgba($color: #000000, $alpha: 0.7);
}
.turnMaskBox1 {
  position: absolute;
  width: 7.5rem;
  height: 100%;
  top: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.7);
}
#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 {
    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.5rem;
        color: #ffffff;
        word-break: break-all;
        word-wrap: break-word;
      }
      .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;
      }
      .prizeName2 {
        font-size: 0.2rem;
        margin-top: 1rem;
        word-break: break-all;
        word-wrap: break-word;
      }
      .prizeName3 {
        font-size: 0.2rem;
        margin-top: 1rem;
        color: #ffffff;

        word-break: break-all;
        word-wrap: break-word;
      }
    }
  }
}
.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;
  z-index: 2;
}
</style>
