<template>
  <div class="mainPage" v-if='showPage'>
    <div>核销时间：
      <span v-if="data.record">
        <!-- <span v-if="data.prize.ValidDays>0">领取后{{data.prize.ValidDays}}天有效</span> -->
        <span>{{toolClass.dateFormat(data.record.VerificationStart)}} ~ {{toolClass.dateFormat(data.record.VerificationEnd)}}</span>
      </span>
    </div>
    <div class="name">核销地点：{{data.caseAddress}}</div>
    <div>
      <qrCode :msg='msg' v-if='data.record.Status === 0'></qrCode>
      <div v-else class="bottomMsg">
        <img :src="bottomMsg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import qrCode from '@/components/qrCodeCard/qrCodeCard'
import bottomMsg from '@/assets/bottomMsg.png'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapPrizeActions } = createNamespacedHelpers('prize')
export default {
  data () {
    return {
      data: {},
      msg: {
        record_id: ''
      },
      bottomMsg,
      showPage: false
    }
  },
  components: {
    qrCode
  },
  computed: {
    ...mapState({
      detail: x => x.prize.detail
    })
  },
  created () {
    if (this.$route.query.type === 1) {
      this.getLotteryDetail({ id: this.$route.query.id }).then((res) => {
        this.data = this.detail
        this.msg.record_id = this.data.record.CustomerQrcode
        this.showPage = true
      })
    } else {
      this.getRushDetail({ customerFlashBuyId: this.$route.query.id }).then((res) => {
        console.log(res)
        this.data = {
          record: {
            Status: this.detail.VerifyStatus === 'useable' ? 0 : 1,
            CustomerQrcode: this.detail.CustomerQrcode,
            VerificationStart: this.detail.ValidateStart,
            VerificationEnd: this.detail.ValidateEnd
          },
          caseAddress: this.detail.CaseName
        }
        console.log(this.data)
        this.msg.record_id = this.data.record.CustomerQrcode
        this.showPage = true
      })
    }
  },
  methods: {
    ...mapPrizeActions(['getLotteryDetail', 'getRushDetail']),
    showDate (dt) {
      const theDT = new Date(dt)
      const fullYear = theDT.getFullYear(theDT)
      const month = theDT.getMonth() + 1
      const fullMonth = month > 9 ? month : `0${month}`
      const day = theDT.getDate()
      const fullDay = day > 9 ? day : `0${day}`

      return `${fullYear}-${fullMonth}-${fullDay}`
    }
  }
}
</script>

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