<!--实战演练管理-->
<template>
  <div class="app-container">
    <div class="drill-layout">
      <!-- ===== 左列 ===== -->
      <div class="col-left">
        <!-- 演练计划模板 -->
        <div class="panel">
          <div class="panel-header">
            <span><el-icon><Document /></el-icon> 演练计划模板</span>
            <el-button type="primary" size="small" @click="handleAddTemplate">新增</el-button>
          </div>
          <div class="panel-body">
            <div class="template-item" v-for="tpl in templates" :key="tpl.id">
              <div class="template-info">
                <div class="template-name">{{ tpl.name }}</div>
                <div class="template-date">{{ tpl.date }}</div>
              </div>
              <div class="template-actions">
                <el-button link type="primary" @click="handleEditTemplate(tpl)"><el-icon><Edit /></el-icon></el-button>
                <el-button link type="success" @click="handleUseTemplate(tpl)">使用</el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 演练计划设置 -->
        <div class="panel">
          <div class="panel-header">
            <span><el-icon><Setting /></el-icon> 演练计划设置</span>
            <div class="header-actions">
              <el-button type="primary" size="small" @click="handleAddPlan">新增计划</el-button>
            </div>
          </div>
          <div class="panel-body">
            <div class="search-bar">
              <el-input v-model="planSearch" placeholder="按演练项目/目标查询" size="small" style="width: 160px" />
              <el-button type="primary" size="small" @click="handleSearchPlan">查询</el-button>
            </div>
            <div class="plan-item" v-for="plan in plans" :key="plan.id">
              <div class="plan-header">
                <div class="plan-name">{{ plan.name }}</div>
                <div class="plan-actions">
                  <el-button link type="primary" @click="handleEditPlan(plan)"><el-icon><Edit /></el-icon></el-button>
                  <el-button link type="danger" @click="handleDeletePlan(plan)"><el-icon><Delete /></el-icon></el-button>
                </div>
              </div>
              <div class="plan-details">
                <div class="plan-row"><span class="plan-label">目标：</span>{{ plan.target }}</div>
                <div class="plan-row"><span class="plan-label">项目：</span>{{ plan.project }}</div>
                <div class="plan-row"><span class="plan-label">事件：</span>{{ plan.event }}</div>
                <div class="plan-row"><span class="plan-label">人员：</span>{{ plan.personnel }}</div>
                <div class="plan-row">
                  <span class="plan-label">状态：</span>
                  <el-tag :type="plan.status === '进行中' ? 'warning' : 'success'" size="small">{{ plan.status }}</el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- ===== 中列 + 右列合并区域 ===== -->
      <div class="col-right">
        <!-- 演练结果记录与分析评估 -->
        <div class="panel">
          <div class="panel-header">
            <span><el-icon><DataAnalysis /></el-icon> 演练结果记录与分析评估</span>
            <el-button type="warning" size="small" @click="sendToSubsystem">
              发送至统计分析子系统 & 应急评估子系统
            </el-button>
          </div>
          <div class="panel-body">
            <div class="info-grid">
              <!-- 监测监控信息 -->
              <div class="info-card">
                <div class="info-title"><el-icon><Monitor /></el-icon> 监测监控信息</div>
                <div class="info-content">
                  <div class="info-line">烟感传感器报警：化工园区储罐区3号罐</div>
                  <div class="info-line">热成像检测到火源：储罐区西侧</div>
                  <div class="info-line">风速监测：12 m/s，风向东南</div>
                </div>
              </div>

              <!-- 接警信息 -->
              <div class="info-card">
                <div class="info-title"><el-icon><Phone /></el-icon> 接警信息</div>
                <div class="info-content">
                  <div class="info-line">时间：2025-06-18 09:32:21</div>
                  <div class="info-line">报警中心：安保值班室 张强</div>
                  <div class="info-line">地点：化工园区储罐区</div>
                </div>
              </div>

              <!-- 指挥调度信息 -->
              <div class="info-card">
                <div class="info-title"><el-icon><Guide /></el-icon> 指挥调度信息</div>
                <div class="info-content">
                  <div class="info-line">调派：3个消防中队 + 1个危化品处置小组</div>
                  <div class="info-line">已设置现场指挥部</div>
                  <div class="info-line">暂无人员伤亡报告</div>
                </div>
              </div>

              <!-- 决策信息 -->
              <div class="info-card">
                <div class="info-title"><el-icon><Operation /></el-icon> 决策信息</div>
                <div class="info-content">
                  <div class="info-line">总指挥下达命令：启动一级应急响应</div>
                  <div class="info-line">疏散周边500m范围内人员</div>
                  <div class="info-line">请求消防增援</div>
                </div>
              </div>

              <!-- 对外发布信息 -->
              <div class="info-card info-card-full">
                <div class="info-title"><el-icon><ChatDotRound /></el-icon> 对外发布信息</div>
                <div class="info-content">
                  <div class="info-line">官方发布："事故已控制，无人员伤亡，提醒周边居民关闭门窗。"</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 统计分析子系统 结果 -->
        <div class="panel">
          <div class="panel-header">
            <span><el-icon><TrendCharts /></el-icon> 统计分析子系统 结果</span>
          </div>
          <div class="panel-body">
            <div class="analysis-result">
              <div class="analysis-time">分析时间: 16:50:52</div>
              <div class="analysis-detail">
                <div class="detail-row"><span class="detail-label">技能：</span>灭火、堵漏</div>
                <div class="detail-row"><span class="detail-label">装备：</span>防护服、灭火器</div>
              </div>
              <div class="analysis-eval">
                <div class="eval-title">评估结果</div>
                <div class="eval-grid">
                  <div class="eval-item">
                    <div class="eval-label">任务完成率</div>
                    <div class="eval-value">67%</div>
                  </div>
                  <div class="eval-item">
                    <div class="eval-label">响应时效</div>
                    <div class="eval-value">达标</div>
                  </div>
                  <div class="eval-item">
                    <div class="eval-label">协同评分</div>
                    <div class="eval-value">良好</div>
                  </div>
                  <div class="eval-item">
                    <div class="eval-label">综合等级</div>
                    <div class="eval-value highlight">良好</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Document, Edit, Delete, Setting, DataAnalysis, Monitor,
  Phone, Guide, Operation, ChatDotRound, TrendCharts
} from '@element-plus/icons-vue'

