<template>
  <div class="mainPage">
    <img
      src="../assets/images/icon1.jpg"
      class="centerLabel cover bg"
      :class="{'grey': bgGrey}"
      style="z-index: 1;"
      @load="imgLoad"
      alt
    >
    <img
      src="../assets/images/icon2.png"
      width="100%"
      class="bg"
      :class="{'grey': bgGrey}"
      style="z-index: 3;top:0;left:0"
      @load="imgLoad"
      alt
    >
    <div class="userList centerLabel">
      <ul class="flex-h">
        <li
          v-for="(item, index) in users"
          v-show="!item.delete"
          class="flex-item"
          :key="index"
          :class="{'active': item.active, 'activeLi': item.active, 'hide': !item.show}"
        >
          <span>{{item.UserName}}</span>
        </li>
      </ul>
    </div>
    <div class="drawUserList centerLabel">
      <ul class="flex-h">
        <li
          v-for="(item, index) in drawUsersArr"
          class="flex-item targetLi"
          :key="index"
          :class="{'active': item.active}"
        >
          <span>{{item.UserName}}</span>
        </li>
      </ul>
    </div>
    <div class="drawEndList">
      <a
        v-for="(item, index) in drawUsersArr"
        :key="index"
        :style="{width: item.width + 'px', left: item.startX + 'px', top: item.startY + 'px'}"
      >
        <span>{{item.UserName}}</span>
      </a>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import '../assets/reset.css'
