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

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

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

const commonInfo = computed(() => {
  const {
    createdTime,
    updatedTime,
    manufacturer,
    gb28181Enabled,
    onvifPort,
    onvifUsername,
    onvifPassword,
    onvifMajorIndex,
    onvifMinorIndex,
    icmpEnabled,
    community,
    //
  } = ndmDevice.value;
  return {
    创建时间: createdTime ?? '-',
    更新时间: updatedTime ?? '-',
    制造商: manufacturer ?? '-',
    GB28181启用: `${!!gb28181Enabled ? '是' : '否'}`,
    ONVIF端口: `${onvifPort ?? '-'}`,
    ONVIF用户名: onvifUsername ?? '-',
    ONVIF密码: onvifPassword ?? '-',
    ONVIF主流索引: `${onvifMajorIndex ?? '-'}`,
    ONVIF辅流索引: `${onvifMinorIndex ?? '-'}`,
    ICMP启用: `${!!icmpEnabled ? '是' : '否'}`,
    团体字符串: community ?? '-',
  };
});
</script>

<template>
  <NFlex vertical>
    <DeviceHeaderCard :ndm-device="ndmDevice" :station="station" />
    <DeviceCommonCard :common-info="commonInfo" />
  </NFlex>
</template>

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