<template>
  <section class="main-timing">
    <TimingBanner class="timing-banner" :info="config[0]"></TimingBanner>
    <div class="prize-info">
      <label>奖品：</label>
      <p>
        <span class="text-name">{{ config[0].name }}</span>
        <span class="text-num">x {{ config[0].sum }}</span>
      </p>
    </div>
    <TimingStatus class="timing-status-box"></TimingStatus>
    <JoinButton class="join-button-box" @lottery="lotteryCallback" @openWiner="isShowWinner = true"></JoinButton>
    <BackButton v-if="backUrl" class="back-box" :url="backUrl"></BackButton>
    <WinnersPopup v-model="isShowWinner"></WinnersPopup>
  </section>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { setLottery } from '@/api/modules/lottery'

// banner
import TimingBanner from '@/components/Lottery/Timing/TimingBanner'
// 状态信息
import TimingStatus from '@/components/Lottery/Timing/TimingStatus'
// 参加按钮
import JoinButton from '@/components/Lottery/Timing/JoinButton'
// 返回直播间按钮
import BackButton from '@/components/Lottery/Timing/BackButton'
// 中奖名单
import WinnersPopup from '@/components/Common/WinnersPopup'

export default {
  components: {
    TimingBanner,
    TimingStatus,
    JoinButton,
    BackButton,
    WinnersPopup
  },
  data() {
    return {
      isBtnLoading: false,
      isShowWinner: false,
      id: this.$route.query.id,
      playId: this.$route.query.sessionId
    }
  },
  computed: {
    ...mapGetters({
      uin: 'users/uin',
      isLogin: 'users/isLogin',
      lotteryInfo: 'lottery/lotteryInfo',
      isBindPhone: 'users/isBindPhone'
    }),
    backUrl() {
      return this.$route.query.backUrl || ''
    },
    config() {
      const list =
        typeof this.lotteryInfo.prizeConfigs === 'object'
          ? Object.values(this.lotteryInfo.prizeConfigs)
          : this.lotteryInfo.prizeConfigs
      return list
    }
  },
  methods: {
    ...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
    // 抽奖回调
    lotteryCallback() {
      // 抽奖点击事件
      if (!this.isLogin) {
        this.$toast({
          message: '请先登录',
          duration: 1500,
          onClose: () => {
            this.jumpToLogin()
          }
        })

      } else if (this.lotteryInfo.status !== 1) {
        // 抽奖不在活动日期内

      } else if (this.isBtnLoading) {
        // 正在抽奖动画过程中或正在加载数据

      } else if (this.lotteryInfo.userTimes <= 0) {
        this.$toast('抽奖次数已用完')

      } else {
        this.isBtnLoading = true
        const params = {
          id: this.id,
          uin: this.uin,
          playId: this.playId,
          type: this.stype || 'link',
          sourceId: this.sid || this.id
        }
        setLottery(params).then(res => {
          const { code, errorCode, errorMessage } = res
          if (code === 200 && errorCode === 0) {
            let times = this.lotteryInfo.userTimes
            times--
            let num = this.lotteryInfo.activeNum
            num++
            this.updateInfo({
              userTimes: times,
              isDraw: 1,
              activeNum: num
            })
            this.$toast.success('参与成功')
            this.isBtnLoading = false
          } else {
            this.$toast.fail(errorMessage)
          }
        })
      }
    }
  }
}
</script>
<style lang="less">
.main-timing {
  height: 100%;
  position: relative;
  .timing-banner {
    padding-top: 9 / 16 * 100%;
    position: relative;
  }
  .prize-info {
    margin-top: 10px;
    padding-left: 16px;
    min-height: 20px;
    line-height: 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: left;
    label {
      min-width: 50px;
    }
    p {
      flex: 1;
      span {
        color: #000;
        &.text-num {
          margin-left: 4px;
          color: #999;
        }
      }
    }
  }
  .timing-status-box {
    padding-left: 16px;
    margin-top: 10px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
  }
  .join-button-box {
    margin-top: 50px;
    min-height: 158px;
  }
  .back-box {
    position: absolute;
    bottom: 16px;
    left: 0;
    width: 100%;
    border-radius: 22px;
  }
}
</style>
