<template>
  <div class="records" :class="{ 'records--button-center': !isShowWinnersList }">
    <van-button round color="#FDF3AB" @click="openRecord">我的抽奖记录</van-button>
    <RecordPopup :isShow="isShowRecordPopup" @changeVisible="changeIsShowRecord"></RecordPopup>
    <van-button v-if="isShowWinnersList" round color="#FDF3AB" @click="changeIsShowWinners(true)">中奖名单</van-button>
    <WinnersPopup
      v-if="isShowWinnersList"
      :isShow="isShowWinnersPopup"
      @changeVisible="changeIsShowWinners"
    ></WinnersPopup>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import RecordPopup from '@/components/Lottery/Instant/RecordPopup'
import WinnersPopup from '@/components/Common/WinnersPopup'

export default {
  name: 'Records',
  data() {
    return {
      isShowRecordPopup: false, // 是否显示我的抽奖记录
      isShowWinnersPopup: false // 是否显示中奖名单
    }
  },
  components: {
    RecordPopup,
    WinnersPopup
  },
  computed: {
    ...mapGetters(['isLogin', 'lotteryInfo']),
    isShowWinnersList() {
      const { lotteryInfo } = this
      return !!lotteryInfo.showResult
    }
  },
  methods: {
    ...mapActions({ jumpToLogin: 'jumpToLogin' }),
    openRecord() {
      if (!this.isLogin) {
        this.$toast({
          message: '请先登录，正在为您转跳',
          duration: 1500,
          onClose: () => {
            this.jumpToLogin()
          }
        })
        return
      } else {
        this.changeIsShowRecord(true)
      }
    },
    changeIsShowRecord(val) {
      this.isShowRecordPopup = val
    },
    changeIsShowWinners(val) {
      this.isShowWinnersPopup = val
    }
  }
}
</script>

<style lang="less" scoped>
.records {
  display: flex;
  justify-content: space-between;
  width: 100%;
  &--button-center {
    justify-content: center;
  }
  /deep/ .van-button {
    height: 100%;
    .van-button__content {
      color: #fc5147;
    }
  }
}
</style>
