<template>
  <div class="luck_draw">
    <!-- 十二宫格奖品框 -->
    <div class="first">
      <div class="second">
        <div class="third">
          <!-- 奖品列表 -->
          <ul class="award_list" v-if="awardList.length > 0">
            <li
              v-for="(item, index) in awardList"
              :key="index"
              :class="{ active: currentIndex == index, isbig: !item.name }"
            >
              <div class="award_center">
                <img :src="item.img" alt="" />
                <span>{{ item.name }}</span>
              </div>
            </li>
            <!-- 立即抽奖 -->
            <li class="btn_box" @click="toDraw">
              <img
                src="@/assets/image/hb/luckDraw/button.png"
                class="button_big"
                alt=""
              />
              <!-- <div class="btn">
                <div @click="toOne">单抽</div>
                <div @click="toTen">十连</div>
              </div> -->
            </li>
            <!-- 立即抽奖阴影 -->
            <li class="border"></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LuckDraw",
  components: {},
  data() {
    return {
      currentIndex: -1, // 当前奖品(动效)
      drawTimer: null, // 定时器 快速
      canDraw: true, // 是否可以抽奖(防抖)
      timerSpeed: 100, // 定时器速度
      randomIndex: null, // 随机下标开始减速
      loop: 0, // 循环次数
    };
  },
  props: {
    // 十二宫格奖品列表
    awardList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  computed: {
    // 获取到的折扣券
    myAwardList() {
      return this.$store.state.hb.myAwardList;
    },
  },
  watch: {
    myAwardList: {
      handler: function (newValue) {},
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {
    const { drawTimer } = this;
    clearTimeout(drawTimer);
  },
  methods: {
    // 单抽动画
    toDraw() {
      if (!this.canDraw) {
        return;
      }
      this.canDraw = false;
      // 1. 取数据
      this.$emit("toDraw");
      // 2. 动效
      this.animationDraw();
    },

    // 立即抽奖动效(中奖前的动效)
    animationDraw() {
      // 1. 快速过一圈
      this.drawTimer = setTimeout(() => {
        this.currentIndex = this.currentIndex + 1;
        // 1.1 重复圈数
        if (this.currentIndex >= this.awardList.length) {
          this.currentIndex = 0;
          this.loop = this.loop + 1;
        }
        // 1.3 拿到奖品
        if (this.myAwardList && this.myAwardList.length) {
          let index = null;
          // 1.3.1 找到奖品在页面上显示的下标
          this.awardList.map((awardListEle, awardListIndex) => {
            const { myAwardList, currentAward } = this;
            if (awardListEle.id == myAwardList[0].id) {
              index = awardListIndex;
              return;
            }
          });

          // 1.3.2 如果下标在 index的前 5-3 位, 开始减速
          if (this.randomIndex == null) {
            this.randomIndex = parseInt(Math.random() * (5 - 3 + 1) + 3);
          }
          const len = this.awardList.length - 1;
          const _index =
            index - this.randomIndex < 0
              ? len - (this.randomIndex - index)
              : index - this.randomIndex;

          // 1.3.4 开始最小速度
          if (this.currentIndex === _index && this.loop >= 1) {
            this.timerSpeed = this.timerSpeed + 500;
          }

          // 1.3.5如果下标相同, 停止
          if (
            this.currentIndex == index &&
            this.loop >= 1 &&
            this.timerSpeed > 100
          ) {
            this.loop = 0;
            this.timerSpeed = 100;
            clearTimeout(this.drawTimer);
            setTimeout(() => {
              this.$emit("onShowDialog", "luckDrawAward");
            }, 1000);
            return;
          }
        }

        // 2. 再次启动定时器
        this.animationDraw();
      }, this.timerSpeed);
    },
  },
};
</script>

<style lang='less'>
.luck_draw {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 26 / @rem;
  position: relative;

  .first {
    width: 100%;
    height: 100%;
    padding: 4%;
    box-sizing: border-box;
    border-radius: 6%;
    background-color: #fe777d;
  }
  .second {
    width: 100%;
    height: 100%;
    padding: 1.5%;
    box-sizing: border-box;
    border-radius: 5%;
    background-color: #ff4a4c;
  }
  .third {
    width: 100%;
    height: 100%;
    padding-top: 1.2%;
    padding-left: 1.2%;
    padding-right: 1%;
    padding-bottom: 0.5%;
    box-sizing: border-box;
    border-radius: 5%;
    background-color: #ff5454;
    // background-color: #ff625b;
  }
  // 奖品列表
  .award_list {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-left: 0.5%;
    position: relative;

    li {
      width: 24%;
      height: 24%;
      position: absolute;
      border-radius: 20%;
      background-color: #fff;
      color: #e25b63;

      &.active {
        background-image: linear-gradient(#ffece0, #ff768a);
        // background-image: linear-gradient(160deg, #fedbb6 0%, #fdc68a 75%);
      }

      img {
        width: 50%;
        display: block;
        margin: 10% auto 1%;
      }

      // 左->右
      &:nth-child(1) {
        left: 0;
      }
      &:nth-child(2) {
        left: 25%;
      }
      &:nth-child(3) {
        left: 50%;
      }
      &:nth-child(4) {
        left: 75%;
      }
      // 右->下
      &:nth-child(5) {
        top: 25%;
        left: 75%;
      }
      &:nth-child(6) {
        top: 50%;
        left: 75%;
      }
      &:nth-child(7) {
        top: 75%;
        left: 75%;
      }
      // 右下->左下
      &:nth-child(8) {
        top: 75%;
        left: 50%;
      }
      &:nth-child(9) {
        top: 75%;
        left: 25%;
      }
      &:nth-child(10) {
        top: 75%;
        left: 0%;
      }
      // 左下->左上
      &:nth-child(11) {
        top: 50%;
        left: 0%;
      }
      &:nth-child(12) {
        top: 25%;
        left: 0%;
      }

      //   &.isbig {
      //     img {
      //       width: 110%;
      //       margin-top: -22%;
      //       margin-left: -5%;
      //     }
      //   }
    }

    // 立即抽奖
    .btn_box {
      width: 48%;
      height: 46%;
      top: 25.5%;
      left: 25.5%;
      border-radius: 10%;
      z-index: 2;
      background-image: linear-gradient(160deg, #ffa3a7 0%, #ff2848 135%);

      img {
        width: 65%;
        margin-top: 22%;
      }

      .btn {
        display: flex;

        div {
          width: 40%;
          height: 50 / @rem;
          line-height: 50 / @rem;
          margin: 20 / @rem 10 / @rem;
          float: left;
          flex-grow: 1;
          font-size: 28 / @rem;
          border-radius: 25 / @rem;
          background-color: #ff3a50;
          color: #fff;
        }
      }
    }
    // 立即抽奖阴影
    .border {
      width: 48%;
      height: 48%;
      top: 25.5%;
      left: 25.5%;
      border-radius: 8%;
      background-color: #fc3347;
      z-index: 1;
    }
  }

  // 单抽和十连确认框
  .confirm_box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 6%;
    z-index: 3;
    color: #e66f51;

    .confirm_box_content {
      width: 70%;
      height: 70%;
      margin: 15%;
      padding: 20 / @rem;
      box-sizing: border-box;
      //   background-color: #fff;
      background-image: linear-gradient(160deg, #fedbb6 0%, #fdc68a 75%);
      border-radius: 6%;

      .title {
        font-size: 36 / @rem;
        font-weight: bold;
        margin-bottom: 100 / @rem;
      }

      span {
        color: #ff3a50;
      }

      .tips {
        height: 50 / @rem;
        line-height: 50 / @rem;
      }

      .btn_box {
        display: flex;

        .left,
        .right {
          height: 60 / @rem;
          line-height: 60 / @rem;
          margin: 120 / @rem 20 / @rem;
          border-radius: 25 / @rem;
          flex-grow: 1;
          background-color: #fff;
        }
      }
    }
  }
}

/**横屏 */
@media screen and (orientation: landscape),
  only screen and (min-device-width: 768px) and (min-device-height: 768px) and (orientation: portrait) {
  .luck_draw {
    font-size: 13 / @rem;

    // 奖品列表
    .award_list {
      // 立即抽奖
      .btn_box {
        .btn {
          div {
            height: 25 / @rem;
            line-height: 25 / @rem;
            margin: 10 / @rem 5 / @rem;
            font-size: 14 / @rem;
            border-radius: 12.5 / @rem;
          }
        }
      }
    }

    // 单抽和十连确认框
    .confirm_box {
      .confirm_box_content {
        padding: 10 / @rem;

        .title {
          font-size: 18 / @rem;
          margin-bottom: 50 / @rem;
        }

        .tips {
          height: 25 / @rem;
          line-height: 25 / @rem;
        }

        .btn_box {
          .left,
          .right {
            height: 30 / @rem;
            line-height: 30 / @rem;
            margin: 60 / @rem 10 / @rem;
            border-radius: 15 / @rem;
          }
        }
      }
    }
  }
}
</style>