<template>
  <div class="jsc" :style="bgStyle">

  </div>
</template>

<script>
  import echarts from "echarts"
  import PanelGroup from './components/PanelGroup'
  import {
    getChartsHome
  } from "../../api/dashboard.js"

  export default {
    components: {
      PanelGroup
    },
    data() {
      return {
        screenWidth: 0,
        screenHeight: 0,
        bgStyle: {
          width: 0,
          height: 0
        },
        col: '',
        line: '',
        business_data: [],
        collect_data: [],
        list: {},
        customerArr: [],
        orderArr: [],
        chartData: {},
      }
    },
    watch: {
      // chartData(val, newval) {
      //   if (newval){
      //     this.init();
      //   }
      // }
    },
    created() {

    },
    mounted() {

      this.$store.dispatch('app/closeSideBar', {
        withoutAnimation: false
      })
      this.calculateScreenSize()
    },
    destroyed() {
      window.onresize = null
    },
    methods: {
      calculateScreenSize() {
        this.screenWidth = window.innerWidth
        this.screenHeight = window.innerHeight
        this.bgStyle = {
          width: this.screenWidth - 56 + 'px',
          height: this.screenHeight + 'px',
          position: 'relative',
          left: '-20px',
          top: '-50px',
          'z-index': 999
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep .app-main {
    padding: 0 !important
  }

  ::v-deep .hideSidebar .fixed-header {
    display: none !important;
  }

  .jsc {
    height: 100%;
    background: url(../../assets/dashboard.png) no-repeat center top;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    padding-top: 0;
  }
</style>
