<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: {
    Loading: () => import('@/components/Loading'),
    ComplaintsDeal
  },
  data() {
    return {
      isLoading: true,
      lotteryComponents: {
        [LOTTERY_TYPE.instant]: () => import('@/components/Lottery/Instant/Main'),
        [LOTTERY_TYPE.timing]: () => import('@/components/Lottery/Timing/Main')
      },
      id: this.$route.query.id || null, // 接收抽奖id
      sessionId: this.$route.query.sessionId || null // 接收抽奖场次id
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'users/isLogin',
      uin: 'users/uin',
      lotteryInfo: 'lottery/lotteryInfo'
    })
  },
  created() {
    this.dataInit()
  },
  destroyed() {
    Bus.$off('LotteryInfoUpdate')
    Bus.$off('LotteryStateUpdate')
  },
  methods: {
    ...mapActions({
      getLotteryDetail: 'lottery/getLotteryDetail',
      updateInfo: 'lottery/updateInfo',
      postInfo: 'users/postInfo',
      checkPremise: 'lottery/check_premise'
    }),
    // 页面进入初始化
    dataInit() {
      const { id, sessionId: playId, uin } = this.$route.query
      // 拉取场次内基础信息
      this.getLotteryDetail({ id, playId, uin })
        .then(() => {
          this.isLoading = false
          // 微信分享
          if (UserAgents.isWx) {
            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()
      // 抽奖前置条件
      this.checkPremise({ id, uin })
    },
    // 事件中心
    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) {
          const { status, startTime, endTime } = 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>
