<template>
  <div class="page-box view-mobile" @touchmove.stop.prevent @click="_closeAll">
    <div class="live">
      <div class="top-list-box m-carousel-dvertising">
        <advert-top v-if="isAdTop"></advert-top>
      </div>
      <div class="player-box">
        <player-box></player-box>
      </div>
      <div class="camera-box" @touchmove.stop>
        <camera-box v-if="isCamera"></camera-box>
      </div>
      <div class="tab-list-box">
        <menu-tab v-model="menuActive"></menu-tab>
      </div>
      <div class="middle-list-box">
        <extend-commodity v-if="spread"></extend-commodity>
        <advert-middle v-else-if="isAdMiddle"></advert-middle>
      </div>
      <div class="text-box">
        <advert-text v-if="isAdText"></advert-text>
      </div>
      <div class="content-box" @touchmove.stop>
        <div class="menu-list-box" id="menu-list-box">
          <menu-list v-model="menuActive"></menu-list>
        </div>
        <red-box></red-box>
        <auth-box v-if="channelInfo.needPay == 1"></auth-box>
      </div>
      <transition name="fade">
        <share-box></share-box>
      </transition>
      <extend-ad></extend-ad>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import SKIN from '@/components/modules/skin';
const advertTop = resolve => require(['@/components/modules/advertBox/top'], resolve);
const advertMiddle = resolve => require(['@/components/modules/advertBox/middle'], resolve);
const advertText = resolve => require(['@/components/modules/advertBox/text'], resolve);
const shareBox = resolve => require(['@/components/modules/shareBox'], resolve);
const authBox = resolve => require(['@/components/auth'], resolve);
const cameraBox = resolve => require(['@/components/modules/cameraBox'], resolve);
const redBox = resolve => require(['@/components/modules/redBox'], resolve);
const extendAd = resolve => require(['@/components/modules/extendBox/ad'], resolve);
const extendCommodity = resolve => require(['@/components/modules/extendBox/commodity'], resolve);

import playerBox from '@/components/modules/playerBox';
import menuTab from '@/components/modules/menuBox/tab';
import menuList from '@/components/modules/menuBox/list';

export default {
  name: 'mobile',
  head() {
    return {
      style: [{ cssText: this.skinCss, type: 'text/css' }]
    };
  },
  components: {
    advertTop,
    advertMiddle,
    advertText,
    playerBox,
    menuTab,
    menuList,
    cameraBox,
    shareBox,
    redBox,
    authBox,
    extendAd,
    extendCommodity
  },
  data() {
    return {
      menuActive: 0,
      spread: this.$route.query.spread
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      advertTop: 'advertTop',
      advertMiddle: 'advertMiddle',
      advertText: 'advertText'
    }),
    skinCss() {
      return SKIN(this.channelInfo.layoutColor || '');
      // return SKIN("jieri_qm" || "");
    },
    isAdTop() {
      return this.advertTop.status && this.advertTop.list.length;
    },
    isAdMiddle() {
      return this.advertMiddle.status && this.advertMiddle.list.length;
    },
    isAdText() {
      return this.advertText.status && this.advertText.words;
    },
    isCamera() {
      return this.channelInfo.cameraShowStatus === 1;
    }
  },
  mounted() {
    this.get_advertList();
  },
  methods: {
    ...mapActions({
      get_advertList: 'get_advertList'
    }),
    _closeAll() {
      this.$Bus.$emit('bus-remEnclosure');
      this.$Bus.$emit('bus-showReward', false);
    }
  }
};
</script>
<style lang="less" scoped>
.page-box {
  height: 100%;
  .live {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
.live {
  display: flex;
  flex-direction: column;
  height: 100%;
  .top-list-box {
    flex: 0 0 auto;
  }
  .player-box {
    position: relative;
    flex: 0 0 auto;
  }
  .camera-box {
    flex: 0 0 auto;
  }
  .middle-list-box {
    flex: 0 0 auto;
  }
  .tab-list-box {
    flex: 0 0 auto;
  }
  .text-box {
    flex: 0 0 auto;
  }
  .content-box {
    flex: 1;
    height: 0;
    position: relative;
    .menu-list-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
