<template>
  <a-row justify="space-between" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
    <a-col :span="6">
      <a-card title="系统信息" :bordered="false" class="sys">
        <p>在线用户：{{ sysparams.name }}</p>
        <p>用户数量：{{ sysparams.count }}</p>
        <p>系统当前时间：{{ sysparams.current_time }}</p>
        <p>系统开机时间：{{ sysparams.start_time }}</p>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card title="cpu使用率" :bordered="false" class="cpu">
        <echarts class="chart" :option="option"/>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card title="内存使用率" :bordered="false" class="memory">
        <echarts class="chart" :option="memory"/>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card title="磁盘分区" :bordered="false" class="disk">
        <a-table :columns="columns" :data-source="disk.data" size="middle" :pagination="false"/>
      </a-card>
    </a-col>

  </a-row>

</template>

<script setup>
import {onMounted, reactive,watch} from "vue";

let sysparams = reactive({
  count: 0,
  name: "",
  current_time: "",
  start_time: "",
  cpu_percent: 0,
})
const option = reactive({
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: 'cpu',
      type: 'gauge',
      detail: {
        formatter: '{value}'
      },
      data: [
        {
          value: 60,
          name: 'cpu'
        }
      ]
    }
  ]
})

const memory = reactive({
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: 'memory',
      type: 'gauge',
      progress: {
        show: true
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}'
      },
      data: [
        {
          value: 60,
          name: 'memory'
        }
      ]
    }
  ]
})


const columns = [{
  title: '分区名称',
  dataIndex: 'device',
}, {
  title: '容量(G)',
  dataIndex: 'total',
}, {
  title: '已使用(G)',
  dataIndex: 'used',
}, {
  title: "剩余(G)",
  dataIndex: "free",
}
];

onMounted(() => {
  GetSytem()
})
const disk = reactive({
  data:[]
})


function GetSytem(){
  console.log("开始连接websocket......")
  const ws = new WebSocket("ws://127.0.0.1:8000/api/ws")
  ws.onopen = function () { ws.send("")};
  ws.onmessage = function (msg){
    console.log("开始接受数据.............")
    const data = JSON.parse(msg.data)
    console.log(data)
    let {cpu_percent} = data.cpu_info
    let {percent} = data.memory_info
    // 渲染cpu数据
    option.series[0].data[0].value = cpu_percent
    //渲染内存信息数据
    memory.series[0].data[0].value = percent
    //渲染系统信息数据
    let {count, name, current_time, start_time} = data.sys_info
    sysparams.count = count
    sysparams.name = name
    sysparams.current_time = current_time
    let data_array = reactive([])
    sysparams.start_time = start_time
    //渲染disk磁盘信息
    data.disk_info.map((par, index) => {
      let params = {
        key: String(index),
        device: par.device,
        total: par.total,
        used: par.used,
        free: par.free,
      }
      if (index < 5) {
        data_array.push(params)
      }
    })
    disk.data=data_array
  }


}


</script>


<style scoped>
.chart {

  height: 300px;
  width: 300px;
}

.echarts {
  width: 270px;
}

.charts {
  display: flex;
  justify-content: space-around;
  justify-items: center;
  height: 85%;
  width: 100%;
  background-color: #42EBFF;
  overflow-x: scroll;
}

p {
  display: flex;
  justify-content: flex-start;
  font-size: 16px;
  font-weight: bold;
}

#components-table-demo-size h4 {
  margin-bottom: 16px;
}

.disk {
  border: 1px solid #f5f5f5;
  height: 100%
}

.memory {
  border: 1px solid #f5f5f5;
  height: 100%;
}

.sys {
  border: 1px solid #f5f5f5;
  height: 100%

}

.cpu {
  border: 1px solid #f5f5f5;
  height: 100%;
}


</style>