<!--
 * @Author: your name
 * @Date: 2020-09-14 16:53:49
 * @LastEditTime: 2020-10-20 10:58:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /consoles_program/Users/xiawei/gdy/web-live/views/_id.vue
-->
<template>
  <page-view v-if="status == 200 && channelInfo.id" :isMobile="isMobile" />
  <state v-else />
</template>
<script>
import { mapGetters } from 'vuex';
import REPORT from '@/plugins/report';
import DMS from '@/plugins/Mixin/dms';
import questionnaire from '@/components/questionnaire/index.js';
import UserAgent from '@/plugins/UserAgent/index';
const state = resolve => require(['@/components/state/index'], resolve);
const pageView = resolve => require(['@/components/view/index'], resolve);

export default {
  head() {
    return {
      title: this.domTitle,
      style: [{ cssText: this.skinCss, type: 'text/css' }]
    };
  },
  components: {
    pageView,
    state
  },
  data() {
    return {
      skinCss: `:root{
        --icon-jia-white: url(${process.env.DEF_OSS}/static/skin/default/icon-jia-white.png);
        --newqq-list: url(${process.env.DEF_OSS}/static/emoji/newqq/list.jpg);
        --icon-praise-list: url(${process.env.DEF_OSS}/static/skin/default/icon-praise-list.png);
      }`,
      id: this.$route.params.id,
      isMobile: true
    };
  },
  computed: {
    ...mapGetters({
      status: 'status',
      channelInfo: 'channelInfo'
    }),
    domTitle() {
      if (this.status === 200) {
        return this.channelInfo.channelName || '';
      } else if (this.status === 404) {
        return '抱歉，您的页面迷路了';
      } else if (this.status === 408) {
        return '直播间人数较多，请耐心等待';
      } else {
        return this.channelInfo.channelName || '';
      }
    }
  },
  async asyncData({ store, query, params, userAgent, $sentry }) {
    const isMobile = !!/Android|webOS|iPhone|iPod|BlackBerry/i.test(userAgent);
    const mobile = Number(query.mobile);
    REPORT($sentry, { AppId: params.id, Uin: query.uin });
    await store.dispatch('get_control', { id: params.id });
    return {
      isMobile: mobile || isMobile
    };
  },
  mixins: [DMS, questionnaire],
  async mounted() {
    const mobile = Number(this.$route.query.mobile);
    this.isMobile = mobile || UserAgent.isMobile();
  }
};
</script>

<style lang="less"></style>
