<script setup lang="ts">
import type { NdmDeviceResultVO } from '@/apis/models';
import { DeviceTypeName, getDeviceTypeVal } from '@/enums/device-type';
import { NCard, NFlex, NTag } from 'naive-ui';
import { computed, toRefs } from 'vue';

const props = defineProps<{
  device: NdmDeviceResultVO;
}>();

// const emit = defineEmits<{}>();

const { device } = toRefs(props);

const type = computed(() => DeviceTypeName[getDeviceTypeVal(device.value.deviceType)]);
const name = computed(() => device.value.name ?? '-');
const ipAddr = computed(() => device.value.ipAddress ?? '-');
const gbCode = computed(() => Reflect.get(device.value, 'gbCode') as string | undefined);
const status = computed(() => device.value.deviceStatus);
</script>

<template>
  <NCard size="small" hoverable>
    <template #header>
      <NFlex :align="'center'">
        <NTag v-if="status === '10'" size="small" type="success">在线</NTag>
        <NTag v-else-if="status === '20'" size="small" type="error">离线</NTag>
        <NTag v-else size="small" type="warning">未知</NTag>
        <div>{{ name }}</div>
      </NFlex>
      <div style="font-size: small; color: #666">
        <div>
          <span>设备类型：</span>
          <span>{{ type }}</span>
        </div>
        <div>
          <span>IP地址：</span>
          <span>{{ ipAddr }}</span>
        </div>
        <div v-if="gbCode">
          <span>国标编码：</span>
          <span>{{ gbCode }}</span>
        </div>
        <!-- <div>
          <span>上游设备：</span>
          <span>{{ device.linkDescription ?? '暂无' }}</span>
        </div> -->
        <div v-if="device.snmpEnabled">
          <span>上次诊断时间：</span>
          <span>{{ device.lastDiagTime ?? '暂无' }}</span>
        </div>
      </div>
    </template>
  </NCard>
</template>

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