<template>
  <div v-loading='hasSendCode'>
     <h1 class="brand-info__text">{{dataForm.verify}}</h1>
     <h2 class="brand-info__text">{{dataForm.uuid}}</h2>

    <el-table
      :data="data"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="电话">
      </el-table-column>
    </el-table>
    <el-button type="primary" round @click="btnClick">{{dataForm.userName}}</el-button> 
    <el-table
      :data="luckdata"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="中将姓名"
        width="180">
      </el-table-column>
      
      <el-table-column
        prop="goodsName"
        label="获奖信息">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="电话">
      </el-table-column>
    </el-table>    
        
  </div>
</template>

<script>
import { apiGetLuck } from '@/api/api_staff'
import { apiUpdateLuck } from '@/api/api_staff'
var dingCode
export default {
  data () {
    return {
      isloading: false,
      dataForm: {
        userName: '开始',
        password: '',
        uuid: '',
        // captcha: ''
        verify: ''
      },
      // captchaPath: '' // 图像验证码请求地址
      time: -1,
      rand: 0,
      timer: false,
      hasSendCode: true,
      query: {
        luckId:  1//活动编号
      },
      data: [],
      luckdata: [],
      requst: []
    }
  },
  created () {
    // this.handleGetImgCaptcha()
  },
  mounted () {
    if(this.getLucData()){
      
    }
  },
  methods: {
    btnClick (btn) {
      if(this.requst.isFinish === 0){
          if(this.timer === false){
            this.time++
            this.timer = true
            this.dataTimeChange ();
            this.dataForm.userName = '停止'
          }else{
            this.timer = false
            this.dataForm.userName = '开始'
            for(let item of this.data) {
              item.goodsName = this.requst.luckGoodsReqs[this.time].name
              item.goodsId = this.requst.luckGoodsReqs[this.time].id
              item.luckId = this.requst.id
              item.isLuck = 1
              this.luckdata.unshift(item)
            }
            //这里更新中奖结果，并返回未中奖的数据
            this.hasSendCode = true;
            apiUpdateLuck(this.luckdata).then(res => {
                console.log(res)
                if (res && res.code === 0) {
                  console.log(res.luck)
                  this.requst = res.luck
                  if(res.luck.isFinish === 1){
                    this.dataForm.verify=res.luck.name + '——活动结束'
                  }
                } else {
                  this.$message.error(res.msg)
                }
                this.hasSendCode = false;
              })
          }
      }
      
      
    },
    getLucData () {
      apiGetLuck(this.query).then(res => {
            
            console.log(res)
            if (res && res.code === 0) {
              console.log('获取token')
              if(res.luck.isFinish === 0){
                this.requst = res.luck
                this.dataForm.verify=res.luck.name 
              }else{
                this.dataForm.verify=res.luck.name + '——活动已结束'
                this.luckdata = res.luck.luckRecordReqs
              }
            } else {
              this.dataForm.verify='无法登记。' + res.msg
              this.$message.error(res.msg)
            }
            this.hasSendCode = false;
          })
    },
    dataTimeChange () {
      if(this.time < this.requst.luckGoodsReqs.length){
        this.dataForm.uuid = this.requst.luckGoodsReqs[this.time].name
            setTimeout(() =>{
              this.randData(this.requst.luckGoodsReqs[this.time].counts)
            }, 20)
      }
    },
    randData (count) {
      if (this.timer === true) {
        var obj = []
        if(count > this.requst.luckRecordReqs.length){//当奖品数量大于人数时，由人数限制
          console.log('奖品数大于报名人数')
          count = this.requst.luckRecordReqs.length
          console.log(count)
        }
        for(var i = 0; i < count; i++){
          
          if(this.rand >= this.requst.luckRecordReqs.length){
           this.rand = 0;
          }
          obj.push(this.requst.luckRecordReqs[this.rand])
          this.rand++
        }
        this.data = obj
        setTimeout(() =>{
              this.randData(count)
        }, 20)
      }
    }
  }
}
</script>

<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

