<template>
  <div class="plan-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="plan-types">
            <div class="plan-type active">
              <div class="plan-name">防汛应急预案</div>
              <div class="plan-desc">蓝色预警级别响应</div>
            </div>
            <div class="plan-type">
              <div class="plan-name">水库调度预案</div>
              <div class="plan-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="unit-list">
            <div class="unit-item">
              <div class="unit-name">黑林镇防汛办</div>
              <div class="unit-contact">张主任</div>
            </div>
            <div class="unit-item">
              <div class="unit-name">小塔山水库管理处</div>
              <div class="unit-contact">李处长</div>
            </div>
            <div class="unit-item">
              <div class="unit-name">黑林水文站</div>
              <div class="unit-contact">王站长</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="plan-content-list">
            <div class="plan-content-item">
              <div class="content-title">预警信息发布</div>
              <div class="content-desc">2小时内发布预警通知</div>
            </div>
            <div class="plan-content-item">
              <div class="content-title">人员转移</div>
              <div class="content-desc">危险区域人员撤离</div>
            </div>
            <div class="plan-content-item">
              <div class="content-title">物资调配</div>
              <div class="content-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="plan-status">
            <div class="status-item">
              <div class="status-label">预案等级</div>
              <div class="status-value blue">IV级</div>
            </div>
            <div class="status-item">
              <div class="status-label">更新时间</div>
              <div class="status-value">2026-03-09</div>
            </div>
            <div class="status-item">
              <div class="status-label">执行状态</div>
              <div class="status-value">待命</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

<style scoped>
.plan-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;
}

.plan-types {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-type {
  padding: 12px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.plan-type:hover,
.plan-type.active {
  border-color: #62f6fb;
  background: rgba(98, 246, 251, 0.1);
}

.plan-name {
  color: #e0fcff;
  font-size: 15px;
  font-weight: bold;
}

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

.unit-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.unit-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);
}

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

.unit-contact {
  color: #7bbef6;
  font-size: 13px;
}

.plan-content-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-content-item {
  padding: 10px 12px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.content-title {
  color: #e0fcff;
  font-size: 14px;
  font-weight: bold;
}

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

.plan-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-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);
}

.status-label {
  color: #7bbef6;
  font-size: 14px;
}

.status-value {
  color: #e0fcff;
  font-size: 14px;
  font-weight: bold;
}

.status-value.blue {
  color: #3b82f6;
}
</style>
