<template>
  <section class="lottery-box">
    <component :is="lotteryComponents[+lotteryInfo.type]" v-if="'type' in lotteryInfo && lotteryInfo.type"></component>
    <ComplaintsDeal></ComplaintsDeal>
    <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'
import ComplaintsDeal from '@/components/Common/ComplaintsDeal'

export default {
  components: {
    ComplaintsDeal,
    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/MiniMain')
      },
      id: this.$route.query.id || null, // 接收抽奖id
      sessionId: this.$route.query.sessionId || null, // 接收抽奖场次id
      connection: null,
      timer: null,
      trueId: null
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'users/isLogin',
      uin: 'users/uin',
      lotteryInfo: 'lottery/lotteryInfo'
    })
  },
  watch: {
    trueId(nVal, oVal) {
      if (nVal) {
        this.postInfo(nVal)
      }
    }
  },
  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',
      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
          this.trueId = this.lotteryInfo.id
          // 微信分享
          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 (id === currentId) {
          this.getLotteryDetail({ id, playId: currentPlayId, uin })
        }
      })
      // 抽奖开始与结束
      Bus.$on('LotteryStateUpdate', data => {
        const { id, playId } = data
        const { sessionId: currentPlayId, id: currentId } = this
        if (id === currentId && playId === currentPlayId) {
          // eslint-disable-next-line no-unused-vars
          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>
