<template>
  <div class="prototype-container">
    <!-- 头部区域 -->
    <div class="app-header">
      <div class="title-section">
        <h1>
          <i class="fas fa-file-alt"></i> 应急预案在线审批机制
        </h1>
        <p>领导 · 专家评审修正 | 科学高效 · 快速响应</p>
      </div>
      <div class="badge-area">
        <i class="fas fa-check-circle"></i> 先进性·科学性·高效性
      </div>
    </div>

    <div class="dashboard-grid">
      <!-- 左侧面板：审批流程设置 + 预案调整管理 -->
      <div class="left-panel">
        <!-- 1. 审批流程设置模块 -->
        <div class="section-card">
          <div class="section-header">
            <h2><i class="fas fa-diagram-project"></i> 审批流程设置</h2>
            <span class="tag">动态流转</span>
          </div>
          <div class="section-content">
            <div class="flow-steps">
              <div
                  v-for="(step, idx) in flowSteps"
                  :key="idx"
                  class="flow-node"
                  :class="{ 'active': step.status === 'active', 'pending': step.status === 'pending' }"
              >
                <div class="node-icon"><i :class="step.icon"></i></div>
                <div class="node-info">
                  <div class="node-title">{{ step.title }}</div>
                  <div class="node-desc">{{ step.desc }}</div>
                </div>
                <div class="node-badge">
                  <i :class="step.status === 'active' ? 'fas fa-check-circle' : 'fas fa-clock'"></i>
                  {{ step.statusText }}
                </div>
              </div>
            </div>
            <div class="add-flow-btn">
              <i class="fas fa-plus-circle"></i> 自定义审批节点 / 会签设置
            </div>
            <div class="helper-text">
              <i class="fas fa-info-circle"></i> 支持串签、并签、转审，全审批流转记录留痕
            </div>
          </div>
        </div>

        <!-- 3. 预案调整管理 -->
        <div class="section-card">
          <div class="section-header">
            <h2><i class="fas fa-sliders-h"></i> 预案调整管理</h2>
            <i class="fas fa-sync-alt" style="color:#6c86a3;"></i>
          </div>
          <div class="section-content">
            <div
                v-for="adjust in adjustments"
                :key="adjust.id"
                class="adjust-item"
            >
              <div class="adjust-title">
                <span><i class="fas fa-pen-nib"></i> {{ adjust.name }}</span>
                <span class="status-badge" :class="adjust.statusClass">{{ adjust.statusText }}</span>
              </div>
              <div class="adjust-detail">
                {{ adjust.detail }}
              </div>
            </div>
            <div class="add-flow-btn" style="background:#f1f5f9; margin-top:10px;">
              <i class="fas fa-edit"></i> 基于审批结果快速调整预案版本
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧面板：预案在线审批 + 预案发布 -->
      <div class="right-panel">
        <!-- 2. 预案在线审批模块 -->
        <div class="section-card">
          <div class="section-header">
            <h2><i class="fas fa-check-double"></i> 预案在线审批</h2>
            <span class="tag">待办{{ pendingCount }}项</span>
          </div>
          <div class="section-content">
            <table class="data-table">
              <thead>
              <tr>
                <th>预案名称</th>
                <th>审批人员</th>
                <th>审批记录/意见</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in approvalList" :key="item.id">
                <td>
                  <strong>{{ item.name }}</strong><br>
                  <span class="version-text">{{ item.version }}</span>
                </td>
                <td>{{ item.approvers }}</td>
                <td class="comment-text">
                  <i class="fas fa-comment-dots"></i> {{ item.comment }}
                </td>
                <td>
                  <span class="status-badge" :class="item.statusClass">{{ item.statusText }}</span>
                </td>
                <td>
                  <i class="fas fa-eye btn-icon"></i>
                  <i class="fas fa-check-circle btn-icon" style="color:#2c7da0;"></i>
                </td>
              </tr>
              </tbody>
            </table>
            <div class="helper-text" style="text-align: right; margin-top: 12px;">
              <i class="fas fa-archive"></i> 完整审批日志可追溯 &nbsp;|&nbsp; 所有意见留痕
            </div>
          </div>
        </div>

        <!-- 4. 预案发布模块 -->
        <div class="section-card">
          <div class="section-header">
            <h2><i class="fas fa-rocket"></i> 预案发布</h2>
            <i class="fas fa-globe-asia" style="color:#3083a2;"></i>
          </div>
          <div class="section-content">
            <div class="publish-card">
              <div class="publish-info">
                <h4><i class="fas fa-check-circle" style="color:#15803d;"></i> 已发布预案 (应急处置可用)</h4>
                <p style="font-size:0.8rem; margin-top: 8px;">
                  {{ publishedPlans.map(p => p.name).join(' · ') || '暂无已发布预案' }}
                </p>
              </div>
              <div class="publish-btn disabled">仅展示已发布</div>
            </div>

            <div style="margin-top: 20px;">
              <div class="pending-publish-card">
                <div>
                  <i class="fas fa-spinner fa-pulse" style="color:#e6b422;"></i>
                  <strong>待发布预案（审批完毕）</strong>
                  <br>
                  <span class="pending-list">{{ pendingPublish.map(p => p.name).join(' | ') || '无' }}</span>
                </div>
                <span class="publish-action" @click="publishPlan">
                  一键发布 <i class="fas fa-arrow-right"></i>
                </span>
              </div>
            </div>

            <div class="helper-text" style="margin-top: 20px; background:#eef6fb; padding: 12px; border-radius: 18px;">
              <i class="fas fa-bolt"></i> <strong>快速响应保障：</strong> 已发布的预案将在应急指挥中心实时同步，支持一键启动应急预案、调集资源。
            </div>
          </div>
        </div>

        <!-- 评审过程 & 结果记录 -->
        <div class="section-card" style="margin-bottom:0;">
          <div class="section-header">
            <h2><i class="fas fa-clipboard-list"></i> 评审过程 & 结果记录</h2>
          </div>
          <div class="section-content">
            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
              <div class="record-card" v-for="record in reviewRecords" :key="record.id">
                <i class="fas fa-calendar-alt"></i> <strong>{{ record.title }}</strong>
                <div class="record-desc">{{ record.content }}</div>
              </div>
            </div>
            <div class="helper-text" style="margin-top: 12px;">
              <i class="fas fa-database"></i> 所有评审节点自动保存至历史版本库，支持追溯、对比、复盘。
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <div class="footer-bar">
      <div style="display: flex; gap: 24px;">
        <span><i class="fas fa-chart-line" style="color:#1e6f5c;"></i> 先进性 · 动态评审机制</span>
        <span><i class="fas fa-flask"></i> 科学性 · 专家逐条修正</span>
        <span><i class="fas fa-tachometer-alt"></i> 高效性 · 快速响应闭环</span>
      </div>
      <div style="font-size:0.7rem; color:#66809a;">
        <i class="far fa-clock"></i> 审批流转引擎就绪 · 提升应急处置敏捷度
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue'

