<script setup lang="ts">
import type { NdmNvrFanInfo, NdmNvrPowerSupplyInfo } from '@/apis';
import { FanIcon, PlugIcon } from 'lucide-vue-next';
import { NCard, NFlex, NIcon, NTag } from 'naive-ui';
import { computed, toRefs } from 'vue';

const props = defineProps<{
  fanInfo?: NdmNvrFanInfo[];
  powerSupplyInfo?: NdmNvrPowerSupplyInfo[];
}>();

const { fanInfo, powerSupplyInfo } = toRefs(props);

const showCard = computed(() => {
  return Object.values(props).some((value) => !!value);
});
</script>

<template>
  <NCard v-if="showCard" hoverable size="small">
    <template #header>
      <span>录像机环境状态</span>
    </template>
    <template #default>
      <NFlex vertical>
        <NTag v-for="info in fanInfo ?? []" :key="info['索引号']">
          <template #icon>
            <NIcon :component="FanIcon" />
          </template>
          <template #default>
            <span>风扇{{ info['索引号'] }}: {{ info['风扇转速(rpm)'] }} RPM</span>
          </template>
        </NTag>
        <NTag v-for="info in powerSupplyInfo ?? []" :key="info['索引号']">
          <template #icon>
            <NIcon :component="PlugIcon" />
          </template>
          <template #default>
            <span>电源{{ info['索引号'] }}: {{ info['电源状态'] }}</span>
          </template>
        </NTag>
      </NFlex>
    </template>
  </NCard>
</template>

<style scoped></style>
