<template lang="html">
  <div class="luckyPrizeVue">

    <lucky-card
      class="luckyCard"
      :class="{ 'active': isShowList }"
      v-for="(n, i) in members"
      :key="i"
      :card-index="i"
      :card-info="n"
      :style="n.style"
      @luck-draw="luckDraw" />

    <p class="settings" v-if="isStartBtn">
      <span>抽取名额</span>
      <input type="number" min="1" max="6" v-model="luckyQuota">
    </p>

    <span class="startBtn" @click="start()" v-if="isStartBtn">开始洗牌</span>

  </div>
</template>

<script>
import luckyCard from './luckyCard'
import { members } from 'static/js/member.js'

export default {
  components: {
    luckyCard
  },
  data () {
    return {
      canDraw: false, // 是否可以翻牌
      luckyQuota: 6, // 中奖名额
      isShowList: false,
      speedList: [
        1500,
        1200,
        800,
        400,
        200,
        400,
        800,
        1200,
        1500
      ],
      step: 0,
      isStartBtn: true,
      width: 100,
      height: 100,
      limit: 13,
      members: []
    }
  },
  mounted () {
    this.initMembers()
  },
  methods: {
    // 初始化成员名单
    initMembers () {
      this.members = members.map((n, i) => {
        return {
          name: n,
          duration: 1000,
          show: true,
          lucky: false,
          sort: i
        }
      }).map((n, i) => {
        return {
          ...n,
          style: this.luckyCardStyle(n, i)
        }
      })
    },
    // 点击开始
    start () {
      this.isStartBtn = false
      this.members.forEach((n, i) => {
        n.show = false
      })
      setTimeout(() => {
        this.shuffle()
      }, 1500)
    },
    // 洗牌动画
    shuffle () {
      let speed = this.speedList[this.step]

      let sortList = Array(this.members.length).fill(0).map((n, i) => {
        return {
          index: i,
          random: Math.random()
        }
      }).sort((n, m) => n.random - m.random).map(n => n.index)

      let members = this.members.map((n, i) => {
        return {
          ...n,
          duration: speed,
          sort: sortList[i]
        }
      }).map((n, i) => {
        return {
          ...n,
          style: this.luckyCardStyle(n, i)
        }
      })

      // console.log(members[0])

      this.$set(this, 'members', members)

      setTimeout(() => {
        if (this.step + 1 < this.speedList.length) {
          this.step++
          this.shuffle()
        } else {
          console.log('洗牌完毕')
          this.canDraw = true
        }
      }, speed * 1.1)
    },
    // 抽奖翻牌
    luckDraw (n, i) {
      // console.log(n, i)
      if (!this.canDraw) {
        return false
      }
      this.$set(this.members[i], 'show', true)
      this.$set(this.members[i], 'lucky', true)
      this.showLuckList()
    },
    // 显示获奖名单
    showLuckList () {
      let winners = this.members.filter((n, i) => n.lucky)
      if (winners.length < this.luckyQuota) {
        return false
      }
      this.canDraw = false
      this.isShowList = true
      this.members.forEach((n, i) => {
        n.show = true
        n.style = {
          ...n.style,
          'opacity': n.lucky ? 1 : 0.1
        }
        if (n.lucky) {
          let index = winners.indexOf(n)
          n.style['top'] = index * (this.height + 20) + 20 + 'px'
          n.style['left'] = '130px'
          n.style['z-index'] = 1
        }
      })
    },
    // 修改卡片位置样式
    luckyCardStyle (n, i) {
      return {
        'width': this.width + 'px',
        'height': this.height + 'px',
        'top': parseInt(n.sort / this.limit) * this.height + 'px',
        'left': (n.sort % this.limit) * this.width + 'px',
        'transition': `all ${n.duration / 1000}s ease`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.luckyPrizeVue{
  position: relative;
  height: 100%;
  .luckyCard{
    position: absolute;
  }
  .settings{
    position: absolute;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    input{
      width: 40px;
    }
  }
  .startBtn{
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    &:hover{
      cursor: pointer;
      opacity: .7;
    }
  }
}
</style>