// 审批流程步骤配置
const flowSteps = reactive([
  {
    title: '环节 1：预案起草人提交',
    desc: '审批人: 安全总监 · 权限: 初审/退回',
    icon: 'fas fa-user-tie',
    status: 'active',
    statusText: '已激活'
  },
  {
    title: '环节 2：专家技术评审',
    desc: '审批人: 专家组(3人) · 权限: 修正建议/通过',
    icon: 'fas fa-chalkboard-user',
    status: 'active',
    statusText: '进行中'
  },
  {
    title: '环节 3：领导层终审',
    desc: '审批人: 应急总指挥 · 权限: 批准/驳回',
    icon: 'fas fa-landmark',
    status: 'pending',
    statusText: '待触发'
  },
  {
    title: '环节 4：签发与归档',
    desc: '办公室自动化发布 · 记录存档',
    icon: 'fas fa-cloud-upload-alt',
    status: 'pending',
    statusText: '流程终点'
  }
])

// 预案调整数据
const adjustments = reactive([
  {
    id: 1,
    name: '洪涝灾害应急预案 V2.1',
    statusText: '基于专家意见调整',
    statusClass: 'secondary',
    detail: '调整内容: 根据刘宏专家评审意见，优化预警阈值及撤离路线；增加物资调度流程。评审结果: “科学性提升，建议补充应急通讯保障” — 已修正。'
  },
  {
    id: 2,
    name: '危化品泄漏专项预案',
    statusText: '修改中',
    statusClass: 'warning',
    detail: '根据领导层反馈: 需强化现场指挥架构，新增“紧急疏散图”附件，当前版本迭代至3.0。'
  },
  {
    id: 3,
    name: '地震应急响应预案',
    statusText: '审批通过待调整细节',
    statusClass: '',
    detail: '最终评审批示: 修正响应分级条件，将震级启动标准细化，已按专家组合议完成修订。'
  }
])

