<template>
  <div
    class="page-box view-pc"
    :style="{
      background: channelInfo.pcBackgroundUrl
        ? `url(${channelInfo.pcBackgroundUrl}) no-repeat center center / cover`
        : '#27282e'
    }"
  >
    <div class="header">
      <div class="container-box live-header">
        <header-box></header-box>
      </div>
    </div>
    <div class="main">
      <div class="container-box live-info">
        <info-box></info-box>
      </div>
      <div class="container-box live-content">
        <div class="left-box">
          <div class="live-player">
            <player-box></player-box>
            <auth-box v-if="channelInfo.needPay == 1"></auth-box>
          </div>
          <div class="live-qrcode">
            <qrcode-box></qrcode-box>
          </div>
        </div>
        <div class="right-box">
          <div class="live-interact">
            <interact-box></interact-box>
          </div>
        </div>
      </div>
      <div class="container-box live-camera" v-if="channelInfo.cameraShowStatus == 1">
        <camera-box></camera-box>
      </div>
      <div class="container-box live-menu" v-if="menuListPc.length">
        <menu-tab v-model="meunIndex"></menu-tab>
        <menu-list v-model="meunIndex"></menu-list>
      </div>
    </div>
    <transition name="fade">
      <red-box></red-box>
    </transition>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
const headerBox = resolve => require(['@/components/modules-pc/headerBox'], resolve);
const infoBox = resolve => require(['@/components/modules-pc/infoBox'], resolve);
const playerBox = resolve => require(['@/components/modules-pc/playerBox'], resolve);
const authBox = resolve => require(['@/components/auth/index'], resolve);
const qrcodeBox = resolve => require(['@/components/modules-pc/qrcodeBox'], resolve);
const interactBox = resolve => require(['@/components/modules-pc/interactBox'], resolve);
const cameraBox = resolve => require(['@/components/modules-pc/cameraBox'], resolve);
const menuTab = resolve => require(['@/components/modules-pc/menuBox/tab'], resolve);
const menuList = resolve => require(['@/components/modules-pc/menuBox/list'], resolve);
const redBox = resolve => require(['@/components/modules-pc/redBox'], resolve);

export default {
  name: 'pc',
  head() {
    return {
      style: [{ cssText: this.skinCss, type: 'text/css' }]
    };
  },
  components: {
    headerBox,
    infoBox,
    playerBox,
    authBox,
    qrcodeBox,
    interactBox,
    cameraBox,
    menuTab,
    menuList,
    redBox
  },
  data() {
    return {
      meunIndex: 0,
      skinCss: `:root{
            --main-color: #3190F5;
            --chat-bg: #383940;
            --chat-border-color: #383940;
            --chat-color: #fff;
          }`
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      menuListPc: 'menuListPc'
    })
  }
};
</script>
<style lang="less" scoped>
.page-box {
  height: 100%;
  overflow: auto;
  position: relative;
  background: #27282e;
  color: #fff;
  .container-box {
    margin: 0 auto;
    width: 1700px;
  }
  .header {
    height: 72px;
    background: #2f3035;
    .live-header {
      height: 100%;
      background: #2f3035;
    }
  }
  .main {
    padding-bottom: 20px;
    .live-info {
      height: 64px;
    }
    .live-content {
      display: flex;
      height: 764px;
      .left-box {
        margin-right: 16px;
        flex: 1;
        height: 100%;
        background-color: #2f3035;
        border-radius: 8px;
        .live-player {
          position: relative;
          height: 700px;
        }
        .live-qrcode {
          height: 64px;
          line-height: 64px;
        }
      }
      .right-box {
        flex: 0 0 auto;
        width: 430px;
        height: 100%;
        background-color: #2f3035;
        border-radius: 8px;
        .live-interact {
          height: 100%;
        }
      }
    }
    .live-camera {
      margin: 16px auto;
    }
    .live-menu {
      margin: auto;
    }
  }
}
@media screen and (max-width: 1335px) {
  .page-box {
    .container-box {
      padding: 0 20px;
      width: 1140px;
    }
    .main {
      .live-content {
        height: 484px;
        .left-box {
          .live-player {
            height: 420px;
          }
          .live-qrcode {
            height: 64px;
          }
        }
        .right-box {
          width: 340px;
        }
      }
    }
  }
}
@media screen and (min-width: 1336px) and (max-width: 1550px) {
  .page-box {
    .container-box {
      width: 1300px;
    }
    .main {
      .live-content {
        height: 579px;
        .left-box {
          .live-player {
            height: 515px;
          }
          .live-qrcode {
            height: 64px;
          }
        }
        .right-box {
          width: 370px;
        }
      }
    }
  }
}
@media screen and (min-width: 1551px) and (max-width: 1765px) {
  .page-box {
    .container-box {
      width: 1500px;
    }
    .main {
      .live-content {
        height: 674px;
        .left-box {
          .live-player {
            height: 610px;
          }
          .live-qrcode {
            height: 64px;
          }
        }
        .right-box {
          width: 400px;
        }
      }
    }
  }
}
@media screen and (min-width: 1766px) {
  .page-box {
    .container-box {
      width: 1700px;
    }
    .main {
      .live-content {
        height: 764px;
        .left-box {
          .live-player {
            height: 700px;
          }
          .live-qrcode {
            height: 64px;
          }
        }
        .right-box {
          width: 430px;
        }
      }
    }
  }
}
</style>
