<script setup lang="ts">
import { type NdmServerDiagInfo, type NdmServerResultVO, type Station } from '@/apis';
import { DeviceHardwareCard, DeviceHeaderCard, ServerAlive, ServerStreamPush } from '@/components';
import destr from 'destr';
import { NFlex } from 'naive-ui';
import { computed, toRefs } from 'vue';

const props = defineProps<{
  ndmDevice: NdmServerResultVO;
  station: Station;
}>();

const { ndmDevice, station } = toRefs(props);

const lastDiagInfo = computed(() => {
  const result = destr<any>(ndmDevice.value.lastDiagInfo);
  if (!result) return null;
  if (typeof result !== 'object') return null;
  return result as NdmServerDiagInfo;
});

const cpuUsage = computed(() => lastDiagInfo.value?.commInfo?.CPU使用率);
const memUsage = computed(() => lastDiagInfo.value?.commInfo?.内存使用率);
const diskUsage = computed(() => lastDiagInfo.value?.commInfo?.磁盘使用率);
const runningTime = computed(() => lastDiagInfo.value?.commInfo?.系统运行时间);
</script>

<template>
  <NFlex vertical>
    <DeviceHeaderCard :ndm-device="ndmDevice" :station="station" />
    <DeviceHardwareCard running-time-label="服务器运行时间" :cpu-usage="cpuUsage" :mem-usage="memUsage" :disk-usage="diskUsage" :running-time="runningTime" />
    <ServerAlive :ndm-device="ndmDevice" :station="station" />
    <ServerStreamPush :ndm-device="ndmDevice" :station="station" />
  </NFlex>
</template>

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