<template>
  <n-card :bordered="false" class="env-monitor-card">
    <div class="card-header">
      <h2 class="card-title">环境监测实时数据</h2>
      <n-button size="small" type="text" class="collapse-btn">
        <n-icon><ChevronUp /></n-icon> 收起
      </n-button>
    </div>
    <div class="env-grid">
      <div class="item">
        <n-icon color="#6dd230" size="0.25rem"><CheckCircle /></n-icon>
        <div class="name">在线</div>
      </div>
      <div class="item">
        <n-icon color="#ff6384" size="0.25rem"><ThermometerHalf /></n-icon>
        <div class="name">温度</div>
        <div class="value">25°C</div>
      </div>
      <div class="item">
        <n-icon color="#36a2eb" size="0.25rem"><Tint /></n-icon>
        <div class="name">湿度</div>
        <div class="value">25%RH</div>
      </div>
      <div class="item">
        <n-icon color="#a0b3d6" size="0.25rem"><Cloud /></n-icon>
        <div class="name">PM2.5</div>
        <div class="value">2.5μg/m³</div>
      </div>
      <div class="item">
        <n-icon color="#4bc0c0" size="0.25rem"><LocationArrow /></n-icon>
        <div class="name">风向</div>
        <div class="value">东</div>
      </div>
      <div class="item">
        <n-icon color="#9c27b0" size="0.25rem"><Wind /></n-icon>
        <div class="name">风速</div>
        <div class="value">25m/s</div>
      </div>
      <div class="item">
        <n-icon color="#facc15" size="0.25rem"><Speedometer /></n-icon>
        <div class="name">气压</div>
        <div class="value">8Kpa</div>
      </div>
      <div class="item">
        <n-icon color="#ff9f40" size="0.25rem"><Cloud /></n-icon>
        <div class="name">PM10</div>
        <div class="value">10μg/m³</div>
      </div>
    </div>
  </n-card>
</template>

<script setup lang="ts">
// import { CheckCircle, ThermometerHalf, Tint, Cloud, LocationArrow, Wind, Speedometer, ChevronUp } from '@vicons/ionicons5';
</script>

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

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.15rem;

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

    .collapse-btn {
      font-size: 0.14rem;
      color: var(--n-primary-color);
    }
  }

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

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

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

      .value {
        font-size: 0.18rem;
        font-weight: bold;
        color: var(--n-text-color-primary);
      }
    }
  }
}
</style>