<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { PageContainer } from '@ant-design-vue/pro-layout';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { getSystemInfo } from '@/api/monitor/system';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();

/**加载状态 */
let loading = ref<boolean>(true);

/**磁盘信息表格字段列 */
let diskTableColumns: ColumnsType = [
  {
    title: t('views.monitor.system.disk'),
    dataIndex: 'target',
    align: 'center',
  },
  {
    title: t('views.monitor.system.totalSize'),
    dataIndex: 'size',
    align: 'center',
  },

  {
    title: t('views.monitor.system.lastSize'),
    dataIndex: 'avail',
    align: 'center',
  },
  {
    title: t('views.monitor.system.usageSize'),
    dataIndex: 'used',
    align: 'center',
  },
  {
    title: t('views.monitor.system.spaceUsage'),
    dataIndex: 'pcent',
    align: 'center',
  },
];

/**数据参数类型 */
type ServerType = {
  /**CPU */
  cpu: Record<string, string | number>;
  /**磁盘 */
  disk: Record<string, string>[];
  /**内存 */
  memory: Record<string, string | number>;
  /**网络 */
  network: Record<string, string>;
  /**项目 */
  project: Record<string, string>;
  /**系统 */
  system: Record<string, string | number>;
  /**时间 */
  time: Record<string, string | number>;
};

let server: ServerType = reactive({
  cpu: {},
  disk: [],
  memory: {},
  network: {},
  project: {},
  system: {},
  time: {},
});

function loadUpTime(uptime: string | number) {
  if (typeof uptime === 'string') {
    return uptime;
  }
  if (uptime <= 0) {
    return '-';
  }
  let days = Math.floor(uptime / 86400);
  let hours = Math.floor((uptime % 86400) / 3600);
  let minutes = Math.floor((uptime % 3600) / 60);
  let seconds = uptime % 60;
  let strArr: string[] = [];
  if (days !== 0) {
    strArr.push(`${days}${t('common.units.day')}`);
  }
  if (hours !== 0) {
    strArr.push(`${hours}${t('common.units.hour')}`);
  }
  if (minutes !== 0) {
    strArr.push(`${minutes}${t('common.units.minute')}`);
  }
  strArr.push(`${seconds}${t('common.units.second')}`);
  return strArr.join(' ');
}

onMounted(() => {
  getSystemInfo().then(res => {
    if (res.code === RESULT_CODE_SUCCESS && res.data) {
      // CPU信息
      let cpu = res.data.cpu;
      cpu.coreUsed = cpu.coreUsed.map((item: string) => item).join(' / ');
      server.cpu = cpu;
      // 磁盘信息
      server.disk = res.data.disk;
      // 内存信息
      server.memory = res.data.memory;
      // 网络信息
      server.network = res.data.network;
      // 项目信息
      server.project = res.data.project;
      // 系统信息
      server.system = res.data.system;
      // 时间信息
      server.time = res.data.time;
      // 加载状态
      loading.value = false;
    }
  });
});
</script>

<template>
  <PageContainer :loading="loading">
    <a-card
      :title="t('views.monitor.system.systemInfo')"
      :bordered="false"
      :body-style="{ marginBottom: '24px', padding: 0 }"
    >
      <a-descriptions
        size="middle"
        layout="horizontal"
        :label-style="{ width: '140px' }"
        :column="{ lg: 2, md: 2, xs: 1 }"
        :bordered="true"
      >
        <a-descriptions-item :label="t('views.monitor.system.runPlace')">
          {{ server.system.platform }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.placeVersion')">
          {{ server.system.platformVersion }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.systemPlace')">
          {{ server.system.os }}
        </a-descriptions-item>
        <a-descriptions-item
          :label="t('views.monitor.system.systemArchitecture')"
        >
          {{ server.system.arch }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.host')">
          {{ server.system.hostname }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.runTime')">
          {{ loadUpTime(server.system.bootTime) }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card
      :title="t('views.monitor.system.cpuInfo')"
      :bordered="false"
      :body-style="{ marginBottom: '24px', padding: 0 }"
    >
      <a-descriptions
        size="middle"
        layout="horizontal"
        :label-style="{ width: '140px' }"
        :column="1"
        :bordered="true"
      >
        <a-descriptions-item :label="t('views.monitor.system.model')">
          {{ server.cpu.model }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.hz')">
          {{ server.cpu.speed }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.cores')">
          {{ server.cpu.core }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.usage')">
          {{ server.cpu.coreUsed }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card
      :title="t('views.monitor.system.memory')"
      :bordered="false"
      :body-style="{ marginBottom: '24px', padding: 0 }"
    >
      <a-descriptions
        size="middle"
        layout="horizontal"
        :label-style="{ width: '140px' }"
        :column="{ lg: 2, md: 2, xs: 1 }"
        :bordered="true"
      >
        <a-descriptions-item :label="t('views.monitor.system.totalMemory')">
          {{ server.memory.totalmem }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.lastMemory')">
          {{ server.memory.freemem }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.usage')">
          {{ server.memory.usage }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.proMemory')">
          {{ server.memory.rss }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.heapSize')">
          {{ server.memory.heapTotal }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.heapUsage')">
          {{ server.memory.heapUsed }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.libUse')">
          {{ server.memory.external }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card
      :title="t('views.monitor.system.timeInfo')"
      :bordered="false"
      :body-style="{ marginBottom: '24px', padding: 0 }"
    >
      <a-descriptions
        size="middle"
        layout="horizontal"
        :label-style="{ width: '140px' }"
        :column="{ lg: 3, md: 3, xs: 1 }"
        :bordered="true"
      >
        <a-descriptions-item :label="t('views.monitor.system.time')">
          {{ server.time.current }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.timeZone')">
          {{ server.time.timezone }}
        </a-descriptions-item>
        <a-descriptions-item :label="t('views.monitor.system.timeZoneName')">
          {{ server.time.timezoneName }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card
      :title="t('views.monitor.system.networkInfo')"
      :bordered="false"
      :body-style="{ marginBottom: '24px', padding: 0 }"
    >
      <a-descriptions
        size="middle"
        layout="horizontal"
        :label-style="{ width: '140px' }"
        :column="1"
        :bordered="true"
      >
        <a-descriptions-item
          :label="name"
          v-for="(value, name) in server.network"
          :key="name"
        >
          {{ value }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card
      :title="t('views.monitor.system.diskInfo')"
      :bordered="false"
      :body-style="{ padding: 0 }"
    >
      <a-table
        class="disk"
        row-key="target"
        size="middle"
        :columns="diskTableColumns"
        :data-source="server.disk"
        :pagination="false"
        :scroll="{ x: true }"
      >
      </a-table>
    </a-card>
  </PageContainer>
</template>

<style lang="less" scoped></style>
