<template>
  <view class="content minHeight100">
      <view style="width:300px;margin:50px auto">
          <view class="flex margin-bottom-2x">
              <view class="red margin-right-1x">剩余抽奖次数:{{ num }}</view>
              <button class="color-btn bg-cyan anim-but-5-cyan" @click="startRotation">抽奖</button>
          </view>
     
          <view class="turntableBox">
              <image  src="@/static/images/pointer.png" mode="aspectFill"
                  class="RoundTurntableImg" />
              <RoundTurntable ref="roundTurntable" :prizeData="prizeData" :rotateCircle="rotateCircle"
                  :duringTime="duringTime" :turntableStyleOption="turntableStyleOption" @endRotation="endRotation"
                  class="turntable">
                  <template #item="scope">
                      <view class="turntable-name">{{ scope.item.level }}</view>
                      <view class="turntable-img">
                          <image :src="scope.item.picture" mode="aspectFill" />
                      </view>
                  </template>
              </RoundTurntable>
          </view>
      
      </view>
  </view>
</template>

<script>
  import RoundTurntable from './components/RoundTurntable';
  export default {
      name: 'lattice',
      components: {
          RoundTurntable
      },
      data() {
          return {
              // 转盘上的奖品数据
              prizeData: [{
                      id: 1,
                      level: '2000元京东券',
                      picture: require('../../assets/images/gift.png')
                  },
                  {
                      id: 2,
                      level: '300元京东券',
                      picture: require('../../assets/images/gift.png')
                  },
                  {
                      id: 3,
                      level: '加班一天',
                      picture: require('../../assets/images/gift.png')
                  },
                  {
                      id: 4,
                      level: '50元话费券',
                      picture: require('../../assets/images/gift.png')
                  },
                  {
                      id: 5,
                      level: '100元话费券',
                      picture: require('../../assets/images/gift.png')
                  },
                  {
                      id: 6,
                      level: '50元现金',
                      picture: require('../../assets/images/gift.png')
                  },
                  {
                      id: 7,
                      level: '50元现金',
                      picture: require('../../assets/images/gift.png')
                  },
                  {
                      id: 8,
                      level: '50元现金',
                      picture: require('../../assets/images/gift.png')
                  }
              ],
              // 转动的圈数
              rotateCircle: 6,
              // 转动需要持续的时间（s）
              duringTime: 4.5,
              // 转盘样式的选项
              turntableStyleOption: {
                  // 背景色
                  prizeBgColors: ['#ffe0d6', '#fffdfe', '#ffe0d6', '#fffdfe', '#ffe0d6', '#fffdfe', '#ffe0d6',
                      '#fffdfe'
                  ],
                  // 转盘的外边框颜色
                  borderColor: '#fede87'
              },
              // 中奖的奖品的index
              prizeIndex: -1,
              // 用来锁定转盘，避免同时多次点击转动
              isLocking: false,
              // 剩余抽奖次数
              num: 5
          };
      },
      methods: {
          // 开始抽奖
          startRotation() {
              // 如果还不可以转动
              if (!this.canBeRotated()) {
                  return false;
              }
              // 开始转动
              // 先上锁
              this.isLocking = true;
              // 设置在哪里停下，应该与后台交互，这里随机抽取0~5
              const index = Math.floor(Math.random() * this.prizeData.length);
              // 成功后次数减少一次
              this.num--;
              this.prizeIndex = index;
              // 告诉子组件，开始转动了
              this.$refs.roundTurntable.rotate(index);
          },
          // 已经转动完转盘触发的函数
          endRotation() {
              // 提示中奖
              // 解锁
              this.isLocking = false;
          },
          // 判断是否可以转动
          canBeRotated() {
              if (this.num <= 0) {
                return false;
              }
              if (this.isLocking) {
                  return false;
              }
              return true;
          }
      }
  };
</script>

<style lang="scss">
  .turntableBox {
      position: relative;
      width: 300px;
      height: 300px;
      .RoundTurntableImg {
          width: 50px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 10;
          cursor: pointer;
      }
  }

  .turntable {
      position: absolute;
      //   left: calc(50% - 145px);
      //   top: calc(50% - -10px);
      width: 300px;
      height: 300px;
  }

  .turntable-name {
      /*background: pink;*/
      position: absolute;
      left: 10px;
      top: 20px;
      width: calc(100% - 20px);
      font-size: 14px;
      text-align: center;
      //   color: #fff;
      color: aqua;
  }

  .turntable-img {
      position: relative;
      /*要居中就要50% - 宽度 / 2*/
      left: calc(70% - 100px / 2);
      top: 40px;
      width: 60px;
      height: 60px;

      img {
          display: inline-block;
          width: 60%;
          height: 60%;
      }
  }

</style>
