<template>
  <div class="_layout copyright">
    <div class="_head"><HeadLayout /></div>
    <div class="_menu" v-if="!$store.isOpenWin"><MenuLayout /></div>
    <div class="_main">
      <Breadcrumb />
      <div
        class="_page v-card"
        id="qiankun-main"
        :style="{
          padding: $route.path.includes('electronic-textbook') ? '0' : '18px',
          overflow: $route.path.includes('electronic-textbook')
          ? 'hidden'
          : 'overlay',
        }"
      >
        <RouterView />
      </div>
    </div>
    <GlobalComponents />
  </div>
</template>

<script>
import qianKunInit from '@/utils/qiankun-init'

import HeadLayout from './HeadLayout.vue'
import MenuLayout from './MenuLayout.vue'
import Breadcrumb from './Breadcrumb.vue'

import GlobalComponents from './global-components/index.vue'
import { reportDataApi } from '@/api/statistic'

export default {
  components: { HeadLayout, MenuLayout, Breadcrumb, GlobalComponents },

  data () {
    return { collapsed: false }
  },
  mounted () {
    qianKunInit()
    setTimeout(() => reportDataApi({ type: 'SYSTEM_USE' }), 500)
  }
}
</script>

<style lang="scss" scoped>
$head_height: 60px;
$breadcrumb_height: 36px;
$layout_space: 18px;

._layout {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;

  ._head {
    width: 100vw;
    height: $head_height;
  }

  ._menu,
  ._main {
    margin-bottom: 8px;
    height: calc(100vh - #{$head_height + 8px} - #{$layout_space * 2});
  }

  ._menu {
    padding-left: $layout_space;
  }

  ._main {
    flex: 1;
    padding: 0 $layout_space;
    width: 0;

    ._breadcrumb {
      line-height: $breadcrumb_height;
    }

    ._page {
      height: calc(100% - #{$breadcrumb_height});
      overflow: overlay;
    }
  }
}
</style>
