<template>
  <div style="height: 100%">
    <!--加密直播-->
    <transition name="fade" v-if="encrypt">
      <encrypt />
    </transition>
    <!-- 白名单观看 -->
    <transition name="fade" v-else-if="white">
      <white />
    </transition>
    <template v-else>
      <view-pc v-if="!isMobile" />
      <view-vertical v-else-if="channelInfo.screenDirection === 'vertical'" />
      <view-mobile v-else />
      <!--欢迎页-->
      <welcome v-if="isMobile && welcomeInfo.imgState == 1" />
    </template>
  </div>
</template>
<script>
import { getWatchLoginInfo } from '@/plugins/API/apiAll';
import { mapGetters, mapMutations, mapActions } from 'vuex';
import encrypt from '@/components/encrypt/index';
import white from '@/components/white/index';
import welcome from '@/components/welcome/index';
import viewPc from './pc';
import viewMobile from './mobile';
import viewVertical from './vertical';

export default {
  name: 'view-box',
  components: {
    encrypt,
    white,
    welcome,
    viewPc,
    viewMobile,
    viewVertical
  },
  props: {
    isMobile: {}
  },
  data() {
    return {
      id: this.$route.params.id
    };
  },
  computed: {
    ...mapGetters({
      encrypt: 'encrypt',
      white: 'white',
      welcomeInfo: 'welcomeInfo',
      channelInfo: 'channelInfo',
      channelConfig: 'channelConfig',
      jumpUrls: 'jumpUrls'
    }),
    isPeep() {
      const peep = this.channelConfig.peep || {};
      return !!peep.isEnable;
    }
  },
  async mounted() {
    this.$Bus.$on('bus-showLogin', this._toggleLogin);
    this.get_userInfo({ refererId: this.$route.query.refererId });
    this.set_nowDate();
  },
  methods: {
    ...mapActions({
      set_nowDate: 'set_nowDate',
      invitation: 'invitation',
      PostInfo: 'PostInfo'
    }),
    ...mapMutations({
      set_userInfo: 'set_userInfo'
    }),
    async get_userInfo(obj) {
      const res = await getWatchLoginInfo({
        id: this.channelInfo.id,
        uin: this.channelInfo.uin
      });
      if (res.code === 200 && res.errorCode === 0) {
        const info = res.data.watchUserInfo;
        if (!info.id && this.isPeep) {
          this._toggleLogin(true);
          return false;
        }
        this.set_userInfo(info);
        if (obj.refererId && info.id) {
          this.invitation(obj);
        }
        this.PostInfo();
      }
    },
    _toggleLogin(bool) {
      if (bool) {
        window.location.href = this.jumpUrls.login;
      }
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-showLogin', this._toggleLogin);
  }
};
</script>
