<template>
  <div class="mainPage">
    <div class="list title">
      <span :class="{active:active === 1}" @click="prize()">抽奖记录</span>
      <span :class="{active:active === 2}" @click="rush()">抢购记录</span>
    </div>
    <div class="list" v-if="data.list.length > 0" v-for='(item,index) in data.list' :key='index' @click="toDetail(item)" :class="{gray:item.Status === 1}">
      <div>
        <span>{{item.PrizeName || item.FlashBuyName}}</span>
        <span>获得时间：{{toolClass.dateFormat(item.CreateDate)}}</span>
      </div>
      <div>
        <span v-if="item.Status === 1 || item.IsReality === 0">已核销</span>
        <span v-else style="color:#FF7E1A;font-size:.14rem">未核销</span>
      </div>
    </div>
    <div v-if="data.list.length <= 0" class="bottomMsg">
      <img :src="bottomMsg" alt="">
    </div>
  </div>
</template>

<script>
import bottomMsg from '@/assets/bottomMsg.png'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapPrizeActions } = createNamespacedHelpers('prize')
const { mapActions: mapAppActions } = createNamespacedHelpers('app')
export default {
  data () {
    return {
      data: {
        list: [],
        userInfo: {}
      },
      active: 1,
      bottomMsg
    }
  },
  computed: {
    ...mapState({
      list: x => x.prize.list,
      lotteryId: x => x.app.lotteryId,
      userInfo: x => x.app.userInfo
    })
  },
  mounted () {
    this.getUserInfo({ luckdrawid: this.lotteryId, from: this.$route.query.from || '' }).then((res) => {
      this.data.userInfo = this.userInfo
      if (this.$route.query.type === '2') {
        this.rush()
      } else {
        this.prize()
      }
    }).catch((err) => {
      console.log(err)
    })
  },
  methods: {
    ...mapPrizeActions(['getLotteryList', 'rushList']),
    ...mapAppActions(['getUserInfo']),
    toDetail (item) {
      if (item.Status === 1 || item.IsReality === 0) {
        return
      }
      if (item.Url) {
        window.location.href = item.Url
      } else {
        this.$router.push({ name: 'lotteryDetail', query: { id: item.Id ? item.Id : item.CustomerFlashBuyId, type: this.active } })
      }
    },
    prize () {
      this.active = 1
      this.data.list = []
      this.getLotteryList().then((res) => {
        this.data.list = this.list
      })
    },
    rush () {
      this.active = 2
      this.data.list = []
      this.rushList().then((res) => {
        this.data.list = this.list
        for (let i = 0; i < this.data.list.length; i++) {
          this.data.list[i].Status = this.data.list[i].VerifyStatus === 'useable' ? 0 : 1
        }
      })
    }
  }
}
</script>

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