// ---------- 模板 ----------
const templates = ref([
  { id: 1, name: '化工泄漏实战演练模板', date: '2025-01-01' },
  { id: 2, name: '地震救援实战演练模板', date: '2025-01-01' }
])

const handleAddTemplate = () => { ElMessage.success('新增演练模板（Mock）') }
const handleEditTemplate = (tpl) => { ElMessage.success(`编辑模板: ${tpl.name}`) }
const handleUseTemplate = (tpl) => { ElMessage.success(`已应用模板: ${tpl.name}`) }

// ---------- 计划 ----------
const planSearch = ref('')
const plans = ref([
  {
    id: 1,
    name: '2025夏季危化品泄漏实战演练',
    target: '提升泄漏封堵效率',
    project: '储罐区泄漏及人员疏散',
    event: '泄漏扩大',
    personnel: '指挥员张立、消防队12人',
    status: '进行中'
  },
  {
    id: 2,
    name: '洪涝灾害救援演练',
    target: '提升水上救援能力',
    project: '城市内涝人员转移',
    event: '暴雨持续水位上涨',
    personnel: '指挥员王伟、救援队8人',
    status: '已完成'
  },
  {
    id: 3,
    name: '化工泄漏实战演练 衍生计划',
    target: '检验应急预案有效性',
    project: '危化品储罐区综合演练',
    event: '泄漏+火灾叠加',
    personnel: '指挥员李明、消防队15人',
    status: '进行中'
  }
])

const handleAddPlan = () => { ElMessage.success('新增演练计划（Mock）') }
const handleEditPlan = (plan) => { ElMessage.success(`编辑计划: ${plan.name}`) }
const handleDeletePlan = (plan) => {
  ElMessageBox.confirm('确认删除该计划?', '提示', { type: 'warning' }).then(() => {
    plans.value = plans.value.filter(p => p.id !== plan.id)
    ElMessage.success('删除成功')
  }).catch(() => {})
}
const handleSearchPlan = () => { ElMessage.success('查询计划（Mock）') }

// ---------- 发送至子系统 ----------
const sendToSubsystem = () => {
  ElMessage.success('已发送至统计分析子系统 & 应急评估子系统')
}
</script>

<style scoped lang="scss">
.drill-layout {
  display: flex;
  gap: 12px;
  min-height: calc(100vh - 160px);
}

.col-left {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.col-right {
  width: 75%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f5f7fa;
    border-bottom: 1px solid #e4e7ed;
    font-weight: bold;
    font-size: 14px;
    color: #303133;
    flex-wrap: wrap;
    gap: 8px;

    span {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .el-icon {
      color: #409eff;
    }
  }

  .panel-body {
    padding: 12px 14px;
  }
}

// 模板列表
.template-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #ebeef5;

  &:last-child { border-bottom: none; }

  .template-info {
    .template-name { font-size: 13px; color: #303133; font-weight: 500; }
    .template-date { font-size: 12px; color: #909399; margin-top: 2px; }
  }

  .template-actions {
    display: flex;
    gap: 4px;
    align-items: center;
  }
}

// 计划搜索
.search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

// 计划卡片
.plan-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 8px;
  background: #fafafa;

  &:last-child { margin-bottom: 0; }

  .plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;

    .plan-name {
      font-size: 13px;
      font-weight: bold;
      color: #303133;
    }

    .plan-actions {
      display: flex;
      gap: 2px;
    }
  }

  .plan-details {
    .plan-row {
      font-size: 12px;
      color: #606266;
      line-height: 1.8;

      .plan-label {
        color: #909399;
      }
    }
  }
}

// 信息卡片网格
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.info-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 12px;
  background: #fafafa;

  &.info-card-full {
    grid-column: 1 / -1;
  }

  .info-title {
    font-size: 13px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;

    .el-icon { color: #409eff; }
  }

  .info-content {
    .info-line {
      font-size: 12px;
      color: #606266;
      line-height: 1.8;
    }
  }
}

// 统计分析
.analysis-result {
  .analysis-time {
    font-size: 12px;
    color: #909399;
    margin-bottom: 10px;
  }

  .analysis-detail {
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background: #fafafa;

    .detail-row {
      font-size: 13px;
      color: #606266;
      line-height: 1.8;

      .detail-label {
        color: #909399;
      }
    }
  }

  .analysis-eval {
    .eval-title {
      font-size: 13px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 8px;
    }

    .eval-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .eval-item {
      border: 1px solid #ebeef5;
      border-radius: 4px;
      padding: 10px;
      text-align: center;

      .eval-label {
        font-size: 12px;
        color: #909399;
        margin-bottom: 4px;
      }

      .eval-value {
        font-size: 16px;
        font-weight: bold;
        color: #303133;

        &.highlight { color: #67c23a; }
      }
    }
  }
}
</style>
