<script setup lang="ts">
import { DropletIcon, FanIcon, ShieldIcon, ThermometerIcon, ZapIcon } from 'lucide-vue-next';
import { NCard, NFlex, NIcon, NTag } from 'naive-ui';
import { computed, toRefs } from 'vue';

const props = defineProps<{
  fanSpeeds?: number[];
  temperature?: number;
  humidity?: number;
  switches?: number[];
}>();

const { fanSpeeds, temperature, humidity, switches } = toRefs(props);

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

// 门禁状态
const accessControlStatus = computed(() => {
  if (!switches?.value || switches.value.length < 1) return null;
  const status = switches.value.at(0)!;
  return status === 0 ? '开门' : status === 1 ? '关门' : '-';
});

// 防雷状态
const lightningProtectionStatus = computed(() => {
  if (!switches?.value || switches.value.length < 2) return null;
  const status = switches.value.at(1)!;
  return status === 0 ? '正常' : status === 1 ? '失效' : '-';
});

const getStatusTagType = (status: string | null) => {
  if (['正常'].includes(status ?? '')) return 'success';
  if (['失效'].includes(status ?? '')) return 'error';
  return 'default';
};

const formattedFanSpeeds = computed(() => {
  if (!fanSpeeds?.value || fanSpeeds.value.length === 0) return null;
  return fanSpeeds.value.map((speed, index) => `风扇${index + 1}: ${speed} RPM`).join(', ');
});
</script>

<template>
  <NCard v-if="showCard" hoverable size="small">
    <template #header>
      <span>安防箱状态</span>
    </template>
    <template #default>
      <NFlex vertical>
        <NTag>
          <template #icon>
            <NIcon :component="ThermometerIcon" />
          </template>
          <template #default>
            <span>温度: {{ temperature }}℃</span>
          </template>
        </NTag>
        <NTag>
          <template #icon>
            <NIcon :component="DropletIcon" />
          </template>
          <template #default>
            <span>湿度: {{ humidity }}%</span>
          </template>
        </NTag>
        <NTag>
          <template #icon>
            <NIcon :component="FanIcon" />
          </template>
          <template #default>
            <span>风扇: {{ formattedFanSpeeds }}</span>
          </template>
        </NTag>
        <NTag :type="getStatusTagType(accessControlStatus)">
          <template #icon>
            <NIcon :component="ShieldIcon" />
          </template>
          <template #default>
            <span>门禁: {{ accessControlStatus }}</span>
          </template>
        </NTag>
        <NTag :type="getStatusTagType(lightningProtectionStatus)">
          <template #icon>
            <NIcon :component="ZapIcon" />
          </template>
          <template #default>
            <span>防雷: {{ lightningProtectionStatus }}</span>
          </template>
        </NTag>
      </NFlex>
    </template>
  </NCard>
</template>

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