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

<style>
.ggl-content pre p {
  color: #585858;
}
</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="scrape" ref='box'>
      <img :src="end" v-if="status" alt="" class="scrape-img">
      <img :src="start" v-else alt="" class="scrape-img">
      <div v-if="!cover.state" class="scrape-prize">{{prizeData.prize.PrizeName}}</div>
      <!-- <div v-else class="scrape-prize">悦见山别墅小洋房<span>5</span>折神券</div> -->
      <canvas ref='canvas' v-if="!status"></canvas>
      <div class="cover" v-if="cover.state" :class="{gray: activityStatus !== 1}">
        <div class="cover-text" v-if="cover.title">{{cover.title}}</div>
        <div class="cover-button" v-if="cover.button" @click="btnClick()">{{cover.button}}</div>
      </div>
    </div>
    <div class='times'>您当前还剩余 <span>{{residue}}</span> 次抽奖机会 <p v-if="reload" @click="init()">再来一次</p></div>
    <div class="list-area">
      <div class="list-top"></div>
      <div class='winningList'>
        <img :src="listBg" alt="" width='100%'>
        <div class='title'>
          <span>中奖名单</span>
        </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>
    <div class="rule-area">
      <div class='rule'>
        <img :src="ruleBg" alt="" width='100%'>
        <div class='title'>
          <span>活动规则</span>
        </div>
        <div class='content ggl-content'>
          <pre v-html='data.prize.LuckdrawRule'></pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import titleLogo from '@/assets/logo1.png'
import dialog from '@/assets/dialog.png'
import lq from '@/assets/lq.png'
import qrCode from '@/assets/qrCode.jpg'
import icon from '@/assets/icon.png'
import start from '@/assets/start.png'
import end from '@/assets/end.png'
import listBg from '@/assets/listBg.png'
import ruleBg from '@/assets/ruleBg.png'
import { createNamespacedHelpers } from 'vuex'
const { mapActions: mapAppActions } = createNamespacedHelpers('app')
export default {
  data () {
    return {
      titleLogo,
      dialog,
      qrCode,
      lq,
      icon,
      start,
      end,
      listBg,
      ruleBg,
      showDialog: false,
      showBtn: false,
      winning: '',
      jump: '',
      canvas: null,
      area: 0,
      status: false,
      cover: {
        text: '',
        button: '',
        state: true
      }
    }
  },
  props: ['prizeData', 'prizeNum', 'data', 'bg', 'activityStatus', 'residue'],
  created () {
    this.init()
  },
  methods: {
    ...mapAppActions(['setRunState']),
    init () {
      this.cover.state = true
      this.status = false
      this.reload = false
      this.$nextTick(() => {
        if (this.activityStatus === 0) {
          this.cover.button = '活动未开始'
          this.status = true
        } else if (this.activityStatus === 1) {
          this.cover.title = '幸运刮刮乐 刮出小惊喜'
          this.cover.button = '点我刮奖'
        } else if (this.activityStatus === 9) {
          this.cover.button = '活动已结束'
          this.status = true
        } else if (this.activityStatus === -1) {
          this.cover.button = '活动已删除'
          this.status = true
          this.$toast('活动已删除')
        }
        this.context = this.$refs.canvas.getContext('2d')
        // 画蒙布
        this.context.beginPath()
        this.context.fillStyle = '#9D876D'
        this.context.fillRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
        let img = new Image()
        img.src = this.icon
        img.onload = () => {
          // let pattern = this.context.createPattern(img, 'repeat')
          // this.context.fillStyle = pattern
          // this.context.fillRect(10, 10, this.$refs.canvas.width*0.9, this.$refs.canvas.height*0.85)
        }
        this.area = this.$refs.canvas.width * this.$refs.canvas.height
        this.$refs.canvas.addEventListener('touchstart', this.startFunc, false)
        this.$refs.canvas.addEventListener('touchmove', this.moveFunc, false)
        this.$refs.canvas.addEventListener('touchend', this.endFunc, false)
      })
    },
    startFunc () {
      console.log('start')
    },
    moveFunc (e) {
      let l = this.$refs.box.offsetLeft
      let t = this.$refs.box.offsetTop
      console.log(e)
      // 获取鼠标坐标
      let x = e.touches[0].clientX - l + this.$refs.canvas.width / 2
      let y = e.touches[0].clientY - t
      // destination-out             显示原来的不在后来区域的部分
      this.context.globalCompositeOperation = 'destination-out'
      this.context.beginPath()
      this.context.arc(x, y, 18, 0, Math.PI * 2)
      this.context.fill()
      e.preventDefault()
    },
    endFunc () {
      console.log('end')
      let areaData = this.context.getImageData(0, 0, this.$refs.canvas.width, this.$refs.canvas.height).data
      let scrapeNum = 0
      for (var i = 3, len = areaData.length; i < len; i += 4) {
        if (areaData[i] === 0) {
          scrapeNum++
        }
      }
      if (scrapeNum > this.area * 0.3) {
        this.status = true
        this.context.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
        this.$refs.canvas.removeEventListener('touchmove', this.moveFunc, false)
        this.$refs.canvas.removeEventListener('touchend', this.endFunc, false)
        setTimeout(() => {
          this.showDialog = true
          this.reload = true
          if (this.prizeData.detail.Url) {
            setTimeout(() => {
              this.get()
            }, 2000)
          }
        }, 300)
        this.setRunState(2)
        this.winning = this.prizeData.prize.PrizeName
        // this.showBtn = this.prizeData.detail.Url ? 1 : 0
        this.jump = this.prizeData.detail.Url
      }
    },
    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')
    },
    btnClick () {
      if (this.activityStatus === 0) {
        this.$toast('活动未开始')
      } else if (this.activityStatus === 1) {
        this.run()
      } else if (this.activityStatus === 2) {
        this.$toast('活动已结束')
      }
    }
  },
  watch: {
    prizeData: {
      handler (cur, old) {
        this.cover.state = false
      },
      immediate: false,
      deep: false
    }
  }
}
</script>