// 审批列表数据
const approvalList = reactive([
  {
    id: 1,
    name: '洪涝灾害应急预案',
    version: 'v2.2',
    approvers: '专家组: 王宏,李敏,张启\n领导: 陈卫国',
    comment: '专家李敏: 响应等级描述建议更精确，已采纳。领导陈卫国: 同意专家组意见，补充响应时效。',
    statusText: '终审中',
    statusClass: ''
  },
  {
    id: 2,
    name: '危化品泄漏专项预案',
    version: 'v3.1',
    approvers: '安全总监: 赵岩\n外部专家: 刘景明',
    comment: '审批记录: 安全总监初审通过, 专家提出“新增化学洗消流程”修正要求，预案调整中。',
    statusText: '待修正',
    statusClass: 'warning'
  },
  {
    id: 3,
    name: '公共卫生事件应急预案',
    version: 'v1.5',
    approvers: '应急办: 周敏, 疾控专家: 何秀英',
    comment: '审批意见: 何秀英专家评审通过；领导复核要求更新隔离标准，修正后重新提交审批。',
    statusText: '二次评审',
    statusClass: 'secondary'
  },
  {
    id: 4,
    name: '大面积停电应急预案',
    version: 'v2.0',
    approvers: '专家组: 电力工程师+总指挥',
    comment: '审批记录: 全票通过先进性评估，目前进入发布前最终确认环节。',
    statusText: '审批通过',
    statusClass: ''
  }
])

// 已发布的预案
const publishedPlans = reactive([
  { id: 1, name: '地震应急响应预案 (2025-01-发布)' }
])

// 待发布预案（审批完毕但尚未发布）
const pendingPublish = reactive([
  { id: 4, name: '大面积停电应急预案' },
  { id: 3, name: '公共卫生事件应急预案' }
])

// 评审记录
const reviewRecords = reactive([
  {
    id: 1,
    title: '2025-04-10 专家评审会',
    content: '评审意见：预案结构科学，响应衔接效率高，建议增加辅助决策地图。→ 记录已归档，预案已完成修正。'
  },
  {
    id: 2,
    title: '领导终审记录',
    content: '最终结果：同意发布，强调实战演练与预案结合。结果存入档案，提升先进性指标。'
  }
])

// 计算待办数量（状态为终审中/待修正/二次评审的数量）
const pendingCount = computed(() => {
  return approvalList.filter(item =>
      item.statusText === '终审中' || item.statusText === '待修正' || item.statusText === '二次评审'
  ).length
})

