<template>
  <n-card :bordered="false" class="today-alarm-card">
    <div class="card-header">
      <h2 class="card-title">今日报警信息</h2>
    </div>
    <div class="alarm-tabs">
      <n-tag type="error" ghost>SO5报警(0)</n-tag>
      <n-tag type="warning" ghost>车辆报警(3)</n-tag>
      <n-tag type="info" ghost>越界开采(4)</n-tag>
      <n-tag type="primary" ghost>在线监测(4)</n-tag>
    </div>
    <div class="alarm-list">
      <div class="item orange">
        <div class="content">
          <div class="device">边坡表面位移01</div>
          <div class="level">橙色预警</div>
        </div>
        <div class="detail">
          <div class="value">0.0047mm</div>
          <div class="time">2025-01-10 14:21:31</div>
        </div>
      </div>
      <div class="item blue">
        <div class="content">
          <div class="device">降雨量</div>
          <div class="level">蓝色预警</div>
        </div>
        <div class="detail">
          <div class="value">0.0047mm</div>
          <div class="time">2025-01-10 14:21:31</div>
        </div>
      </div>
      <div class="item yellow">
        <div class="content">
          <div class="device">边坡表面位移01</div>
          <div class="level">黄色预警</div>
        </div>
        <div class="detail">
          <div class="value">0.0047mm</div>
          <div class="time">2025-01-10 14:21:31</div>
        </div>
      </div>
    </div>
  </n-card>
</template>

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

<style scoped lang="scss">
.today-alarm-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);
    }
  }

  .alarm-tabs {
    display: flex;
    gap: 0.05rem;
    margin-bottom: 0.15rem;
    flex-wrap: wrap;
  }

  .alarm-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-height: 1.2rem;
    overflow-y: auto;

    .item {
      padding: 0.1rem;
      background: rgba(10, 25, 71, 0.6);
      border-radius: 0.05rem;
      display: flex;
      justify-content: space-between;
      font-size: 0.14rem;

      &.orange { border-left: 0.03rem solid #ff9f40; }
      &.blue { border-left: 0.03rem solid #36a2eb; }
      &.yellow { border-left: 0.03rem solid #facc15; }

      .content {
        .device { color: var(--n-text-color-primary); }
        .level { font-size: 0.12rem; margin-top: 0.03rem; }
      }

      .detail {
        text-align: right;
        font-size: 0.12rem;
        color: var(--n-text-color-secondary);
        .value { margin-bottom: 0.03rem; }
      }
    }
  }
}
</style>