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

const props = defineProps<{
  commonInfo?: Array<{
    title: string;
    items: Array<{
      label: string;
      value: string;
    }>;
  }>;
}>();

const { commonInfo } = toRefs(props);

const showCard = computed(() => (commonInfo.value?.length ?? 0) > 0);
</script>

<template>
  <NCard v-if="showCard" hoverable size="small">
    <template #header>
      <div>设备信息</div>
    </template>
    <template v-if="!!commonInfo && commonInfo.length > 0">
      <NFlex vertical :size="16">
        <template v-for="({ title, items }, index) in commonInfo" :key="`${title}-${index}`">
          <NFlex vertical>
            <NText strong :depth="3">{{ title }}</NText>
            <NDescriptions bordered :label-placement="'left'" :columns="2">
              <template v-for="({ label, value }, index) in items" :key="`${label}-${index}`">
                <NDescriptionsItem :label="label">{{ value }}</NDescriptionsItem>
              </template>
            </NDescriptions>
          </NFlex>
        </template>
      </NFlex>
    </template>
  </NCard>
</template>

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