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

const props = defineProps<{
  stationCode: string;
  ndmCamera: NdmCameraResultVO;
}>();

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

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

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

const commonInfo = computed(() => {
  const {
    createdTime,
    updatedTime,
    manufacturer,
    gb28181Enabled,
    onvifPort,
    onvifUsername,
    onvifPassword,
    onvifMajorIndex,
    onvifMinorIndex,
    icmpEnabled,
    // deviceType,
    // cameraType,
    community,
    //
  } = ndmCamera.value;
  return {
    创建时间: createdTime ?? '',
    更新时间: updatedTime ?? '',
    制造商: manufacturer ?? '',
    GB28181使能: `${!!gb28181Enabled ? '是' : '否'}`,
    ONVIF端口: `${onvifPort ?? ''}`,
    ONVIF用户名: onvifUsername ?? '',
    ONVIF密码: onvifPassword ?? '',
    ONVIF主流索引: `${onvifMajorIndex ?? ''}`,
    ONVIF辅流索引: `${onvifMinorIndex ?? ''}`,
    ICMP使能: `${!!icmpEnabled ? '是' : '否'}`,
    // 设备类型: deviceType ?? '',
    // 相机类型: cameraType ?? '',
    团体字符串: community ?? '',
  };
});

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="ndmCamera" />
          <DeviceCommonCard :common-info="commonInfo" />
        </NFlex>
      </NTabPane>
      <NTabPane name="历史诊断" tab="历史诊断">
        <!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
        <CameraHistoryDiagCard :station-code="stationCode" :ndm-camera="ndmCamera" :key="ndmCamera.id" />
      </NTabPane>
      <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
      <NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
        <pre class="raw-data">{{ { ...ndmCamera, lastDiagInfo } }}</pre>
      </NTabPane>
    </NTabs>
  </NCard>
</template>

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