<template>
  <container>
    <br />
    <Auth auth="sysMachine:query">
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-card
            :bordered="false"
            :loading="loading"
            style="margin-bottom: 20px"
            title="系统信息"
          >
            <template>
              <a-descriptions bordered>
                <a-descriptions-item :span="3" label="主机名称：">{{
                  machineBaseInfo.hostName
                }}</a-descriptions-item>
                <a-descriptions-item :span="3" label="操作系统：">{{
                  machineBaseInfo.systemOs
                }}</a-descriptions-item>
                <a-descriptions-item :span="3" label="系统架构：">{{
                  machineBaseInfo.osArchitecture
                }}</a-descriptions-item>
                <a-descriptions-item :span="3" label="运行框架：">{{
                  machineBaseInfo.frameworkDescription
                }}</a-descriptions-item>
                 <a-descriptions-item :span="3" label="运行时间：">{{
              machineUseInfo.runTime
            }}</a-descriptions-item>
              </a-descriptions>
            </template>
          </a-card>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-card
            :bordered="false"
            :loading="loading"
            style="margin-bottom: 20px"
            title="网络信息"
          >
            <template>
              <a-descriptions bordered>
                <a-descriptions-item
                  :span="3"
                  label="外网信息："
                  style="ant-descriptions-item-label ant-descriptions-item-colon"
                  >{{ machineBaseInfo.wanIp }}</a-descriptions-item
                >
                <a-descriptions-item :span="3" label="IPv4地址：">{{
                  machineBaseInfo.lanIp
                }}</a-descriptions-item>
                <a-descriptions-item :span="3" label="网卡MAC：">{{
                  machineBaseInfo.ipMac
                }}</a-descriptions-item>
                <a-descriptions-item :span="3" label="流量统计：">{{
                  machineNetworkInfo.sendAndReceived
                }}</a-descriptions-item>
                <a-descriptions-item label="网络速度：:">{{
                  machineNetworkInfo.networkSpeed
                }}</a-descriptions-item>
              </a-descriptions>
            </template>
          </a-card>
        </a-col>
      </a-row>
         <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-card 
          :bordered="false" 
          style="margin-bottom: 20px;height:340px"
          :loading="loading"
           :title="Cputitle">
        <template>
          <p>CPU使用率为:</p>
                <div class="Ramcpu" ref="cpuchart"></div>
        </template>
      </a-card>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-card
            :bordered="false"
            :loading="loading"
            style="margin-bottom: 20px;height:340px"
            :title="Ramtitle"
          >
            <template>
              <p>内存使用率为:</p>
                <div 
                class="Ramcpu"
                 ref="Ramchart"></div>
            </template>
          </a-card>
        </a-col>
      </a-row>
      <!-- <a-card :bordered="false" :loading="loading" title="其他信息">
        <template>
          <a-descriptions bordered>
            <a-descriptions-item :span="3" label="CPU使用率：">
              {{machineUseInfo.cpuRate}}
              </a-descriptions-item>
            <a-descriptions-item :span="3" label="总内存：">{{
              machineUseInfo.totalRam
            }}</a-descriptions-item>
            <a-descriptions-item :span="2" label="内存使用率：" >{{
              machineUseInfo.ramRate
            }}</a-descriptions-item>
          </a-descriptions>
        </template>
      </a-card> -->
    </Auth>
  </container>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      loading: false,
      machineBaseInfo: [],
      machineUseInfo: [],
      Cputitle:'',
      Ramtitle:'',
      machineNetworkInfo: [],
      Cpuoption : {
        color:'#96cff0',
        animation:false,
        xAxis: {
        type: 'category',
        boundaryGap: false,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
      yAxis: {
        max: 100,
        type: 'value',
        axisLine:{
          show:true
        },
        axisLabel:{
          show:false,
        }
      },
      series: [{
          data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
          type: 'line',
          areaStyle: {},
          smooth:true,
          showSymbol: false,
          hoverAnimation: false,
      }]
    },
      Ramoption : {
        animation:false,
        color:'#dab7b7',
        xAxis: {
        type: 'category',
        boundaryGap: false,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
      yAxis: {
        max: 100,
        type: 'value',
        axisLine:{
          show:true
        },
        axisLabel:{
          show:false,
        }
      },
      series: [{
          center:['50%','50%'],
          data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
          type: 'line',
          areaStyle: {},
          smooth:true,
          showSymbol: false,
          hoverAnimation: false,
      }]
    }
    };
  },
  created() {
    this.loading = true;
    this.onLoadCodes();
  },
  methods: {
    //加载系统信息，网络信息，其他信息
    onLoadCodes() {
      this.$api
        .$queue([this.$api.sysMachineBase(), this.$api.sysMachineUse(), this.$api.sysMachineNetwork()])
        .then(([MachineBase, MachineUseInfo, MachineNetwork]) => {
          this.machineBaseInfo = MachineBase;
          this.machineUseInfo = MachineUseInfo;
          this.machineNetworkInfo = MachineNetwork;
          this.Cputitle = "核心数:"+MachineBase.processorCount
          this.Ramtitle = "总内存:"+MachineUseInfo.totalRam
          this.Cpuoption.series[0].data.shift();
          this.Cpuoption.series[0].data.push(this.machineUseInfo.cpuRate)
          this.Ramoption.series[0].data.shift();
          this.Ramoption.series[0].data.push(this.machineUseInfo.ramRate)
          this.loading = false;
        });
    },
    refreshData() {
      this.onLoadCodes();
      this.CpuLine();
      this.RamLine();
    },
    CpuLine(){
      var chartDom = this.$refs.cpuchart;
      var myChart1 = echarts.init(chartDom);
      myChart1.setOption(this.Cpuoption);
      window.addEventListener("resize",function(){
        myChart1.resize();
      })
    },
    RamLine(){
      var chartDom = this.$refs.Ramchart;
      var myChart = echarts.init(chartDom);
      myChart.setOption(this.Ramoption);
      window.addEventListener("resize",function(){
        myChart.resize();
      })
    }
  },
  mounted() {
    this.timer = setInterval(this.refreshData, 3000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>
<style scoped>
.Ramcpu{
  Height:300px;
  width:120%;
  left:-10%;
  top:-35px;
}
</style>