<template>
  <div class="emergency-view">
    <header class="page-header">
      <h1>应急预案</h1>
      <p>城市生命线应急预案管理，支持智能生成和编辑</p>
    </header>

    <div class="action-bar">
      <el-button type="primary">
        <el-icon><Plus /></el-icon>
        新建预案
      </el-button>
      <el-button>
        <el-icon><MagicStick /></el-icon>
        AI生成
      </el-button>
    </div>

    <div class="plan-grid">
      <div v-for="plan in plans" :key="plan.id" class="plan-card">
        <div class="card-header">
          <div class="card-icon" :style="{ background: plan.color }">
            <el-icon><component :is="plan.icon" /></el-icon>
          </div>
          <el-tag size="small" :type="plan.statusType">{{ plan.status }}</el-tag>
        </div>
        <h3>{{ plan.title }}</h3>
        <p>{{ plan.description }}</p>
        <div class="card-footer">
          <span class="update-time">更新于 {{ plan.updateTime }}</span>
          <div class="card-actions">
            <el-button type="primary" link size="small">编辑</el-button>
            <el-button type="primary" link size="small">下载</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Plus, MagicStick, Warning, Cloudy, Lightning, SetUp } from '@element-plus/icons-vue'

const plans = ref([
  {
    id: 1,
    title: '供水管网爆管应急预案',
    description: '针对供水管网突发爆管事故的应急处置流程和措施',
    icon: 'Cloudy',
    color: '#3b82f6',
    status: '已发布',
    statusType: 'success',
    updateTime: '2024-01-15'
  },
  {
    id: 2,
    title: '燃气泄漏应急预案',
    description: '燃气管道泄漏事故的紧急响应和处置方案',
    icon: 'Warning',
    color: '#ef4444',
    status: '已发布',
    statusType: 'success',
    updateTime: '2024-01-10'
  },
  {
    id: 3,
    title: '电力故障应急预案',
    description: '大面积停电事故的应急响应和恢复方案',
    icon: 'Lightning',
    color: '#f59e0b',
    status: '草稿',
    statusType: 'info',
    updateTime: '2024-01-18'
  },
  {
    id: 4,
    title: '城市内涝应急预案',
    description: '暴雨导致城市内涝的预防和应急处置措施',
    icon: 'SetUp',
    color: '#10b981',
    status: '审核中',
    statusType: 'warning',
    updateTime: '2024-01-20'
  }
])
</script>

<style lang="scss" scoped>
.emergency-view {
  padding: 32px 48px;
  height: 100%;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 24px;
  
  h1 {
    font-size: 24px;
    color: #1f2937;
    margin-bottom: 8px;
  }
  
  p {
    color: #6b7280;
    font-size: 14px;
  }
}

.action-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  
  .plan-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s;
    
    &:hover {
      border-color: #7c3aed;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;
      
      .card-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 24px;
      }
    }
    
    h3 {
      font-size: 16px;
      color: #1f2937;
      margin-bottom: 8px;
    }
    
    p {
      font-size: 13px;
      color: #6b7280;
      margin-bottom: 16px;
      line-height: 1.5;
    }
    
    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 16px;
      border-top: 1px solid #f3f4f6;
      
      .update-time {
        font-size: 12px;
        color: #9ca3af;
      }
    }
  }
}
</style>
