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

<script>
import { mapGetters, mapActions } from 'vuex'
import { LOTTERY_TYPE } from '@/utils/constant'
import Bus from '@/utils/Bus'
import UserAgents from '@/utils/UserAgents'
import CONFIG from '@/config'

export default {
  components: {
    Loading: () => import('@/components/Loading')
  },
  layout: 'miniNavBar',
  data() {
    return {
      isLoading: true,
      lotteryComponents: {
        [LOTTERY_TYPE.instant]: () => import('@/components/Lottery/Instant/MiniMain'),
        [LOTTERY_TYPE.timing]: () => import('@/components/Lottery/Timing/Main')
      },
      id: this.$route.query.id || null, // 接收抽奖id
      sessionId: this.$route.query.sessionId || null, // 接收抽奖场次id
      connection: null,
      timer: null
      // sid: this.$route.query.sid || null, // 引用id
      // stype: this.$route.query.stype || null, // 引用类型
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'users/isLogin',
      uin: 'users/uin',
      lotteryInfo: 'lottery/lotteryInfo'
    })
  },
  created() {
    this.connectionInit()
    this.dataInit()
  },
  destroyed() {
    Bus.$off('LotteryInfoUpdate')
    Bus.$off('LotteryStateUpdate')
    Bus.$off('BusToLogin')
    Bus.$off('BusToBindPhone')
  },
  methods: {
    ...mapActions({
      getLotteryDetail: 'lottery/getLotteryDetail',
      updateInfo: 'lottery/updateInfo',
      getUerInfo: 'users/getUerInfo',
      postInfo: 'users/postInfo'
    }),
    connectionInit() {
      if (process.client) {
        const { ClientConnection } = require('@easy-messenger/client-connection/dist/clientConnection.cjs.js')
        this.connection = new ClientConnection()
        let counter = 0
        this.timer = setInterval(() => {
          this.connection.init()
          counter++
          if (this.connection.connected || counter > 60) {
            clearInterval(this.timer)
            this.connectionListener()
          }
        }, 1000)
      }
    },
    connectionListener() {},
    // 页面进入初始化
    dataInit() {
      const { id, sessionId: playId, uin } = this.$route.query
      // 拉取场次内基础信息
      this.getLotteryDetail({ id, playId, uin })
        .then(() => {
          this.isLoading = false
          // 微信分享
          if (UserAgents.isWx && process.client) {
            const { lotteryInfo } = this
            const wxShare = require('@/utils/wxShare').default
            wxShare.init(
              {
                link: window.location.href,
                title: lotteryInfo?.shareTitle || lotteryInfo?.title || '抽奖',
                desc: lotteryInfo?.intro || window.location.href,
                imgUrl: CONFIG.defShareImg
              },
              { uin }
            )
          }
        })
        .catch(() => {
          this.isLoading = false
        })
      // 初始化事件中心
      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.getLotteryDetail({ 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
            })
          }
        }
      })
      // 转跳至登录页
      Bus.$on('BusToLogin', data => {
        this.connection.emit('directionalJump', { type: 'login', currentUrl: window.location.href })
      })
      // 转跳至绑定手机页
      Bus.$on('BusToBindPhone', data => {
        this.connection.emit('directionalJump', { type: 'bindPhone', currentUrl: window.location.href })
      })
    }
  }
}
</script>

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