<template>
  <div id="app">
    <h4>剩余抽奖次数:{{ num }}</h4>
    <RoundTurntable
      ref="roundTurntable"
      :prizeData="prizeData"
      :rotateCircle="rotateCircle"
      :duringTime="duringTime"
      :turntableStyleOption="turntableStyleOption"
      @endRotation="endRotation"
      class="turntable"
    >
      <template slot="item" slot-scope="scope">
        <div class="turntable-name">{{ scope.item.level }}</div>
        <div class="turntable-img">
          <img :src="scope.item.picture" />
        </div>
      </template>
    </RoundTurntable>
    <div @click="startRotation" class="pointer"></div>
  </div>
</template>

<script>
import RoundTurntable from "./002index.vue";
export default {
  name: "App",
  components: {
    RoundTurntable
  },
  data() {
    return {
      // 转盘上的奖品数据
      prizeData: [
        {
          id: 1,
          level: "2000元京东券",
          picture:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/1.png"
        },
        {
          id: 2,
          level: "300元京东券",
          picture:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/7.png"
        },
        {
          id: 3,
          level: "50个比特币",
          picture:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/3.png"
        },
        {
          id: 4,
          level: "50元话费券",
          picture:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/4.png"
        },
        {
          id: 5,
          level: "100元话费券",
          picture:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/5.png"
        },
        {
          id: 6,
          level: "100个比特币",
          picture:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/6.png"
        },
        {
          id: 7,
          level: "100个比特币",
          picture:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/6.png"
        },
        {
          id: 8,
          level: "100个比特币",
          picture:
            "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/6.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: 2
    };
  },
  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() {
      // 提示中奖
      alert(`恭喜您获奖啦,您的奖品是;${this.prizeData[this.prizeIndex].level}`);
      // 解锁
      this.isLocking = false;
    },
    // 判断是否可以转动
    canBeRotated() {
      if (this.num <= 0) {
        alert("已经木有次数啦!");
        return false;
      }
      if (this.isLocking) {
        return false;
      }
      return true;
    }
  }
};
</script>

<style>
#app {
  text-align: center;

  padding: 20px;
}
.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;
}
.turntable-img {
  position: relative;
  /*要居中就要50% - 宽度 / 2*/
  left: calc(50% - 80px / 2);
  top: 60px;
  width: 60px;
  height: 60px;
}
.pointer {
  position: absolute;
  left: calc(50% - 46px);
  top: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background-image: url("https://s1.imagehub.cc/images/2023/01/04/fa02e4a071ccdc1ec7c00fabf3f925d1.th.png");
  background-size: contain;
  background-repeat: no-repeat;
}
img {
  display: inline-block;
  width: 60%;
  height: 60%;
}
</style>
