<style lang='scss' scoped>
@import "page.scss";
</style>

<style>
.jgg-content pre p {
  color: #895b2f;
}
</style>

<template>
  <div class='bg mainPage'>
    <img class='bg-img' :src='bg' alt='' width='100%'>
    <img v-if="data.hasTitle" class="title-logo" :src="titleLogo" alt="">
    <transition name='fade'>
      <div class='dialog' v-if='showDialog' @click='close'>
        <div class='box' @click.stop='stop' v-if="prizeData.prize.IsReality">
          <img class='dialog-bg' @click.stop='close' :src='dialog' alt=''>
          <div class='dialog-title'>恭喜你！<span>成功获得</span></div>
          <div class='dialog-name'>{{winning}}</div>
          <img class='qrCode' :src='qrCode' alt=''>
          <div v-if='showBtn' @click='get'>
            <img class='lq' :src='lq' alt=''>
          </div>
          <div class='desc'>长按二维码“城的空间”，进入会员中心查看奖品吧</div>
        </div>
        <div class="box" v-else>
          <img class='dialog-bg' @click.stop="close" :src="dialog" alt="">
          <div class='dialog-title' style="padding-bottom:.1rem;">{{winning}}</div>
          <img class="qrCode" :src="qrCode" alt="">
          <div class="desc">长按二维码关注“城的空间”，查看更多精彩活动</div>
        </div>
      </div>
    </transition>
    <div class='sudoku-border'>
      <div class='sudoku'>
        <div v-for='(item,index) in square' :key='index' :class='item.class'>
          <div class='light' v-show='item.light'></div>
          <div v-if='item.picMiddel' @click='run()'>
            <!-- <p>{{item.title.split(',')[0]}}</p>
            <p>{{item.title.split(',')[1]}}</p> -->
            <img :src="item.picMiddel" alt="" width="80%">
          </div>
          <img v-if='item.pic' class='square-prize' :src='item.pic' alt=''>
          <span v-if='item.text' class=''>{{item.text}}</span>
        </div>
      </div>
    </div>
    <div class="times">您当前还剩余 <span>{{residue}}</span> 次抽奖机会</div>
    <div class="list-area">
      <div class="winningList">
        <div class="title">
          <span>中奖名单</span>
          <img :src="right" alt="">
        </div>
        <div class="list">
          <div v-for='(item, index) in  data.list' :key='index' v-if="data.list.length > 0">
            <img :src="item.UserHeadImg" alt="">
            <span>
              <div>{{item.UserName}}</div>
              <div>{{toolClass.dateFormatM(item.CreateDate)}}</div>
            </span>
            <span>{{item.PrizeName}}</span>
          </div>
        </div>
      </div>
      <div class="rule">
        <div class="title">
          <span>活动规则</span>
          <img :src="right" alt="">
        </div>
        <div class="content jgg-content">
          <pre v-html='data.prize.LuckdrawRule'></pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import titleLogo from '@/assets/logo2.png'
