<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"></JoinButton>
    <BackButton v-if="backUrl" class="back-box" :url="backUrl"></BackButton>
    <Records></Records>
    <WinPopup v-model="isShowWin" :info="winInfo"></WinPopup>
    <BindPhoneDialog v-model="isShowBindPhone"></BindPhoneDialog>
  </section>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { setLottery, getUserRecord } from '@/api/modules/lottery'
import Bus from '@/utils/Bus'

// 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 WinPopup from '@/components/Lottery/Instant/WinPopup'

export default {
  components: {
    TimingBanner,
    TimingStatus,
    JoinButton,
    BackButton,
    WinPopup,
    BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
    Records: () => import('@/components/Lottery/Instant/Records')
  },
  data() {
    return {
      isBtnLoading: false,
      id: this.$route.query.id || '',
      stype: this.$route.query.stype || null, // 引用类型
      playId: this.$route.query.sessionId,
      isShowWin: false,
      isShowBindPhone: false, // 是否显示绑定手机号提示
      winInfo: this.winInfoTranslator()
    }
  },
  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
    }
  },
  watch: {
    'lotteryInfo.isWin': {
      handler(val) {
        if (val) {
          this.loadWinInfo()
        }
      },
      deep: true
    }
  },
  mounted() {
    this.eventHubInit()
  },
  methods: {
    ...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
    eventHubInit() {
      Bus.$on('updateMain', data => {
        for (const [key, value] of Object.entries(data)) {
          if (key === 'func') {
            this[value]()
          } else {
            this[key] = value
          }
        }
      })
    },
    // 中奖后， 关闭窗口回调
    winCloseCallback(){
      this.isShowWin = false
      if (this.winInfo.id !== 0 && !this.isBindPhone) {
        this.isShowBindPhone = true
      }
    },
    // 中奖后， "查看奖品详情"回调
    winCallback() {
      this.isShowWin = false
      if (this.winInfo.id !== 0) {
        this.$router.push({
          path: '/recordDetail',
          query: {
            tempId: this.winInfo.tempId,
            uin: this.uin
          }
        })
      }
    },
    // 抽奖回调
    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)
          }
        })
      }
    },
    loadWinInfo() {
      getUserRecord({
        id: this.$route?.query?.id || '',
        uin: this.$route?.query?.uin || '',
        nowPlay: 1
      }).then(res => {
        const { code, errorCode, errorMessage, data } = res
        if (code === 200 && errorCode === 0) {
          this.winInfo = this.winInfoTranslator(data)
          this.isShowWin = true
        } else {
          this.$toast(errorMessage)
        }
      })
    },
    winInfoTranslator(data) {
      return {
        ...data,
        id: data?.prizeId || '',
        name: data?.prizeName || ''
      }
    }
  }
}
</script>
<style lang="less">
.main-timing {
  height: 100%;
  position: relative;
  .timing-banner {
    padding-top: 115 / 330 * 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;
  }
  .back-box {
    position: absolute;
    bottom: 16px;
    left: 0;
    width: 100%;
    border-radius: 22px;
  }
}
</style>
