<template>
  <div class="warning-panel">
    <div class="left-sidebar">
      <div class="data-card">
        <div class="card-header">
          <h3 class="card-title">当前预警</h3>
        </div>
        <div class="card-body">
          <div class="warning-current">
            <div class="warning-level-indicator blue"></div>
            <div class="warning-text">
              <div class="warning-title">蓝色预警</div>
              <div class="warning-desc">水位接近警戒，请密切关注</div>
            </div>
          </div>
        </div>
      </div>

      <div class="data-card mt-20">
        <div class="card-header">
          <h3 class="card-title">预警站点</h3>
        </div>
        <div class="card-body">
          <div class="warning-stations">
            <div class="warning-station">
              <div class="station-name">陡沟站</div>
              <div class="station-level warning">3.2m</div>
              <div class="station-status">黄色</div>
            </div>
            <div class="warning-station">
              <div class="station-name">黑林站</div>
              <div class="station-level normal">3.8m</div>
              <div class="station-status">正常</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right-sidebar">
      <div class="data-card">
        <div class="card-header">
          <h3 class="card-title">预警历史</h3>
        </div>
        <div class="card-body">
          <div class="warning-history">
            <div class="history-item">
              <div class="history-time">2026-03-09 14:30</div>
              <div class="history-level blue">蓝色预警</div>
            </div>
            <div class="history-item">
              <div class="history-time">2026-03-08 18:20</div>
              <div class="history-level blue">蓝色预警</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DataCard from './DataCard.vue'

export default {
  name: 'HydrologyWarningPanel',
  components: {
    DataCard
  }
}
</script>

<style scoped>
.warning-panel {
  width: 100%;
  height: 100%;
}

.left-sidebar {
  position: absolute;
  left: 20px;
  top: 120px;
  width: 350px;
  z-index: 5;
}

.right-sidebar {
  position: absolute;
  right: 20px;
  top: 120px;
  width: 350px;
  z-index: 5;
}

.mt-20 {
  margin-top: 20px;
}

.data-card {
  width: 100%;
  background: rgba(0, 20, 40, 0.7);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

.card-header {
  height: 50px;
  background-image: url('/src/assets/images/数据小标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  padding: 6px 20px 0;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #e0fcff;
  margin: 0;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
  padding-left: 20px;
}

.card-body {
  padding: 12px;
  min-height: auto;
  font-size: 16px;
  line-height: 1.6;
  margin-top: -10px;
}

.warning-current {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.warning-level-indicator {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.warning-level-indicator.blue {
  background-color: #3b82f6;
}

.warning-text {
  flex: 1;
}

.warning-title {
  color: #e0fcff;
  font-size: 18px;
  font-weight: bold;
}

.warning-desc {
  color: #7bbef6;
  font-size: 14px;
  margin-top: 4px;
}

.warning-stations {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warning-station {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.station-name {
  color: #e0fcff;
  font-size: 14px;
  font-weight: bold;
}

.station-level {
  font-size: 14px;
  font-weight: bold;
}

.station-level.normal {
  color: #62f6fb;
}

.station-level.warning {
  color: #ffd93d;
}

.station-status {
  font-size: 13px;
  color: #7bbef6;
}

.warning-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.history-time {
  color: #7bbef6;
  font-size: 13px;
}

.history-level {
  font-size: 14px;
  font-weight: bold;
}

.history-level.blue {
  color: #3b82f6;
}
</style>
