<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';
import websocketHeartbeat from '@/plugins/websocketHeartbeat';
export default {
  name: 'view-box',
  components: {
    encrypt,
    white,
    welcome,
    viewPc,
    viewMobile,
    viewVertical
  },
  props: {
    isMobile: {}
  },
  data() {
    return {
      id: this.$route.params.id,
      timer: null
    };
  },
  computed: {
    ...mapGetters({
      encrypt: 'encrypt',
      white: 'white',
      welcomeInfo: 'welcomeInfo',
      channelInfo: 'channelInfo',
      channelConfig: 'channelConfig',
      userInfo: 'userInfo',
      jumpUrls: 'jumpUrls'
    }),
    isPeep() {
      const peep = this.channelConfig.peep || {};
      return !!peep.isEnable;
    },
    token() {
      return this.$cookie.get(this.tokenKey) ? this.$cookie.get(this.tokenKey).token || 0 : 0
    },
    isWebview() {
      return (navigator.userAgent.toLowerCase().includes('webview') || navigator.userAgent.toLowerCase().includes('mediacloudclient'))
    }
  },
  async mounted() {
    if (this.isWebview) {
      this.set_drainage_state(0)
    }
    this.$Bus.$on('bus-showLogin', this._toggleLogin);
    await this.get_userInfo({ refererId: this.$route.query.refererId });
    this.$Bus.$emit('bus-initWX');
    this.set_nowDate();
    if (!process.env.private || process.env.privateName === 'huawei') {
      this.timer = websocketHeartbeat.call(this)
      this.set_uuid(this.timer.uuid)
      // bus注册ws暂停和开始事件 
      this.$Bus.$on('ws-start', () => {
        this.timer && this.timer.start()
      });
      this.$Bus.$on('ws-stop', () => {
        this.timer && this.timer.stop()
      });
      this.$Bus.$on('ws-changeLiveNowStatus', (newState) => {
        this.timer.useIt('userInfo', {liveNowStatus: newState})
      });
      // 进入连接   
      this.timer.onOpen = (e) => {
        this.timer.send('start')
      }
      this.timer.onMessage = (e) => {
        console.log(`onmessage: ${e.data}`)
      }
      // document.addEventListener("visibilitychange",() => {
      //   if (document.visibilityState === 'visible'){
      //     this.timer && this.timer.start()
      //   }
      //   if (document.visibilityState === 'hidden'){
      //     this.timer && this.timer.stop()
      //   }
      // })
    }
  },
  methods: {
    ...mapActions({
      set_nowDate: 'set_nowDate',
      invitation: 'invitation',
      PostInfo: 'PostInfo'
    }),
    ...mapMutations({
      set_userInfo: 'set_userInfo',
      set_uuid: 'set_uuid',
      set_drainage_state: 'set_drainage_state'
    }),
    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();
        this.$inkmarks &&
          this.$inkmarks.setUser({
            id: Number(info.id) || 0,
            username: info.userNick || '游客'
          });
      }
    },
    _toggleLogin(bool) {
      if (bool) {
        if (window.jsApi) {
          window.jsApi.loginRequest()
        }
        window.location.href = this.jumpUrls.login;
      }
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-showLogin', this._toggleLogin);
  }
};
</script>

<style>
body {
  overflow: hidden;
}
</style>