import dialog from '@/assets/dialog.png'
import lq from '@/assets/lq.png'
import qrCode from '@/assets/qrCode.jpg'
import right from '@/assets/right.png'
import middelImg1 from '@/assets/middelImg1.png'
import middelImg2 from '@/assets/middelImg2.png'
import middelImg3 from '@/assets/middelImg3.png'
import { createNamespacedHelpers } from 'vuex'
const { mapActions: mapAppActions } = createNamespacedHelpers('app')
export default {
  data () {
    return {
      titleLogo,
      dialog,
      qrCode,
      lq,
      right,
      showDialog: false,
      showBtn: false,
      winning: '',
      jump: '',
      middelImg1,
      middelImg2,
      middelImg3,
      square: [
        {
          title: '',
          text: '奖品',
          class: 'prize-box',
          pic: '',
          light: false
        },
        {
          title: '',
          text: '奖品',
          class: 'prize-box',
          pic: '',
          light: false
        },
        {
          title: '',
          text: '奖品',
          class: 'prize-box',
          pic: '',
          light: false
        },
        {
          title: '',
          text: '奖品',
          class: 'prize-box',
          pic: '',
          light: false
        },
        {
          title: '',
          text: '',
          pic: '',
          picMiddel: '',
          class: 'check-btn',
          light: false
        },
        {
          title: '',
          text: '奖品',
          class: 'prize-box',
          pic: lq,
          light: false
        },
        {
          title: '',
          text: '奖品',
          class: 'prize-box',
          pic: '',
          light: false
        },
        {
          title: '',
          text: '奖品',
          class: 'prize-box',
          pic: '',
          light: false
        },
        {
          title: '',
          text: '奖品',
          class: 'prize-box',
          pic: '',
          light: false
        }
      ],
      ORDER: [],
      END: 0,
      ROUND: 0,
      num: 0,
      nowRound: 0
    }
  },
  props: ['prizeData', 'prizeNum', 'data', 'bg', 'activityStatus', 'residue'],
  created () {
    this.init()
    console.log(1)
  },
  methods: {
    ...mapAppActions(['setRunState']),
    init () {
      let data = this.data.prizeList
      data = this.checkLength(data)
      data.splice(4, 0, {})
      if (this.activityStatus === 0) {
        // this.square[4].title = '活动,未开始'
        this.square[4].picMiddel = this.middelImg1
      } else if (this.activityStatus === 1) {
        // this.square[4].title = '立即,抽奖'
        this.square[4].picMiddel = this.middelImg2
      } else if (this.activityStatus === 9) {
        // this.square[4].title = '活动,已结束'
        this.square[4].picMiddel = this.middelImg3
      } else if (this.activityStatus === -1) {
        // this.square[4].title = '活动,已删除'
        this.square[4].picMiddel = this.middelImg3
        this.$toast('活动已删除')
      }
      for (let i = 0; i < data.length; i++) {
        this.square[i].text = data[i].PrizeName
        this.square[i].pic = data[i].PrizeImg
      }
    },
    checkLength (arr) {
      if (arr.length >= 8) {
        arr = arr.slice(0, 8)
      } else {
        let length = Math.floor(8 / arr.length)
        for (let i = 0; i < length; i++) {
          arr = arr.concat(arr)
        }
        arr = arr.slice(0, 8)
      }
      return arr
    },
    start () {
      this.ORDER = [0, 1, 2, 5, 8, 7, 6, 3]
      this.END = this.prizeNum
      this.ROUND = 8
      this.num = 0
      this.nowRound = 1
      if (this.square.filter(item => item.light === true).length > 0) {
        this.square.filter(item => item.light === true)[0].light = false
      }
      this.square[0].light = true
      this.loop()
      this.winning = this.prizeData.prize.PrizeName
      // this.showBtn = this.prizeData.detail.Url ? 1 : 0
      this.jump = this.prizeData.detail.Url
    },
    loop () {
      let speed = [4, 3, 2, 1, 2, 3, 4, 5]
      let timeOut = speed[this.nowRound - 1] * 40
      setTimeout(() => {
        this.square[this.ORDER[this.num]].light = true
        let old = this.num === 0 ? 7 : this.num - 1
        this.square[this.ORDER[old]].light = false
        if (this.END >= 4) {
          if ((this.ORDER[this.num] - 1) === this.END && this.nowRound === this.ROUND) {
            setTimeout(() => {
              this.showDialog = true
              if (this.prizeData.detail.Url) {
                setTimeout(() => {
                  this.get()
                }, 2000)
              }
            }, 300)
            this.setRunState(2)
            return false
          }
        } else {
          if (this.ORDER[this.num] === this.END && this.nowRound === this.ROUND) {
            setTimeout(() => {
              this.showDialog = true
              if (this.prizeData.detail.Url) {
                setTimeout(() => {
                  this.get()
                }, 2000)
              }
            }, 300)
            this.setRunState(2)
            return false
          }
        }
        this.num = this.num === 7 ? 0 : this.num + 1
        if (this.num === 7) {
          this.nowRound++
        }
        this.loop()
      }, timeOut)
    },
    get () {
      console.log('去领取')
      window.location.href = `${window.location.origin}/wechat/user.html#/receiveShared${this.jump}?isAuto=auto`
    },
    close (data) {
      this.showDialog = false
    },
    run () {
      this.$emit('run')
    }
  },
  watch: {
    prizeData: {
      handler (cur, old) {
        console.log(cur)
        this.start()
      },
      immediate: false,
      deep: false
    }
  }
}
</script>
