<template>
  <section class="lottery-box">
    <component :is="lotteryComponents[Number(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'),
        [LOTTERY_TYPE.question]: () => import('@/components/Lottery/Question/Main')
      },
      id: this.$route.query.id || null, // 接收抽奖id
      sessionId: this.$route.query.sessionId || null, // 接收抽奖场次id
      trueId: null
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'users/isLogin',
      uin: 'users/uin',
      lotteryInfo: 'lottery/lotteryInfo',
      premise: 'lottery/premise',
      precondition: 'lottery/precondition'
    })
  },
  watch: {
    premise(nVal, oVal) {
      if (this.lotteryInfo.forceWrite && nVal === 0) {
        if (window.self === window.top) {
          Bus.$emit('showForce')
        } else {
          Bus.$emit('showConfig')
        }
      }
    },
    'lotteryInfo.forceWrite': {
      handler(val) {
        if (val && this.premise === 0) {
          if (window.self === window.top) {
            Bus.$emit('showForce')
          } else {
            Bus.$emit('showConfig')
          }
        }
      },
      deep: true
    }
  },
  created() {
    this.dataInit()
  },
  destroyed() {
    Bus.$off('LotteryInfoUpdate')
    Bus.$off('LotteryStateUpdate')
  },
  methods: {
    ...mapActions({
      getLotteryDetail: 'lottery/getLotteryDetail',
      updateInfo: 'lottery/updateInfo',
      checkPrecondition: 'lottery/check_precondition'
    }),
    // 页面进入初始化
    dataInit() {
      const { id, sessionId: playId, uin } = this.$route.query
      // 拉取场次内基础信息
      this.getLotteryDetail({ id, playId, uin })
        .then(res => {
          this.isLoading = false
          this.trueId = this.lotteryInfo.id
          console.log(this.lotteryInfo, 888888);
          // 微信分享
          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 }
            )
          }
          // 抽奖前置活动
          this.checkPrecondition({
            id: res.bindServiceId,
            uin,
            referralUrl: window.location.href,
            includeId: id,
            type: 'draw',
            checkType: res.bindService
          }).then(response => {
            if (!response.isJoin && this.premise && !!res.bindServiceForceOpen) {
              Bus.$emit('showPrecondition')
            }
          })
        })
        .catch(() => {
          this.isLoading = false
        })
      // 初始化事件中心
      this.eventHubInit()
    },
    // 事件中心
    eventHubInit() {
      // 数据更新
      Bus.$on('LotteryInfoUpdate', data => {
        const { id } = data
        const { uin, id: currentId, sessionId: currentPlayId } = this
        if (Number(id) === Number(currentId)) {
          this.getLotteryDetail({ id, playId: currentPlayId, uin })
        }
      })
      // 抽奖开始与结束
      Bus.$on('LotteryStateUpdate', data => {
        const { id, playId } = data
        const { sessionId: currentPlayId, id: currentId } = this
        if (Number(id) === Number(currentId) && Number(playId) === Number(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>
