<template>
  <div id="data-view">
    <dv-full-screen-container>
      <top-header />
      <Menu />
      <div class="main-content">
        <div class="block-top-bottom-content">
          <Cq ref="cq" />
          <MainGcjd ref="mainGcjd" />
        </div>
        <div class="block-left-right-content">
          <MainChanLian ref="mainChanLian" />
          <div class="block-top-bottom-content1">
            <div class="block-top-content">
              <MainYueChanLiang ref="mainYueChanLiang"/>
              <MainGeYueChanLiang ref="mainGeYueChanLiang"/>
            </div>
            <MainGxChanLiang ref="mainGxChanLiang"/>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import topHeader from './comps/topHeader'
import Cq from "@/views/kban/comps/MainCq.vue";
import Menu from "@/views/kban/comps/Menu.vue";
import MainChanLian from "@/views/kban/comps/MainChanLian.vue";
import MainYueChanLiang from "@/views/kban/comps/MainYueChanLiang.vue";
import MainGeYueChanLiang from "@/views/kban/comps/MainGeYueChanLiang.vue";
import MainGxChanLiang from "@/views/kban/comps/GxChanLiang.vue";
import MainGcjd from "@/views/kban/comps/MainGcjd.vue";

export default {
  name: 'DataView',
  components: {
    MainGcjd,
    MainGxChanLiang,
    MainGeYueChanLiang,
    MainYueChanLiang,
    MainChanLian,
    Menu,
    Cq,
    topHeader,
  },
  data () {
    return {}
  },
  mounted(){
    this.init()
  },
  methods: {
    init(){
      this.$store.dispatch('page/handler', true)
    }
  },
  beforeDestroy() {
    console.log('beforeDestroy: 组件实例销毁之前');
    this.$refs.cq.clear()
    this.$refs.mainChanLian.clear()
    this.$refs.mainYueChanLiang.clear()
    this.$refs.mainGeYueChanLiang.clear()
    this.$refs.mainGxChanLiang.clear()
  },
  destroyed() {
    console.log('destroyed: 组件实例销毁之后');
  }
  /*beforeDestroy(){
    console.log(this.components)
    for (const item in this.components) {
      console.log(item)
    }
  }*/
}
</script>

<style lang="less">

#data-view {
  width: 100%;
  height: 100vh;
  color: #fff;

  #dv-full-screen-container {
    background: #002166 url('../../assets/kban/bg.png') no-repeat;
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    flex: 1;
    display: flex;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: row;
  }

  .block-top-bottom-content1 {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
  }

  .block-mid-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: row;
  }

}
</style>
