<template>
  <section class="lottery-box">
    <component
      v-if="'type' in lotteryInfo && lotteryInfo.type"
      :is="lotteryComponents[LOTTERY_TYPE[parseInt(lotteryInfo.type, 10)].sign]"
    ></component>
    <Loading class="lottery-box__loading" :isShow="isLoading"></Loading>
  </section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { MainNow, MainTiming } from '@/components/Lottery'
import Loading from '@/components/Loading'
import { LOTTERY_TYPE } from '@/utils/const'
import Bus from '@/utils/Bus'
import UserAgents from '@/utils/UserAgents'

// debugger
import VConsole from 'vconsole'

export default {
  data() {
    return {
      LOTTERY_TYPE,
      isLoading: true,
      lotteryComponents: {
        instant: MainNow,
        timing: MainTiming
      },
      id: this.$route.query.id || null, // 接收抽奖id
      sessionId: this.$route.query.sessionId || null // 接收抽奖场次id
      // sid: this.$route.query.sid || null, // 引用id
      // stype: this.$route.query.stype || null, // 引用类型
    }
  },
  components: {
    Loading
  },
  computed: {
    ...mapGetters(['isLogin', 'lotteryInfo', 'uin', 'wxShareInfo'])
  },
  created() {
    // 调试模式
    if (this.$route.query.debug === 'vconsole') {
      // eslint-disable-next-line no-new
      new VConsole()
    }
    this.dataInit()
  },
  destroyed() {
    Bus.$off('LotteryInfoUpdate')
    Bus.$off('LotteryStateUpdate')
  },
  methods: {
    ...mapActions({
      getLotteryInfo: 'getLotteryInfo',
      updateInfo: 'updateInfo',
      initWXShare: 'initWXShare'
    }),
    // 页面进入初始化
    dataInit() {
      const { id, sessionId: playId } = this.$route.query
      const { uin } = this
      // 拉取场次内基础信息
      this.getLotteryInfo({ id, playId, uin })
        .then(() => {
          this.isLoading = false
        })
        .catch(() => {
          this.isLoading = false
        })

      // 微信分享初始化
      if (UserAgents.isWx) {
        this.initWXShare({
          info: this.wxShareInfo,
          params: {
            uin
          }
        })
      }
      // 初始化事件中心
      this.eventHubInit()
    },
    // 事件中心
    eventHubInit() {
      // 数据更新
      Bus.$on('LotteryInfoUpdate', data => {
        const { id } = data
        const { uin, id: currentId, sessionId: currentPlayId } = this
        if (parseInt(id, 10) === parseInt(currentId, 10)) {
          this.getLotteryInfo({ id, playId: currentPlayId, uin })
        }
      })
      // 抽奖开始与结束
      Bus.$on('LotteryStateUpdate', data => {
        const { id, playId } = data
        const { sessionId: currentPlayId, id: currentId } = this
        if (parseInt(id, 10) === parseInt(currentId, 10) && parseInt(playId, 10) === parseInt(currentPlayId, 10)) {
          const { status, startTime, endTime, userTimes } = data
          // 状态
          this.updateInfo({
            status
          })
          // 开始时间结束时间
          this.updateInfo({
            startTime,
            endTime
          })
          // 剩余抽奖次数
          if (this.isLogin) {
            this.updateInfo({
              userTimes
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.lottery-box {
  overflow: hidden;
  margin: 0 auto;
  height: 100%;
}
</style>