export default {
  name: 'draw',
  data () {
    return {
      bgGrey: false,
      time: 300,
      drawCount: 10,
      imgTotal: 2,
      curImgNum: 0,
      status: false,
      sureStatus: true,
      arrTimer: null,
      users: [],
      initUsers: [],
      drawUsersArr: [],
      randomArr: [],
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight,
      drawWidth: Math.floor(window.innerWidth * .7)
    }
  },
  created () {
    for (var n = 0; n < 500; n++) {
      this.initUsers.push({
        UserId: n + 1,
        UserName: '姓名' + n,
        active: false,
        show: true,
        delete: false
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
    })
  },
  methods: {
    imgLoad () {
      this.curImgNum += 1 // 图片加载完 + 1
      if (this.curImgNum >= this.imgTotal) { // 图片加载完毕之后执行抽奖初始化逻辑
        this.initDraw()
      }
    },
    initDraw () { // 初始化抽奖
      // this.arrTimer = window.setInterval(() => { // 间隔时间进行抽奖随机变换效果
      //   this.users = [] // 每次变换之前置空当前显示列表
      //   this.calcRandomArr(90, this.initUsers, this.users, 'UserId', this.drawCount) // 从所有名单中随机获取若干个数据（获取数据个数，所有名单对象，当前显示名单列表对象，判重关键字，抽取中奖数量）
      // }, this.time)
      document.getElementsByTagName('html')[0].onkeydown = (e) => { // 页面添加键盘点击事件监听
        e = e || event
        if (e.ctrlKey && e.keyCode == 13) { // 启停抽奖组合键：Ctrl + Enter
          this.sureStatus = true
          if (!this.status) { // 重新抽奖
            this.bgGrey = true
            this.status = !this.status
            this.users = []
            this.drawUsersArr = [] // 置空中奖数据
            this.calcRandomArr(90, this.initUsers, this.users, 'UserId', this.drawCount)
            this.arrTimer = window.setInterval(() => {
              this.users = []
              this.calcRandomArr(90, this.initUsers, this.users, 'UserId', this.drawCount)
            }, this.time)
          } else { // 抽奖变换动画暂定
            this.status = !this.status
            clearInterval(this.arrTimer)
            this.arrTimer = null
            this.users.map((item) => { // 记录中奖数据，以便读取过渡动画结束位置坐标
              if (item.active) {
                this.drawUsersArr.push({ ...item, width: 0, startX: '', startY: '' })
              }
            })
            this.$nextTick(() => {
              this.drawUsersArr.map((item, index) => { // 记录中奖名单结束位置坐标
                item.endX = document.getElementsByClassName('targetLi')[index].getBoundingClientRect().x
                item.endY = document.getElementsByClassName('targetLi')[index].getBoundingClientRect().y
              })
              for (var n = 0; n < this.drawCount; n++) { // 记录中奖名单开始位置坐标
                this.drawUsersArr[n].startX = document.getElementsByClassName('activeLi')[n].getBoundingClientRect().x
                this.drawUsersArr[n].startY = document.getElementsByClassName('activeLi')[n].getBoundingClientRect().y
                this.drawUsersArr[n].width = document.getElementsByClassName('activeLi')[n].getBoundingClientRect().width
              }
            })
          }
        } else if (e.ctrlKey && e.keyCode == 32) { // 确认抽奖结果组合键：Ctrl + Space
          if (!this.status) {
            if (this.sureStatus) { // 之前已执行过Ctrl + Enter的前提下，才能执行确认动作
              this.sureStatus = !this.sureStatus
              this.users.map((item) => { // 隐藏未抽中数据
                item.show = false
              })
              this.drawUsersArr.map((item) => {
                item.startX = item.endX
                item.startY = item.endY
              })
            }
          }
        }
      }
    },
    calcRandomArr (num, pArr, aArr, key, activeNum) {
      if (pArr.length > num) {
        var randomNum = Math.floor(Math.random() * pArr.length), bool = false
        aArr.map((item) => {
          if (item[key] === pArr[randomNum]) {
            bool = true
          }
        })
        if (!bool) aArr.push({ ...pArr[randomNum], active: false })
        if (aArr.length === num) {
          return this.returnSubArr(aArr, activeNum, 'active', 0)
        } else {
          this.calcRandomArr(num, pArr, aArr, key, activeNum)
        }
      } else {
        return { ...pArr[randomNum], active: true }
      }
    },
    returnSubArr (arr, subNum, key, count) {
      var randomNum = Math.floor(Math.random() * arr.length)
      if (!arr[randomNum][key]) {
        arr[randomNum][key] = true
        count += 1
      }
      if (count < subNum) {
        this.returnSubArr(arr, subNum, key, count)
      } else {
        return arr
      }
    }
  }
}
</script>

<style>
.mainPage {
  overflow: hidden;
  background: #000;
}
.bg{
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
  transition: filter .3s linear;
  -webkit-transition: filter .3s linear;
  display: block;
  position: absolute;
}
.bg.grey{
  -webkit-filter: brightness(20%);
  filter: brightness(20%);
}
.drawEndList {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 200;
}
.drawEndList > a {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 60px;
  border: 2px solid #e7963b;
  position: absolute;
  box-shadow: 0 0 0.2rem 0.15rem rgba(231, 150, 59, 0.2);
  transition: none 0.5s ease-out 1s;
  -webkit-transition: none 0.5s ease-out 1s;
  transition-property: left, top;
  -webkit-transition-property: left, top;
}
.drawEndList > a > span {
  width: 100%;
  display: block;
  line-height: 60px;
  border-radius: 60px;
  color: #fff;
  text-align: center;
  font-size: 27px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 0 0.2rem 0.15rem rgba(231, 150, 59, 0.2) inset;
}
.userList,
.drawUserList {
  width: 44%;
  min-width: 1500px;
  overflow: visible;
  z-index: 100;
}
.drawUserList {
  width: 22%;
  min-width: 750px;
  opacity: 0;
}
.userList > ul,
.drawUserList > ul {
  width: 100%;
  position: relative;
  overflow: visible;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  justify-content: center;
}
.userList > ul > li,
.drawUserList > ul > li {
  min-width: 10%;
  max-width: 10%;
  margin: 10px 0.5%;
  box-sizing: border-box;
  border: 2px solid #79321c;
  border-radius: 60px;
  overflow: hidden;
  opacity: 1;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}
.drawUserList > ul > li {
  min-width: 20%;
  max-width: 20%;
  margin: 10px 1%;
}
.userList > ul > li.hide {
  opacity: 0;
}
.userList > ul > li > span,
.drawUserList > ul > li > span {
  width: 100%;
  display: block;
  line-height: 60px;
  border-radius: 60px;
  color: #777;
  text-align: center;
  font-size: 27px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.userList > ul > li.active {
  border-color: #e7963b;
  box-shadow: 0 0 0.2rem 0.15rem rgba(231, 150, 59, 0.2);
}
.userList > ul > li.active > span {
  border-color: #e7963b;
  box-shadow: 0 0 0.2rem 0.15rem rgba(231, 150, 59, 0.2) inset;
  color: #fff;
}
</style>

