<template>
  <section class="grid-table">
    <div class="grid-table__lantern">
      <span v-for="item in 26" :key="item"></span>
    </div>
    <div class="grid-table__prize">
      <div
        class="grid-table__prize__item"
        v-for="(item, index) in giftList"
        :key="index"
        :class="{ active: activeItem === index }"
      >
        <div class="item-box" v-if="index !== 4">
          <template v-if="parseInt(item.id, 10) !== 0">
            <img :src="img" alt />
            <p>{{ item.name }}</p>
          </template>
          <p v-else>谢谢参与</p>
        </div>
        <div class="item-btn" v-else @click="lottery">
          <span>立即抽奖</span>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import { shuffle } from '@/utils/common'
import img from '@/assets/images/lottery/prize.png'
export default {
  name: 'GridTable',
  data() {
    return {
      img,
      activeItem: 5,
      giftList: [],
      transitionList: [0, 1, 2, 5, 8, 7, 6, 3],
      timer: null,
      roundOne: 3,
      winItem: null
    }
  },
  props: {
    loading: {
      default: false,
      type: Boolean
    },
    winId: {
      default: 0,
      type: Number
    }
  },
  computed: {
    ...mapGetters(['lotteryInfo']),
    state() {
      return this.lotteryInfo.status
    },
    config() {
      const list =
        typeof this.lotteryInfo.prizeConfigs === 'object'
          ? Object.values(this.lotteryInfo.prizeConfigs)
          : this.lotteryInfo.prizeConfigs
      return list
    },
    times() {
      return this.lotteryInfo.userTimes
    }
  },
  watch: {
    config(nval, oval) {
      if (JSON.stringify(nval) !== JSON.stringify(oval)) {
        this.computList(nval)
      }
    },
    loading(nVal) {
      if (nVal) {
        this.runGrid(60)
      }
    },
    winId(val) {
      let index
      this.giftList.forEach((v, i) => {
        if (v.id === val) {
          index = i
        }
      })
      this.winItem = index
    }
  },
  mounted() {
    this.computList(this.config)
    this.dataInit()
  },
  methods: {
    // 数据初始化
    dataInit() {
      this.giftList.forEach((v, i) => {
        if (v.id === this.winId) {
          this.winItem = i
        }
      })
    },
    // 点击触发
    lottery() {
      this.$emit('start')
    },
    // 动画运行
    runGrid(speed) {
      this.timer && clearInterval(this.timer)
      let roundOne = 0
      let s_position = this.transitionList.indexOf(this.activeItem)
      this.timer = setInterval(() => {
        s_position++
        roundOne++
        if (s_position > 7) {
          s_position = 0
        }
        this.activeItem = this.transitionList[s_position]
        if (roundOne === this.roundOne * this.transitionList.length) {
          this.runGrid(speed * 2)
        }
        // if (speed > 220 && this.activeItem == this.winItem && roundOne>(this.roundOne * this.transitionList.length)/2) {
        if (speed > 220 && parseInt(this.activeItem, 10) === parseInt(this.winItem, 10)) {
          clearInterval(this.timer)
          this.$emit('end')
        }
      }, speed)
    },
    // 计算奖项的数组
    computList(config) {
      const levelList = []
      config.forEach(item => {
        levelList.push({ id: item.id, levelAlias: item.prizeAlias || '', name: item.name })
      })
      for (let i = 9 - levelList.length; i > 0; i--) {
        levelList.push({ id: 0 })
      }
      this.shuffleLevelList(levelList)
    },
    // 把奖项从第五个格子筛选出来
    shuffleLevelList(arr) {
      // 洗牌
      const result = shuffle(arr)
      if (result[4].id !== 0) {
        this.shuffleLevelList(arr)
        return
      } else {
        result.splice(4, 1, { id: -1 })
      }
      this.giftList = result
    }
  }
}
</script>

<style lang="less">
@lantenStyle: {
  background-color: #f9f4f4;
  box-shadow: 0 0 3px 0 #f9f4f4;
};
@lantenActiveStyle: {
  background-color: #fe3426;
  box-shadow: 0 0 3px 0 #fe3426;
};
// @start 开始位置
// @end 结束位置
// @add 增量变量
.lanpositon(left, @top:0, @left:0, @start:0, @end: 0, @add: 0 ) when (@start =< @end) {
  &:nth-child(@{start}) {
    left: @left;
    top: @add + @top;
  }
  .lanpositon(left, @top, @left, (@start + 1), @end, @add + @top);
}
.lanpositon(top, @top:0, @left:0, @start:0, @end: 0, @add: 0 ) when (@start =< @end) {
  &:nth-child(@{start}) {
    top: @top;
    left: @add + @left;
  }
  .lanpositon(top, @top, @left, (@start + 1), @end, @add + @left);
}
@keyframes flicker {
  0%,
  50% {
    @lantenStyle();
  }
  51%,
  100% {
    @lantenActiveStyle();
  }
}
@keyframes flickerTwo {
  0%,
  50% {
    @lantenActiveStyle();
  }
  51%,
  100% {
    @lantenStyle();
  }
}
.grid-table {
  width: 346px;
  height: 292px;
  margin: 0 auto;
  background-image: url('~@/assets/images/lottery/table_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  padding: 18px;
  position: relative;
  background: #ffd904;
  border-radius: 14px;
  &__prize {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #f49805;
    border-radius: 14px;
    padding: 2px;
    &__item {
      width: 33.33333%;
      height: 33.33333%;
      padding: 2px;
      color: #ff464c;
      display: flex;
      text-align: center;
      &.active {
        .item-box {
          background-color: #fc5147;
          color: #fdf3ab;
        }
      }
      &:nth-child(-n + 3) {
        margin-top: 0;
      }
      .item-btn {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 13px;
        position: relative;
        background: repeating-linear-gradient(-45deg, #fc5147, #fc5147 6px, #fd736a 6px, #fd736a 12px);
        display: flex;
        justify-content: center;
        align-items: center;
        > span {
          font-size: 18px;
          font-weight: 600;
          color: #fdf3ab;
        }
      }
      .item-box {
        background-color: #fdf3ab;
        border-radius: 13px;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
        img {
          display: block;
          width: 50px;
          height: 50px;
        }
        p {
          width: 100%;
          padding: 0 10px 0 15px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 16px;
          font-weight: 600;
        }
      }
    }
  }
  &__lantern {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    span {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background-color: #f9f4f4;
      box-shadow: 0 0 3px 0 #f9f4f4;
      &:first-child {
        top: 12.5px;
        left: 8px;
      }
      &:nth-child(8) {
        top: 12.5px;
        left: 330px;
      }
      &:nth-child(14) {
        top: 274px;
        left: 330px;
      }
      &:nth-child(21) {
        top: 274px;
        left: 8px;
      }
      .lanpositon(top, 6px, 46px, 2, 7, 8px);
      .lanpositon(left, 44px, 332px, 9, 13, 11.4px);
      .lanpositon(top, 279px, -46px, 15, 20, 330px);
      .lanpositon(left, -44px, 6px, 22, 26, 275px);
      &:nth-child(2n) {
        @lantenStyle();
        animation: flicker 1s infinite linear;
      }
      &:nth-child(2n + 1) {
        @lantenActiveStyle();
        animation: flickerTwo 1s infinite linear;
      }
    }
  }
}
</style>
