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

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

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

const commonInfo = computed<DeviceCommonCardProps['commonInfo']>(() => {
  const { createdTime, updatedTime, manufacturer } = ndmDevice.value;
  return [
    {
      title: '设备接入信息',
      items: [
        { label: '创建时间', value: createdTime || '-' },
        { label: '更新时间', value: updatedTime || '-' },
        { label: '制造商', value: manufacturer || '-' },
      ],
    },
  ];
});
</script>

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

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