<template>
  <div class="page-box view-vertical" @touchmove.stop.prevent @click="_closeAll">
    <div class="top-box">
      <top-box v-model="isClose"></top-box>
    </div>
    <div class="down-time-box" v-if="isDownTime" v-show="!isClose">
      <down-time-box></down-time-box>
    </div>
    <div class="red-fixed" v-show="!isClose" @touchmove.stop>
      <red-box></red-box>
    </div>
    <div class="play-box">
      <player-box></player-box>
    </div>
    <div class="interaction-box" v-show="!isClose" @touchmove.stop>
      <div class="gift-roll-box">
        <gift-roll-box></gift-roll-box>
      </div>
      <chat-box></chat-box>
    </div>
    <div class="footer-box" v-show="!isClose">
      <footer-box></footer-box>
    </div>
    <auth-box v-if="channelInfo.needPay == 1"></auth-box>
    <transition name="fade">
      <share-box></share-box>
    </transition>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import topBox from '@/components/modules-vertical/topBox';
import downTimeBox from '@/components/modules-vertical/downTimeBox';
import redBox from '@/components/modules/redBox';
import playerBox from '@/components/modules-vertical/playerBox';
import giftRollBox from '@/components/modules-vertical/giftRollBox';
import chatBox from '@/components/modules-vertical/chatBox';
import footerBox from '@/components/modules-vertical/footerBox';
import shareBox from '@/components/modules-vertical/shareBox';
import authBox from '@/components/auth';

export default {
  name: 'vertical',
  head() {
    return {
      style: [{ cssText: this.skinCss, type: 'text/css' }]
    };
  },
  components: {
    topBox,
    downTimeBox,
    redBox,
    playerBox,
    giftRollBox,
    chatBox,
    footerBox,
    shareBox,
    authBox
  },
  data() {
    return {
      isClose: false,
      skinCss: `:root{
            --main-color: #409EFF;
            --suspension-office-bg: url(${process.env.DEF_OSS}/static/skin/default/bg-draw.png);
            --suspension-draw-bg: url(${process.env.DEF_OSS}/static/skin/default/bg-draw.png);
            --suspension-vote-bg: url(${process.env.DEF_OSS}/static/skin/default/bg-vote.png);
            --suspension-invite-bg: url(${process.env.DEF_OSS}/static/skin/default/bg-invite.png);
            --suspension-wallet-bg: url(${process.env.DEF_OSS}/static/skin/default/bg-wallet.png);
            --suspension-reward-bg: url(${process.env.DEF_OSS}/static/skin/default/bg-reward.png);
            --suspension-praise-bg: url(${process.env.DEF_OSS}/static/skin/default/bg-praise.png);
            --suspension-toggle-bg: linear-gradient(#72b8ff, #4285ec);
          }`
    };
  },
  computed: {
    ...mapGetters({
      nowDate: 'nowDate',
      channelInfo: 'channelInfo'
    }),
    isDownTime() {
      return (
        this.channelInfo.liveStatus === 0 &&
        this.channelInfo.countdownStatus === 1 &&
        this.channelInfo.liveBegin > this.nowDate / 1000
      );
    }
  },
  methods: {
    _closeAll() {
      this.$Bus.$emit('bus-remSendChay');
      this.$Bus.$emit('bus-remEnclosure');
      this.$Bus.$emit('bus-showReward', false);
    }
  }
};
</script>
<style lang="less" scoped>
.page-box {
  position: relative;
  height: 100%;
  overflow: hidden;
  .top-box {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 0.5rem;
  }
  .down-time-box {
    position: absolute;
    top: 0.5rem;
    left: 0;
    z-index: 100;
  }
  .red-fixed {
    position: absolute;
    top: 0.85rem;
    left: 0;
    z-index: 110;
  }
  .play-box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .interaction-box {
    position: absolute;
    bottom: 0.6rem;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 33%;
    .gift-roll-box {
      position: absolute;
      top: -1rem;
      left: 0.1rem;
    }
  }
  .footer-box {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 0.6rem;
  }
}
</style>