// 发布预案功能：将待发布预案移至已发布
const publishPlan = () => {
  if (pendingPublish.length === 0) {
    alert('当前没有待发布的预案')
    return
  }
  // 将待发布预案添加到已发布列表
  pendingPublish.forEach(plan => {
    if (!publishedPlans.some(p => p.name === plan.name)) {
      publishedPlans.push({ id: plan.id, name: `${plan.name} (刚刚发布)` })
    }
  })
  // 清空待发布列表
  pendingPublish.splice(0, pendingPublish.length)

  // 同时更新审批列表中的对应预案状态为“已发布”
  approvalList.forEach(item => {
    if (item.name === '大面积停电应急预案' || item.name === '公共卫生事件应急预案') {
      item.statusText = '已发布'
      item.statusClass = ''
    }
  })

  // 可选：提示发布成功
  alert('预案已成功发布，应急处置中可立即启用！')
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.prototype-container {
  max-width: 1440px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 32px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  font-family: 'Inter', 'Nunito', system-ui, -apple-system, sans-serif;
}

.app-header {
  background: linear-gradient(135deg, #0f2b3d 0%, #1b4a6e 100%);
  padding: 24px 32px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.title-section h1 {
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-section h1 i {
  font-size: 1.8rem;
  color: #ffd966;
}

.title-section p {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 6px;
}

.badge-area {
  background: rgba(255, 255, 240, 0.15);
  backdrop-filter: blur(4px);
  padding: 8px 20px;
  border-radius: 40px;
  font-size: 0.9rem;
  font-weight: 500;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  border-top: 1px solid #e9edf2;
}

.left-panel {
  background: #fafcff;
  border-right: 1px solid #eef2f6;
  padding: 28px 24px;
}

.right-panel {
  background: #ffffff;
  padding: 28px 24px;
}

.section-card {
  background: white;
  border-radius: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
  margin-bottom: 32px;
  overflow: hidden;
}

.section-header {
  padding: 18px 24px 12px 24px;
  border-bottom: 2px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.section-header h2 {
  font-size: 1.35rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f2b3d;
}

.tag {
  font-size: 12px;
  background: #eef2ff;
  padding: 4px 12px;
  border-radius: 30px;
}

.section-content {
  padding: 20px 24px 24px 24px;
}

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flow-node {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8fafc;
  padding: 14px 18px;
  border-radius: 20px;
  border-left: 5px solid #cbd5e1;
  transition: all 0.2s;
}

.flow-node.active {
  border-left-color: #2c7da0;
  background: #f1f9fe;
}

.node-icon {
  width: 44px;
  height: 44px;
  background: #eef2ff;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #1e4a6b;
}

.node-info {
  flex: 1;
}

.node-title {
  font-weight: 700;
  font-size: 1rem;
}

.node-desc {
  font-size: 0.8rem;
  color: #475569;
  margin-top: 4px;
}

.node-badge {
  background: #e2e8f0;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1e293b;
}

.add-flow-btn {
  margin-top: 12px;
  background: white;
  border: 1px dashed #94a3b8;
  border-radius: 50px;
  padding: 10px;
  text-align: center;
  color: #2c7da0;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: default;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  padding: 12px 8px 12px 0;
  font-weight: 600;
  font-size: 0.8rem;
  color: #5b6e8c;
  border-bottom: 1px solid #eef2f6;
}

.data-table td {
  padding: 14px 8px 14px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.85rem;
  vertical-align: middle;
}

.version-text {
  font-size: 11px;
  color: #54708f;
}

.status-badge {
  background: #dcfce7;
  color: #15803d;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-block;
}

.status-badge.warning {
  background: #fff3e3;
  color: #b45309;
}

.status-badge.secondary {
  background: #eef2ff;
  color: #1e40af;
}

.btn-icon {
  background: none;
  border: none;
  color: #5b6e8c;
  cursor: default;
  font-size: 1rem;
  margin: 0 4px;
}

.comment-text {
  font-size: 0.8rem;
  max-width: 180px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

.adjust-item {
  background: #fefce8;
  border-left: 4px solid #facc15;
  padding: 14px 16px;
  border-radius: 16px;
  margin-bottom: 14px;
}

.adjust-title {
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.adjust-detail {
  font-size: 0.8rem;
  color: #3b3f46;
  margin-top: 8px;
}

.publish-card, .pending-publish-card {
  background: linear-gradient(115deg, #eef6fc 0%, #ffffff 100%);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.publish-info h4 {
  font-weight: 700;
}

.publish-btn {
  background: #0f2b3d;
  border: none;
  padding: 10px 24px;
  border-radius: 40px;
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: default;
}

.publish-btn.disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

.pending-publish-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  justify-content: space-between;
}

.pending-list {
  font-size: 12px;
  color: #2c3e66;
}

.publish-action {
  background: #2c7da0;
  padding: 6px 18px;
  border-radius: 40px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.publish-action:hover {
  background: #1f5e7e;
  transform: scale(0.98);
}

.record-card {
  flex: 1;
  background: #f9fafb;
  border-radius: 20px;
  padding: 12px;
}

.record-desc {
  font-size: 13px;
  margin-top: 8px;
  color: #334155;
}

.helper-text {
  font-size: 0.7rem;
  color: #6c86a3;
  margin-top: 12px;
  text-align: center;
}

.footer-bar {
  background: #f9fef9;
  border-top: 1px solid #e2ecf5;
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}


@media (max-width: 980px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .left-panel {
    border-right: none;
    border-bottom: 1px solid #eef2f6;
  }
  body {
    padding: 20px;
  }
}
</style>