<template>
  <div id="app" style="width: 100%">
    <div class="page-header">
      <div class="page-title">控制台</div>
      <div class="page-header-btn">
        <el-button icon="el-icon-info" size="mini" style="margin-right: 1rem;" type="primary" @click="showInfo">平台信息
        </el-button>
      </div>
    </div>
    <el-row style="width: 100%">
      <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
        <div class="control-cell" id="ThreadsLoad" >
          <div style="width:100%; height:100%; ">
            <consoleCPU ref="consoleCPU"></consoleCPU>
          </div>
        </div>
      </el-col>
      <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
        <div class="control-cell" id="WorkThreadsLoad" >
          <div style="width:100%; height:100%; ">
            <consoleResource ref="consoleResource"></consoleResource>
          </div>
        </div>
      </el-col>
      <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
        <div class="control-cell" id="WorkThreadsLoad" >
          <div style="width:100%; height:100%; ">
            <consoleNet ref="consoleNet"></consoleNet>
          </div>
        </div>
      </el-col>
      <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
        <div class="control-cell" id="WorkThreadsLoad" >
          <div style="width:100%; height:100%; ">

            <consoleMem ref="consoleMem"></consoleMem>
          </div>
        </div>
      </el-col>
      <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
        <div class="control-cell" id="WorkThreadsLoad" >
          <div style="width:100%; height:100%; ">
            <consoleNodeLoad ref="consoleNodeLoad"></consoleNodeLoad>
          </div>
        </div>
      </el-col>
      <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
        <div class="control-cell" id="WorkThreadsLoad" >
          <div style="width:100%; height:100%; ">
            <consoleDisk ref="consoleDisk"></consoleDisk>
          </div>
        </div>
      </el-col>
    </el-row>
    <configInfo ref="configInfo"></configInfo>
  </div>
</template>

<script>
import uiHeader from '../layout/UiHeader.vue'
import consoleCPU from './console/ConsoleCPU.vue'
import consoleMem from './console/ConsoleMEM.vue'
import consoleNet from './console/ConsoleNet.vue'
import consoleNodeLoad from './console/ConsoleNodeLoad.vue'
import consoleDisk from './console/ConsoleDisk.vue'
import consoleResource from './console/ConsoleResource.vue'
import configInfo from './dialog/configInfo.vue'

import echarts from 'echarts';

export default {
  name: 'app',
  components: {
    echarts,
    uiHeader,
    consoleCPU,
    consoleMem,
    consoleNet,
    consoleNodeLoad,
    consoleDisk,
    consoleResource,
    configInfo,
  },
  data() {
    return {
      timer: null,
    };
  },
  created() {
    this.getSystemInfo();
    this.getLoad();
    this.getResourceInfo();
    this.loopForSystemInfo();

  },
  destroyed() {
  },
  methods: {
    loopForSystemInfo: function (){
      if (this.timer != null) {
        window.clearTimeout(this.timer);
      }
      this.timer = setTimeout(()=>{
        if (this.$route.path === "/console") {
          this.getSystemInfo();
          this.getLoad();
          this.timer = null;
          this.loopForSystemInfo()
          this.getResourceInfo()
        }

      }, 2000)
    },
    getSystemInfo: function (){
      this.$axios({
        method: 'get',
        url: `/api/server/system/info`,
      }).then( (res)=> {
        if (res.data.code === 0) {
          this.$refs.consoleCPU.setData(res.data.data.cpu)
          this.$refs.consoleMem.setData(res.data.data.mem)
          this.$refs.consoleNet.setData(res.data.data.net, res.data.data.netTotal)
          this.$refs.consoleDisk.setData(res.data.data.disk)
        }
      }).catch( (error)=> {
      });
    },
    getLoad: function (){
      this.$axios({
        method: 'get',
        url: `/api/server/media_server/load`,
      }).then( (res)=> {
        if (res.data.code === 0) {
          this.$refs.consoleNodeLoad.setData(res.data.data)
        }
      }).catch( (error)=> {
      });
    },
    getResourceInfo: function (){
      this.$axios({
        method: 'get',
        url: `/api/server/resource/info`,
      }).then( (res)=> {
        if (res.data.code === 0) {
          this.$refs.consoleResource.setData(res.data.data)
        }
      }).catch( (error)=> {
      });
    },
    showInfo: function (){

      this.$axios({
        method: 'get',
        url: `/api/server/system/configInfo`,
      }).then( (res)=> {
        console.log(res)
        if (res.data.code === 0) {
          console.log(2222)
          console.log(this.$refs.configInfo)
          this.$refs.configInfo.openDialog(res.data.data)
        }
      }).catch( (error)=> {
      });
    }

  }
};
</script>

<style>
#app {
  height: 100%;
}
.control-cell {
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 10px;
  height: 360px;
}
</style>