<template>
  <PageWrapper>
    <div class="serverInfo-box">
      <a-card title="CPU">
        <a-table
          :dataSource="formData.cpuInfo"
          :columns="cpuColumns"
          :pagination="{ hideOnSinglePage: true }"
        />
      </a-card>
      <a-card title="内存">
        <a-table
          :dataSource="formData.memoryInfo"
          :columns="memoryColumns"
          :pagination="{ hideOnSinglePage: true }"
        />
      </a-card>
    </div>
    <a-card title="服务器信息">
      <a-descriptions :column="2" bordered :labelStyle="{ width: '150px' }">
        <a-descriptions-item label="服务器名称">{{
          formData.systemInfo.computerName
        }}</a-descriptions-item>
        <a-descriptions-item label="操作系统">{{ formData.systemInfo.osName }}</a-descriptions-item>
        <a-descriptions-item label="服务器IP">{{
          formData.systemInfo.computerIp
        }}</a-descriptions-item>
        <a-descriptions-item label="系统架构">{{ formData.systemInfo.osArch }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card title="Java虚拟机信息" style="margin: 20px 0">
      <a-descriptions :column="2" bordered :labelStyle="{ width: '150px' }">
        <a-descriptions-item label="Java名称">{{ formData.jvmInfo.name }}</a-descriptions-item>
        <a-descriptions-item label="Java版本">{{ formData.jvmInfo.version }}</a-descriptions-item>
        <a-descriptions-item label="启动时间">{{ formData.jvmInfo.startTime }}</a-descriptions-item>
        <a-descriptions-item label="运行时长">{{ formData.jvmInfo.runTime }}</a-descriptions-item>
        <a-descriptions-item label="项目路径" :span="3">{{
          formData.jvmInfo.home
        }}</a-descriptions-item>
        <a-descriptions-item label="运行参数" :span="3">{{
          formData.jvmInfo.inputArgs
        }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card title="磁盘状态">
      <a-table
        :dataSource="formData.diskInfo"
        :columns="diskColumns"
        :pagination="{ hideOnSinglePage: true }"
      />
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { onMounted, ref, reactive } from 'vue';
  import { getServerInfo } from '@/api/monitor/server';
  import { cpuColumns } from './cpuColumns';
  import { memoryColumns } from './memoryColumns';
  import { diskColumns } from './diskColumns';

  /**
   * 定义表单数据
   */
  const formData = reactive({
    cpuInfo: [],
    memoryInfo: [],
    systemInfo: {},
    jvmInfo: {},
    diskInfo: [],
  });

  /**
   * 加载服务信息
   */
  const loadServerInfo = async () => {
    const result = await getServerInfo();
    formData.cpuInfo.push(
      {
        name: '核心数',
        value: result.cpuInfo.cpuNum,
      },
      {
        name: '用户使用率',
        value: result.cpuInfo.used + '%',
      },
      {
        name: '系统使用率',
        value: result.cpuInfo.sys + '%',
      },
      {
        name: '当前空闲率',
        value: result.cpuInfo.free + '%',
      },
    );
    formData.memoryInfo.push(
      {
        name: '总内存',
        value1: result.memoryInfo.total + 'G',
        value2: result.jvmInfo.total + 'M',
      },
      {
        name: '已用内存',
        value1: result.memoryInfo.used + 'G',
        value2: result.jvmInfo.used + 'M',
      },
      {
        name: '剩余内存',
        value1: result.memoryInfo.free + 'G',
        value2: result.jvmInfo.free + 'M',
      },
      {
        name: '使用率',
        value1: result.memoryInfo.usage + '%',
        value2: result.jvmInfo.usage + '%',
      },
    );
    formData.systemInfo = result.systemInfo;
    formData.jvmInfo = result.jvmInfo;
    formData.diskInfo = result.diskInfo;
  };

  /**
   * 钩子函数
   */
  onMounted(() => {
    loadServerInfo();
  });
</script>
<style lang="less" scoped>
  .serverInfo-box {
    display: flex;
    margin-bottom: 20px;
    > .ant-card {
      flex: 1;
      &:nth-child(1) {
        margin-right: 20px;
      }
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
