<script setup lang="ts">
import type { NdmSecurityBoxDiagInfo, NdmSecurityBoxResultVO, Station } from '@/apis';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, SecurityBoxCircuitCard, SecurityBoxEnvCard } from '@/components';
import destr from 'destr';
import { NFlex } from 'naive-ui';
import { computed, toRefs } from 'vue';

const props = defineProps<{
  ndmDevice: NdmSecurityBoxResultVO;
  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 NdmSecurityBoxDiagInfo;
});

const commonInfo = computed(() => {
  const { stCommonInfo } = lastDiagInfo.value ?? {};
  const { 设备ID, 软件版本, 设备厂商, 设备别名, 设备型号, 硬件版本 } = stCommonInfo ?? {};
  return {
    设备ID: 设备ID ?? '',
    软件版本: 软件版本 ?? '',
    设备厂商: 设备厂商 ?? '',
    设备别名: 设备别名 ?? '',
    设备型号: 设备型号 ?? '',
    硬件版本: 硬件版本 ?? '',
  };
});

const cpuUsage = computed(() => lastDiagInfo.value?.stCommonInfo?.CPU使用率);
const memUsage = computed(() => lastDiagInfo.value?.stCommonInfo?.内存使用率);

const fanSpeeds = computed(() => lastDiagInfo.value?.info?.at(0)?.fanSpeeds);
const temperature = computed(() => lastDiagInfo.value?.info?.at(0)?.temperature);
const humidity = computed(() => lastDiagInfo.value?.info?.at(0)?.humidity);
const switches = computed(() => lastDiagInfo.value?.info?.at(0)?.switches);

const circuits = computed(() => lastDiagInfo.value?.info?.at(0)?.circuits);
</script>

<template>
  <NFlex vertical>
    <DeviceHeaderCard :ndm-device="ndmDevice" :station="station" />
    <DeviceCommonCard :common-info="commonInfo" />
    <DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
    <SecurityBoxEnvCard :fan-speeds="fanSpeeds" :temperature="temperature" :humidity="humidity" :switches="switches" />
    <SecurityBoxCircuitCard :ndm-device="ndmDevice" :station="station" :circuits="circuits" />
  </NFlex>
</template>

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