<template>
  <div class="load">
    <BaseChart :datas="cpuDatas" />
    <BaseChart :datas="ncDatas" />
    <BaseChart :datas="cpDatas" />
    <BaseChart :datas="wnDatas" />
  </div>
</template>
<script>
import { reactive, onMounted, onBeforeUnmount } from 'vue'
import BaseChart from '@/components/Chart/BaseChart'
import {
  getCpuLoad,
  getMemoryLoad,
  getDiskWrite,
  getDiskRead,
  getNetworkIn,
  getNetworkOut,
} from '@/api/dataMonitor'
export default {
  components: { BaseChart },
  setup() {
    const height = '250px'
    const minute = 3

    const cpuDatas = reactive({
      height,
      title: '总CPU负载',
      xAxisData: [],
      yAxisName: '单位：%',
      data: [
        {
          name: '总CPU负载',
          value: []
        },
      ]
    })
    // cpu负载获取数据
    const getCpuLoadData = async () => {
      const { msgState, msgContent } = await getCpuLoad(minute)
      if (msgState === 'SUCCESS' && msgContent && msgContent.length) {
        const xAxisData = []
        const data = []
        msgContent.map(item => {
          xAxisData.push(item.shotTime)
          data.push(item.utilization)
        })
        cpuDatas.xAxisData = xAxisData
        cpuDatas.data[0].value = data
      }
    }

    const ncDatas = reactive({
      height,
      title: '总内存负载',
      xAxisData: [],
      yAxisName: '单位：%',
      data: [
        {
          name: '总内存负载',
          useColorIndex: 1,
          value: []
        }
      ]
    })
    // 内存负载获取数据
    const getMemoryLoadData = async () => {
      const { msgState, msgContent } = await getMemoryLoad(minute)
      if (msgState === 'SUCCESS' && msgContent && msgContent.length) {
        const xAxisData = []
        const data = []
        msgContent.map(item => {
          xAxisData.push(item.shotTime)
          data.push(item.usePercent)
        })
        ncDatas.xAxisData = xAxisData
        ncDatas.data[0].value = data
      }
    }
    
    const cpDatas = reactive({
      height,
      title: '总磁盘IO',
      xAxisData: [],
      yAxisName: '单位：K',
      data: [
        {
          name: '读取',
          useColorIndex: 2,
          value: []
        },
        {
          name: '写入',
          value: []
        },
      ]
    })
    // 磁盘写入量获取数据
    const getDiskWriteData = async () => {
      const { msgState, msgContent } = await getDiskWrite(minute)
      if (msgState === 'SUCCESS' && msgContent && msgContent.length) {
        const xAxisData = []
        const data = []
        msgContent.map(item => {
          xAxisData.push(item.shotTime)
          data.push(item.writeBytes)
        })
        cpDatas.xAxisData = xAxisData
        cpDatas.data[1].value = data
      }
    }
    // 磁盘读取量获取数据
    const getDiskReadData = async () => {
      const { msgState, msgContent } = await getDiskRead(minute)
      if (msgState === 'SUCCESS' && msgContent && msgContent.length) {
        const xAxisData = []
        const data = []
        msgContent.map(item => {
          xAxisData.push(item.shotTime)
          data.push(item.readBytes)
        })
        cpDatas.xAxisData = xAxisData
        cpDatas.data[0].value = data
      }
    }

    const wnDatas = reactive({
      height,
      title: '总网络吞吐',
      xAxisData: [],
      yAxisName: '单位：M',
      data: [
        {
          name: '接收',
          value: []
        },
        {
          name: '发送',
          useColorIndex: 2,
          value: []
        },
      ]
    })
    // 网络接受量获取数据
    const getNetworkInData = async () => {
      const { msgState, msgContent } = await getNetworkIn(minute)
      if (msgState === 'SUCCESS' && msgContent && msgContent.length) {
        const xAxisData = []
        const data = []
        msgContent.map(item => {
          xAxisData.push(item.shotTime)
          data.push(item.inBytes)
        })
        wnDatas.xAxisData = xAxisData
        wnDatas.data[0].value = data
      }
    }
    // 网络发送量获取数据
    const getNetworkOutData = async () => {
      const { msgState, msgContent } = await getNetworkOut(minute)
      if (msgState === 'SUCCESS' && msgContent && msgContent.length) {
        const xAxisData = []
        const data = []
        msgContent.map(item => {
          xAxisData.push(item.shotTime)
          data.push(item.outBytes)
        })
        wnDatas.xAxisData = xAxisData
        wnDatas.data[1].value = data
      }
    }

    const initData = () => {
      getCpuLoadData()
      getMemoryLoadData()
      getDiskWriteData()
      getDiskReadData()
      getNetworkInData()
      getNetworkOutData()
    }

    let timer = null
    
    onMounted(() => {
      initData()
      // 每隔一分钟更新数据
      timer = setInterval(() => {
        initData()
      }, 1000 * 60)
    })

    onBeforeUnmount(() => {
      if (timer) clearInterval(timer)
    })

    return {
      cpuDatas,
      ncDatas,
      cpDatas,
      wnDatas,
    }
  }

}
</script>
<style lang="scss" scoped>
.load {
  flex: 1;
  display: grid;
  grid-template-columns: 40% 40%;
  justify-content: space-around;
}
</style>