<template>
  <div class="prize-whell">
    <div class="prize-whell__content">
      <div class="prize-whell__content__wrap">
        <div class="prize-whell__content__wrap__lights">
          <span
            v-for="index in lightNum"
            :key="index"
            :style="`transform: rotate(${(360 / lightNum) * index}deg)`"
          ></span>
        </div>
        <div class="prize-whell__content__wrap__insert">
          <div class="prize-whell__pointer" @click.stop="beforeStart">
            <span>立即 抽奖</span>
          </div>
          <ul class="prize-whell__prizes" :style="angleStyle">
            <li
              class="prize-whell__prizes__item"
              v-for="(item, index) in prizes"
              :key="index"
              :style="`transform: rotate(${(360 / prizesLen) * index}deg) skewX(${
                (360 - 90 * prizesLen) / -prizesLen
              }deg);`"
            >
              <div
                class="prize-whell__prizes__item__wrap"
                :style="`transform: skewX(-${(360 - 90 * prizesLen) / -prizesLen}deg) rotate(${
                  360 / prizesLen - 90 - 360 / prizesLen / 2
                }deg);`"
              >
                <div class="item__text">
                  <p class="item__text__line-one">{{ item.name | formatLineOne }}</p>
                  <p class="item__text__line-two">{{ item.name | formatLineTwo }}</p>
                  <p class="item__text__line-three">{{ item.name | formatLineThree }}</p>
                </div>
                <img class="item__img" v-if="item.id && false" :src="item.icon || giftImg" alt />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import giftImg from '@/assets/images/lottery/gift.png'
import { shuffle, getRandomNum, getIsEven } from '@/utils/common'

export default {
  name: 'PrizeWhell',
  data() {
    return {
      giftImg,
      lightNum: 18, // 彩灯数量
      laps: 4, // 圈数
      time: 2000, // ms 动画时间
      timer: null, // 定时器
      winItem: null, // 中奖的item
      angleStyle: {}, // 旋转样式
      targetAngle: 0, // 目标角度
      counter: 1
    }
  },
  props: {
    info: {
      type: Array,
      default: () => []
    },
    loading: {
      default: false,
      type: Boolean
    },
    winId: {
      default: 0,
      type: Number
    }
  },
  computed: {
    prizes() {
      const list = Array.from(this.info)
      const len = list.length
      if (len >= 6) {
        list.push({ name: '谢谢参与', id: 0 })
        if (getIsEven(len)) {
          list.push({ name: '谢谢参与', id: 0 })
        }
        return list
      }
      for (let i = 6 - len; i > 0; i--) {
        list.push({ name: '谢谢参与', id: 0 })
      }
      return shuffle(list)
    },
    prizesLen() {
      return this.prizes.length
    }
  },
  filters: {
    formatLineOne(name) {
      return name.substr(0, 6)
    },
    formatLineTwo(name) {
      return name.substr(6, 4)
    },
    formatLineThree(name) {
      const text = name.length > 12 ? name.substr(10, 2) + '...' : name.substr(10, 2)
      return text
    }
  },
  watch: {
    loading(nVal) {
      if (nVal) {
        setTimeout(() => {
          this.start()
        }, 50)
      }
    },
    winId(val) {
      let index
      this.prizes.forEach((v, i) => {
        if (v.id === val) {
          index = i
        }
      })
      this.winItem = index
    }
  },
  mounted() {
    this.dataInit()
  },
  methods: {
    // 数据初始化
    dataInit() {
      this.prizes.forEach((v, i) => {
        if (v.id === this.winId) {
          this.winItem = i
        }
      })
    },
    // 点击开始抽奖
    beforeStart() {
      this.$emit('start')
    },
    // 开始逻辑
    start() {
      const { winItem: index, laps, prizesLen, time } = this
      /* 每个奖品的平均角度 */
      const itemAngle = 360 / prizesLen
      /* 指针开始角度 */
      const pointAngle = 90
      /* 至少要转圈数的总角度 */
      const lapsAngle = 360 * laps
      /* 到达中奖的那个块的最小角度 */
      const ItemAngleMin = index * itemAngle
      /* 指针偏移值 从最大和最小角度中取出一个随机值  */
      const randomAngle = -getRandomNum(0 + 1, itemAngle - 1)
      // const randomAngle = -(itemAngle/2);
      /* 单圈每个块该转的角度 */
      const singleAngle =
        ItemAngleMin - pointAngle < 0 ? Math.abs(ItemAngleMin - pointAngle) : 360 - (ItemAngleMin - pointAngle)
      /* 累积角度 */
      const lapsCounter = this.counter * lapsAngle
      /* 目标角度 */
      this.targetAngle = lapsCounter + singleAngle + randomAngle
      /* 计数器 */
      this.counter += 1
      /* 设置样式 */
      this.angleStyle = {
        transform: `rotate(${this.targetAngle}deg)`,
        transition: `${time}ms all`
      }
      /* 定时清除样式 */
      setTimeout(() => {
        this.$emit('end')
      }, time)
    }
  }
}
</script>

<style lang="less" scoped>
@wheelWidth: 100%;
@wheelHeight: 100%;
@pointWidth: 80px;
@pointHeight: 80px;

@keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes lights-flashing {
  0% {
    background: #fff;
    box-shadow: 0 0 5px 0 #fff;
  }
  100% {
    background: #ffde2b;
    box-shadow: 0 0 5px 0 #ffde2b;
  }
}
.prize-whell {
  width: @wheelWidth;
  height: 0;
  padding-top: @wheelHeight;
  position: relative;
  /* 布局样式 */
  &__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* 外环 */
    &__wrap {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #fa3e3f;
      box-shadow: 0 0 5px 2px #ed3a3a, 0 0 25px 6px #fa3e3f, inset 0px 0px 7px -2px rgba(255, 255, 255, 0.4),
        inset 0px 0px 10px -1px rgba(255, 255, 255, 0.2);
      padding: 18px;
      position: relative;
      /* 内环 */
      &__insert {
        box-shadow: inset 0px 0px 3px 1px #ec3327;
        background-color: #ff2b00;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        position: relative;
        padding: 2px;
        overflow: hidden;
      }
      /* 彩灯 */
      &__lights {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: transparent;
        animation: rotate 5s linear infinite;
        > span {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: 10px;
          height: 100%;
          border-radius: 50%;
          transform-origin: center center;
          &::before {
            content: '';
            position: absolute;
            top: 4px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 10px;
            height: 10px;
            border-radius: 50%;
          }
          &:nth-of-type(even):before {
            background: #fff;
            animation: lights-flashing 1s linear infinite;
          }
          &:nth-of-type(odd):before {
            background: #d7a945;
            animation: lights-flashing 1s linear reverse infinite;
          }
        }
      }
    }
  }
  /* 奖品样式 */
  &__prizes {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    &__item {
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 50%;
      transform-origin: 100% 100%;
      &:nth-child(even) {
        background-color: #fdf3aa;
      }
      &:nth-child(odd) {
        background-color: #f1d5b0;
      }
      &__wrap {
        color: #ff2b00;
        width: 200%;
        height: 200%;
        text-align: center;
        // padding: 10px 50% 130%;
        padding: 20px 55% 130%;
        line-height: 0;
        /* 文字 */
        .item__text {
          font-size: 14px;
          height: 52px;
          font-weight: 700;
          line-height: 14px;
          width: 100%;
          padding: 0 15%;

          display: flex;
          flex-direction: column;
          justify-content: center;
          > p {
            font-weight: 700;
          }
        }
        .item__img {
          display: block;
          width: 40px;
          height: 40px;
          margin: 0px auto 0;
        }
      }
    }
  }
  /* 指针样式 */
  &__pointer {
    position: absolute;
    z-index: 2;
    width: @pointWidth;
    height: @pointHeight;
    line-height: @pointHeight;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    border: 5px solid #ff8a00;
    transform: translate(-50%, -50%);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.9) 100%) no-repeat 100% 0,
      radial-gradient(circle, #fee47b 35%, rgb(252, 193, 88) 65%) no-repeat 100% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:after {
      content: '';
      position: absolute;
      left: 50%;
      top: -34px;
      border-color: transparent;
      border-bottom-color: #ff8a00;
      border-style: solid;
      border-width: 16px 8px;
      transform: translateX(-50%);
    }

    > span {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      color: #fa4445;
      line-height: 24px;
      word-break: keep-all;
    }
  }
}
</style>
