<template>
  <div class="d-flex fullScreen">
    <div class="fullWidth pa-2">
      <div class="row-3">
        <data-package />
      </div>
      <div class="row-6">
        <pie-package />
      </div>
      <div class="row-3">
        <line-package />
      </div>
    </div>
    <div class="fullWidth pa-2">
      <div class="row-8">
        <map-package />
      </div>
      <div class="row-4 pt-2 d-flex">
        <list-package style="flex: 1" />
      </div>
    </div>
    <div class="fullWidth pa-2">
      <div class="row-3">
        <dataset-package />
      </div>
      <div class="row-3">
        <bar-package />
      </div>
      <div class="row-3">
        <category-package />
      </div>
      <div class="row-3">
        <radar-package />
      </div>
    </div>
  </div>
</template>

<script>
import { loadDynamicComponents } from '@/utils'
const vueComponent = require.context('./dynamic', true, /\.vue$/)
const allComponent = loadDynamicComponents(vueComponent)
export default {
  name: 'large-screen',
  components: { ...allComponent }
}
</script>

<style lang="scss" scoped>

.fullScreen {
  border: 1px solid #CCC;
  height: 100%;
  // align-items: stretch;
  .fullWidth {
    width: 100%;
  }
}
.row {
  &-1 {
    height: calc(100% / 12);
  }
  &-2 {
    height: calc(100% / 6);
  }
  &-3 {
    height: calc(100% / 4);
  }
  &-4 {
    height: calc(100% / 3);
  }
  &-5 {
    height: calc(100% / (12 / 5));
  }
  &-6 {
    height: calc(100% / 2);
  }
  &-7 {
    height: calc(100% / (12 / 7));
  }
  &-8 {
    height: calc(100% / (12 / 8));
  }
  &-9 {
    height: calc(100% / (12 / 9));
  }
  &-10 {
    height: calc(100% / (12 / 10));
  }
  &-11 {
    height: calc(100% / (12 / 11));
  }
  &-12 {
    height: calc(100% / 1);
  }
}
</style>
