<template>
  <div class="box">
    <view :animation="animationData" class="turntable">
      <view v-for="(item, index) in reword" :key="index">
        <view
          class="sector"
          :style="
            'transform: rotate(' +
            (index * (360 / reword.length) - 0.5 * (360 / reword.length)) +
            'deg)'
          "
        >
          <view
            class="inner"
            :style="
              'transform: rotate(' +
              360 / reword.length +
              'deg);background-color:' +
              item.color
            "
          >
          </view>
        </view>
        <div
          :style="
            'transform: rotate(' + index * (360 / reword.length) + 'deg) ;'
          "
          class="cell"
        >
          {{ item.content }}
          <img :src="item.img" alt="" class="cell-img" />
        </div>
      </view>
    </view>
    <view class="line"></view>
    <div @click="onStart">点击旋转</div>
    <div @click="showPhoneMask=true">绑定手机号</div>
    <u-modal v-model="showPhoneMask" :show-cancel-button="true" :mask-click-able="false" @confirm="bindPhoneConfirm" @cancel="cancel" class="phone-mask">
      <div class="item">
        <span class="label"><span class="tips">*</span>手机号</span>
        <div class="value">
          <u-input type="tel" placeholder="请填写手机号" v-model="phone" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42"  :maxlength="11" :clearable="false" />
        </div>
      </div>
    </u-modal>
  </div>
</template>
<script>
export default {
  name: "AppLuckyDraw",
  appName: "幸运抽奖",
  data() {
    return {
      deg: 0, // 初始化角度
      duration: 1000, //动画时长
      awardNumber: 2, // 中奖区域 从1开始
      isStart: false, //防止多次触发动画
      animationData: {}, //动画对象
      reword: [
        {
          content: "111",
          color: "#456484",
          img: "https://cdn.cunwuyun.cn/img/circle-check.png",
        },
        {
          content: "222",
          color: "#456544",
          img: "https://cdn.cunwuyun.cn/img/circle-check.png",
        },
        {
          content: "333",
          color: "#784654",
          img: "https://cdn.cunwuyun.cn/img/circle-check.png",
        },
        {
          content: "444",
          color: "#527484",
          img: "https://cdn.cunwuyun.cn/img/circle-check.png",
        },
        {
          content: "555",
          color: "#527484",
          img: "https://cdn.cunwuyun.cn/img/circle-check.png",
        },
        {
          content: "666",
          color: "#527484",
          img: "https://cdn.cunwuyun.cn/img/circle-check.png",
        },
      ], //设置的奖项



      showPhoneMask: false,
      phone: '',
      activityId: '',
      friendId: '',
      activeInfo: {}
    };
  },
  onLoad(option) {
    // this.activityId = option.activityId
    // this.friendId = option.friendId || ''
    // this.getDetail()
  },
  onShow() {
    //创建对象，并将对象存放在data中以挂载在需要进行动画的元素之上
    var animation = uni.createAnimation({
      duration: this.duration,
      timingFunction: "ease-in-out", //旋转模式
    });
    this.animation = animation; //挂载在vue实例上以便渲染
  },
  methods: {
    //封装动画旋转整数圈的方法，只需接受（角度，时间）即可开始旋转动画
    rotate(deg, duration) {
      if (this.isStart) return; //防止用户多次点击动画
      this.isStart = true; //此时旋转开始，动画无法再次触发
      setTimeout(
        function () {
          //设置定时器在动画时间后方可再次触发转盘动画
          this.isStart = false;
        }.bind(this),
        duration
      ); //此时用的普通函数，存在this指向问题，需要改变this指向
      this.animation
        .rotate(deg)
        .step()
        .rotate((this.awardNumber - 1) * -(360 / this.reword.length))
        .step({
          duration: 0,
          timingFunction: "linear",
        });
      this.animationData = this.animation.export();
    },
    //开始旋转
    onStart() {
      //提前将要转的角度算好，再传入要转的时长即可转到自己想要的角度
      this.rotate( 360 + (360 - (this.awardNumber - 1) * (360 / this.reword.length)),this.duration);
    },


    bindPhoneConfirm() {
      if(!this.phone) {
        return this.$u.toast('请输入手机号')
      }
      let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (!regTel.test(this.phone)) {
        return this.$u.toast('请输入正确的手机号')
      }

      this.$http.post(`/appactivityinfo/bindPhone?phone=${this.phone}`).then((res) => {
        if (res.code == 0) {
          // this.getUserInfo()
          this.$u.toast('绑定成功')
        }
      })
    },
    cancel() {
      this.phone = ''
      this.showPhoneMask = false 
    },
    getDetail() {
      this.$http.post(`/app/appmarketingactivityinfo/queryDetailByIdWXCP?activityId=${this.activityId}&friendId=${this.friendId}`).then((res) => {
        if (res.code == 0) {
          this.activeInfo = {...res.data}
        }
      })
    },
    //抽奖
    raffle() {
      this.$http.post(`/app/appmarketingactivityinfo/raffle?activityId=${this.activityId}}`).then((res) => {
        if (res.code == 0) {
          this.awardNumber = res.data.awardNumber
          this.onStart()
        }
      })
    },
  },
  onShareAppMessage() {
    return {
      // title: this.info.title,
      // imageUrl: this.info.coverFile.url,
      path: `/pages/AppLuckyDraw/AppLuckyDraw?id=${''}&areaId=${''}`
    }
  }
};
</script>

<style lang='scss'>
.box {
  position: relative;
  width: 100%;
  height: 1000px;
  //background-color: blue;
  overflow: hidden;
}
.turntable {
  position: relative;
  margin: 200px auto;
  background: #fff;
  height: 500px;
  width: 500px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
}
.line {
  position: fixed;
  top: 35%;
  left: 50%;
  background-color: #000;
  height: 80px;
  width: 1px;
}
.cell {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
  left: 50%;
  margin-left: -25px;
  background-color: yellow;
  transform-origin: 25px 250px;
}
.cell-img {
  width: 80px;
  height: 80px;
  margin-top: 32px;
}
.sector {
  width: 500px;
  height: 500px;
  position: absolute;
  clip: rect(0 500px 500px 250px);
  overflow: hidden;
}
.inner {
  width: 100%;
  height: 100%;
  position: absolute;
  clip: rect(0 250px 500px 0);
  transform: rotate(60deg);
  border-radius: 50%;
}

.phone-mask {
  .item{
    width: calc(100% - 32px);
    padding: 20px 32px 32px 16px;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    font-size: 30px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666;
    line-height: 48px;
    box-sizing: border-box;
    margin: 0 0 0 16px;
    .color-999{
      color: #999;
    }
    .value{
      color: #333;
      .u-icon{
        margin-left: 16px;
      }
    }
    .tips{
      display: inline-block;
      width: 16px;
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #FF4466;
      line-height: 44px;
      margin-right: 4px;
    }
  }
}
</style>