<template>
  <div class="main-timing">
    <LuckyBag
      v-if="lotteryInfo.showType === 6 || lotteryInfo.showType === 1"
      :is-btn-loading="isBtnLoading"
      :is-show-win="isShowWin"
      :is-show-bind-phone="isShowBindPhone"
      :win-info="winInfo"
      @lotteryCallback="lotteryCallback"
    ></LuckyBag>
    <Treasure
      v-if="lotteryInfo.showType === 7"
      :is-btn-loading="isBtnLoading"
      :is-show-win="isShowWin"
      :is-show-bind-phone="isShowBindPhone"
      :win-info="winInfo"
      @lotteryCallback="lotteryCallback"
    ></Treasure>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { setLottery, getUserRecord } from '@/api/modules/lottery'
import Bus from '@/utils/Bus'

export default {
  components: {
    LuckyBag: () => import('@/components/Lottery/Timing/type/LuckyBag'),
    Treasure: () => import('@/components/Lottery/Timing/type/Treasure'),
    // 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(),
      isShowIntro: false
    }
  },
  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({ 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: () => {
            Bus.$emit('showLogin')
          }
        })
      } 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)
            this.isBtnLoading = false
          }
        })
      }
    },
    loadWinInfo() {
      getUserRecord({
        id: this.$route?.query?.id || '',
        uin: this.$route?.query?.uin || '',
        nowPlay: this.lotteryInfo.nowPlay
      }).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 || ''
      }
    },
    goRule() {
      this.isShowIntro = true
    }
  }
}
</script>
<style lang="less" scoped>
.main-timing {
  height: 100%;
  position: relative;
}
</style>
