<template>
  <n-card :bordered="false" class="device-status-card">
    <div class="card-header">
      <h2 class="card-title">设备状态总览</h2>
    </div>
    <div class="status-grid">
      <!-- 在线监测 -->
      <div class="status-item">
        <div class="percent blue">100%</div>
        <div class="name">在线监测</div>
        <div class="detail">在线: 56 离线: 0</div>
      </div>
      <!-- 视频监测 -->
      <div class="status-item">
        <div class="percent yellow">82%</div>
        <div class="name">视频监测</div>
        <div class="detail">在线: 87 离线: 2</div>
      </div>
      <!-- 人员定位 -->
      <div class="status-item">
        <div class="percent cyan">88%</div>
        <div class="name">人员定位</div>
        <div class="detail">在线: 16 离线: 2</div>
      </div>
      <!-- 车辆定位 -->
      <div class="status-item">
        <div class="percent green">100%</div>
        <div class="name">车辆定位</div>
        <div class="detail">在线: 7 离线: 2</div>
      </div>
    </div>
  </n-card>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.device-status-card {
  padding: 0.15rem;
  background: var(--n-bg-color-secondary);

  .card-header {
    margin-bottom: 0.15rem;
    .card-title {
      font-size: 0.18rem;
      font-weight: 600;
      color: var(--n-text-color-primary);
    }
  }

  .status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem;

    .status-item {
      text-align: center;
      padding: 0.1rem;
      background: rgba(10, 25, 71, 0.6);
      border-radius: 0.05rem;

      .percent {
        font-size: 0.24rem;
        font-weight: bold;
        margin-bottom: 0.05rem;
        &.blue { color: #36a2eb; }
        &.yellow { color: #facc15; }
        &.cyan { color: #4bc0c0; }
        &.green { color: #6dd230; }
      }

      .name {
        font-size: 0.14rem;
        color: var(--n-text-color-secondary);
        margin-bottom: 0.03rem;
      }

      .detail {
        font-size: 0.12rem;
        color: var(--n-text-color-tertiary);
      }
    }
  }
}
</style>