<script setup lang="ts">
import { NCard, NStatistic, NTag, NIcon, NGrid, NGi } from 'naive-ui';
import { Wifi } from '@vicons/ionicons5';
import { toRefs } from 'vue';

// 定义组件props
interface Props {
  name: string;
  online: boolean;
  offlineDeviceCount: number;
  alarmCount: number;
}

const props = defineProps<Props>();

const { name, online, offlineDeviceCount, alarmCount } = toRefs(props);
</script>

<template>
  <NCard bordered hoverable size="small" :title="name" class="station-card">
    <template #header-extra>
      <NTag :type="online ? 'success' : 'error'" size="small">
        <template #icon>
          <NIcon><Wifi /></NIcon>
        </template>
        {{ online ? '在线' : '离线' }}
      </NTag>
    </template>
    <template #default>
      <NGrid :cols="2">
        <NGi>
          <NStatistic label="离线设备" :value="offlineDeviceCount" :tabular-nums="true">
            <template #suffix>
              <span class="stat-suffix">台</span>
            </template>
          </NStatistic>
        </NGi>
        <NGi>
          <NStatistic label="告警记录" :value="alarmCount" :tabular-nums="true">
            <template #suffix>
              <span class="stat-suffix">条</span>
            </template>
          </NStatistic>
        </NGi>
      </NGrid>
    </template>
  </NCard>
</template>

<style scoped lang="scss">
.stat-suffix {
  font-size: 14px;
}
</style>
