<script setup lang="ts">
import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
import { computed, toRefs } from 'vue';

const props = defineProps<{
  commonInfo?: Record<string, string>;
}>();

const { commonInfo } = toRefs(props);

const showCard = computed(() => !!commonInfo.value);

const commonInfoEntries = computed(() => Object.entries(commonInfo.value ?? {}));
</script>

<template>
  <NCard v-if="showCard" hoverable size="small">
    <template #header>
      <div>设备信息</div>
    </template>
    <NDescriptions bordered label-placement="left" :columns="2">
      <template v-for="item in commonInfoEntries" :key="item[0]">
        <NDescriptionsItem :label="item[0]">{{ item[1] }}</NDescriptionsItem>
      </template>
    </NDescriptions>
  </NCard>
</template>

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