
<template>
  <div class="roulette-container">
    <div class="roulette" ref="roulette">
      <div class="slice"></div>
    </div>
    <div id="spin-btn" @click="handleStart"></div>
    <div v-if="0" class="dot"></div>
    <div class="light"></div>
  </div>
</template>

<script>
export default {
  name: "XdRoulettePrize",
  data(){
    return {
      start: false,
      baseDegree: 0,
      targetDegree:null,
      totalSlices:8,//转盘共有8个扇形
      prizeIndex:null,//奖品位置
    }
  },
  created() {
    this.$nextTick(()=>{
      this.init()
    })
  },
  methods:{
    random(min, max){
      let Range = max - min;
      let Rand = Math.random();
      return (min + Math.round(Rand * Range));
    },

    /**
     * @description 获取奖品位置（1～this.totalSlices）
     * @return {Promise<unknown>}
     */
    getPrize(){
      return new Promise((resolve)=>{
        setTimeout(()=>{
          this.prizeIndex = this.random(1,this.totalSlices);
          resolve(this.prizeIndex - 1)
        },10)
      })
    },

    async handleStart(e){
      if(this.start) return;
      this.start = true;
      let rouletteEle = this.$refs['roulette'];

      // 指定奖品位置（度数）
      let targetDegree  =  await this.getPrize() * 360/this.totalSlices; // 这里假设奖品在转盘的180度位置

      // 至少旋转4-7圈以上
      let minQuanNum = this.random(6,8);

      // 计算转盘停止时需要旋转的角度
      let currentDegree = ( - this.targetDegree); // 当前角度，初始为0度

      let rotation = 360 * minQuanNum;
      this.baseDegree += (rotation + targetDegree  + currentDegree); // 转盘旋转基础角度

      // 计算旋转持续时间（毫秒）
      let duration = this.random(2,4) * 1000; // 假设转动持续时间为5秒

      rouletteEle.style.transition = 'transform ' + duration + 'ms cubic-bezier(0.4,0,0.1,1)';
      rouletteEle.style.transform = 'rotate(' + this.baseDegree  + 'deg)';


      setTimeout(()=>{
        this.start = false;
        this.targetDegree = targetDegree;
        console.log(`恭喜您中奖了！${targetDegree}:${this.prizeIndex}:${minQuanNum}`)
      },duration)
    },
    init(){

    }
  }
}
</script>

<style scoped lang="scss">
.roulette-container {
  position: relative;
  width: 300px;
  height: 300px;
  padding-bottom: 37px;
  margin: 50px auto;
  background-repeat: no-repeat;
  background-image: url('//img.jufubao.cn/assets/bg.png');
  background-position: top left;
  background-size: 100% 100%;
  box-sizing: content-box;
  display: flex;
  justify-content: center;
  align-items: center;

  & .dot {
    width: 10px;
    height: 10px;
    background: #c00;
    border-radius: 50%;
    z-index: 9999;
    position: relative;
  }

  .light {
    width: 296px;
    height: 296px;
    position: absolute;
    top:2px;
    left:2px;
    background: url("//img.jufubao.cn/assets/light-01.png") no-repeat top left;
    background-size: 100% 100%;
    z-index: 1000;
  }
}

.roulette {
  position: absolute;
  width: 300px;
  height: 300px;
  transform-origin: center;
}

.slice {
  position: absolute;
  width: 40%;
  height: 40%;
  transform: translate(-50%,-50%);
  left: 30%;
  top: 30%;
  background: url("//img.jufubao.cn/assets/arrow.png") no-repeat top left;
  background-size: 100% 100%;
}

.slice:nth-child(1) { transform: rotate(0deg); }


#spin-btn {
  position: absolute;
  width: 120px;
  height: 120px;
  background: url("//img.jufubao.cn/assets/start.png") no-repeat left top;
  background-size: 100% 100%;
  top: 27%;
  left: 30%;
  z-index: 9988;
  cursor: pointer;
}

</style>
