<script setup lang="ts">
import type { NdmSecurityBoxDiagInfo, NdmSecurityBoxResultVO } from '@/apis';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, SecurityBoxCircuitCard, SecurityBoxHistoryDiagCard, SecurityBoxInfoCard } from '@/components';
import { useSettingStore } from '@/stores';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, ref, toRefs } from 'vue';

const props = defineProps<{
  stationCode: string;
  ndmSecurityBox: NdmSecurityBoxResultVO;
}>();

const settingStore = useSettingStore();
const { debugModeEnabled } = storeToRefs(settingStore);

const { stationCode, ndmSecurityBox } = toRefs(props);

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

const commonInfo = computed<Record<string, string> | undefined>(() => {
  const info = lastDiagInfo.value?.stCommonInfo;
  if (info) {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { CPU使用率, 内存使用率, ...rest } = info;
    return rest;
  }
  return info;
});

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);

const selectedTab = ref('设备状态');
</script>

<template>
  <NCard size="small">
    <NTabs v-model:value="selectedTab" size="small">
      <NTabPane name="设备状态" tab="设备状态">
        <NFlex vertical>
          <DeviceHeaderCard :station-code="stationCode" :device="ndmSecurityBox" />
          <DeviceCommonCard :common-info="commonInfo" />
          <DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
          <SecurityBoxInfoCard :fan-speeds="fanSpeeds" :temperature="temperature" :humidity="humidity" :switches="switches" />
          <SecurityBoxCircuitCard :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :circuits="circuits" />
        </NFlex>
      </NTabPane>
      <NTabPane name="历史诊断" tab="历史诊断">
        <!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
        <SecurityBoxHistoryDiagCard :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :key="ndmSecurityBox.id" />
      </NTabPane>
      <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
      <NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
        <pre class="raw-data">{{ { ...ndmSecurityBox, lastDiagInfo } }}</pre>
      </NTabPane>
    </NTabs>
  </NCard>
</template>

<style scoped lang="scss">
.raw-data {
  white-space: pre-wrap;
  word-break: break-all;
}
</style>
