<!--应急态势分析-->
<template>
  <div class="app-container">
    <div class="analysis-layout">
      <!-- 左侧条件面板 -->
      <div class="left-panel">
        <el-card shadow="hover">
          <template #header>
            <div class="panel-title">专题态势分析</div>
          </template>
          <el-form :model="analysisForm" label-width="100px" label-position="top" size="default">
            <el-form-item label="事件类型">
              <el-select v-model="analysisForm.eventType" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in eventTypeOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="分析时间范围">
              <el-select v-model="analysisForm.timeRange" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in timeRangeOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="地域">
              <el-select v-model="analysisForm.region" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in regionOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleAnalysis" style="width: 100%">分析</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="success" plain @click="handleExport" style="width: 100%">导出分析报告</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 右侧分析展示区 -->
      <div class="right-panel">
        <!-- 顶部统计卡片 -->
        <div class="stat-cards">
          <div class="stat-card">
            <div class="stat-label">综合风险指数</div>
            <div class="stat-value-row">
              <span class="stat-number">{{ riskData.index }}</span>
              <span class="stat-trend" :class="riskData.indexTrend > 0 ? 'trend-up' : 'trend-down'">
                <el-icon v-if="riskData.indexTrend > 0"><Top /></el-icon>
                <el-icon v-else><Bottom /></el-icon>
                {{ Math.abs(riskData.indexTrend) }}%
              </span>
            </div>
          </div>
          <div class="stat-card stat-card-warning">
            <div class="stat-label">预警事件数</div>
            <div class="stat-value-row">
              <span class="stat-number">{{ riskData.warnCount }}</span>
            </div>
          </div>
          <div class="stat-card stat-card-info">
            <div class="stat-label">应急覆盖率</div>
            <div class="stat-value-row">
              <span class="stat-number">{{ riskData.coverRate }}%</span>
              <span class="stat-trend" :class="riskData.coverTrend > 0 ? 'trend-up' : 'trend-down'">
                <el-icon v-if="riskData.coverTrend > 0"><Top /></el-icon>
                <el-icon v-else><Bottom /></el-icon>
                {{ Math.abs(riskData.coverTrend) }}%
              </span>
            </div>
          </div>
          <div class="stat-card stat-card-danger">
            <div class="stat-label">超期管网占比</div>
            <div class="stat-value-row">
              <span class="stat-number">{{ riskData.overdueRate }}%</span>
            </div>
          </div>
        </div>

        <!-- 管网压力负荷趋势 -->
        <el-card shadow="hover" class="trend-card">
          <template #header>
            <div class="card-header-row">
              <span class="panel-title">管网压力负荷趋势</span>
              <el-date-picker v-model="trendDate" type="date" placeholder="选择时间"
                value-format="YYYY-MM-DD" style="width: 180px" size="default" />
            </div>
          </template>
          <div class="circle-grid">
            <div v-for="(item, idx) in monthData" :key="idx" class="circle-item">
              <el-progress type="circle" :percentage="item.percentage" :width="90" :stroke-width="8"
                :color="getCircleColor(item.percentage)">
                <template #default>
                  <div class="circle-text">
                    <div class="circle-value">{{ item.percentage }}%</div>
                  </div>
                </template>
              </el-progress>
              <div class="circle-month">{{ item.month }}</div>
            </div>
          </div>
        </el-card>

        <!-- 分析报告 -->
        <el-card shadow="hover" class="report-card">
          <template #header>
            <div class="panel-title">分析报告</div>
          </template>
          <div class="report-content">
            <div class="report-section">
              <h4>区域过滤信息</h4>
              <p>当前分析区域：<strong>{{ analysisForm.region || '全部' }}</strong>，事件类型：<strong>{{ analysisForm.eventType }}</strong>，时间范围：<strong>{{ analysisForm.timeRange }}</strong>。</p>
            </div>
            <div class="report-section">
              <h4>风险指数分析</h4>
              <p>综合风险指数为 <strong>{{ riskData.index }}</strong>，较上期{{ riskData.indexTrend > 0 ? '上升' : '下降' }} {{ Math.abs(riskData.indexTrend) }}%。当前管网系统整体风险处于{{ riskData.index > 15 ? '较高' : riskData.index > 8 ? '中等' : '较低' }}水平，建议加强对高风险区域的监控频次和应急资源前置部署。</p>
              <p>预警事件共计 <strong>{{ riskData.warnCount }}</strong> 起，超期管网占比 <strong>{{ riskData.overdueRate }}%</strong>，需重点关注管网老化区域及压力异常管段。</p>
            </div>
            <div class="report-section">
              <h4>应急资源覆盖分析</h4>
              <p>当前应急覆盖率为 <strong>{{ riskData.coverRate }}%</strong>，较上期{{ riskData.coverTrend > 0 ? '上升' : '下降' }} {{ Math.abs(riskData.coverTrend) }}%。{{ riskData.coverRate < 80 ? '覆盖率低于80%，存在应急盲区，建议增补应急站点和物资储备。' : '覆盖率处于合理区间，应继续保持并优化薄弱环节。' }}</p>
              <p><strong>建议：</strong>{{ riskData.coverRate < 80 ? '1. 在城东片区增设应急物资储备点；2. 优化城南片区应急力量布局，缩短响应时间；3. 加强太常片区管网巡检频次。' : '1. 持续优化应急资源分配机制；2. 加强跨区域应急协作演练；3. 定期评估覆盖盲区并动态调整。' }}</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Top, Bottom } from '@element-plus/icons-vue'

// 下拉选项
const eventTypeOptions = ['漏失风险态势', '管网压力态势', '积水内涝态势', '设备故障态势']
const timeRangeOptions = ['最近一周', '最近一月', '最近三月', '最近半年', '最近一年']
const regionOptions = ['全部', '太常片区', '城东片区', '华南片区', '城北片区']

// 表单
const analysisForm = reactive({
  eventType: '漏失风险态势',
  timeRange: '最近三月',
  region: '全部'
})

const trendDate = ref('')

// 风险数据
const riskData = reactive({
  index: 12,
  indexTrend: 10,
  warnCount: 23,
  coverRate: 78,
  coverTrend: -4,
  overdueRate: 15.6
})

// 12个月环形进度数据
const monthData = ref([
  { month: '1月', percentage: 62 },
  { month: '2月', percentage: 58 },
  { month: '3月', percentage: 71 },
  { month: '4月', percentage: 75 },
  { month: '5月', percentage: 83 },
  { month: '6月', percentage: 91 },
  { month: '7月', percentage: 88 },
  { month: '8月', percentage: 79 },
  { month: '9月', percentage: 68 },
  { month: '10月', percentage: 55 },
  { month: '11月', percentage: 47 },
  { month: '12月', percentage: 52 }
])

// 环形颜色
const getCircleColor = (percentage) => {
  if (percentage >= 80) return '#f56c6c'
  if (percentage >= 60) return '#e6a23c'
  return '#67c23a'
}

// 分析
const handleAnalysis = () => {
  // 模拟不同条件下的数据变化
  const typeDataMap = {
    '漏失风险态势': { index: 12, indexTrend: 10, warnCount: 23, coverRate: 78, coverTrend: -4, overdueRate: 15.6 },
    '管网压力态势': { index: 9, indexTrend: -3, warnCount: 15, coverRate: 82, coverTrend: 2, overdueRate: 12.3 },
    '积水内涝态势': { index: 18, indexTrend: 15, warnCount: 35, coverRate: 71, coverTrend: -8, overdueRate: 22.4 },
    '设备故障态势': { index: 7, indexTrend: -5, warnCount: 8, coverRate: 88, coverTrend: 3, overdueRate: 8.1 }
  }

  const selected = typeDataMap[analysisForm.eventType]
  if (selected) {
    Object.assign(riskData, selected)
  }

  // 模拟月度数据变化
  const baseMultiplier = analysisForm.eventType === '积水内涝态势' ? 1.2 : analysisForm.eventType === '设备故障态势' ? 0.7 : 1
  monthData.value = monthData.value.map(item => ({
    ...item,
    percentage: Math.min(100, Math.max(10, Math.round(item.percentage * baseMultiplier * (0.8 + Math.random() * 0.4))))
  }))

  ElMessage.success('分析完成')
}

// 导出报告
const handleExport = () => {
  const reportText = `
应急态势分析报告
================

【区域过滤信息】
分析区域: ${analysisForm.region || '全部'}
事件类型: ${analysisForm.eventType}
时间范围: ${analysisForm.timeRange}

【核心指标】
综合风险指数: ${riskData.index} (${riskData.indexTrend > 0 ? '上升' : '下降'}${Math.abs(riskData.indexTrend)}%)
预警事件数: ${riskData.warnCount}
应急覆盖率: ${riskData.coverRate}% (${riskData.coverTrend > 0 ? '上升' : '下降'}${Math.abs(riskData.coverTrend)}%)
超期管网占比: ${riskData.overdueRate}%

【月度压力负荷】
${monthData.value.map(m => `${m.month}: ${m.percentage}%`).join('\n')}

报告生成时间: ${new Date().toLocaleString()}
  `.trim()

  const blob = new Blob([reportText], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = `态势分析报告_${analysisForm.eventType}_${new Date().toISOString().slice(0, 10)}.txt`
  link.click()
  URL.revokeObjectURL(url)

  ElMessage.success('分析报告已导出')
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 16px;
}

.analysis-layout {
  display: flex;
  gap: 16px;
  min-height: calc(100vh - 120px);
}

// 左侧面板
.left-panel {
  width: 25%;
  min-width: 260px;
  flex-shrink: 0;

  .el-card {
    height: 100%;
  }

  :deep(.el-form-item) {
    margin-bottom: 16px;
  }

  :deep(.el-form-item__label) {
    padding-bottom: 4px;
  }
}

// 右侧面板
.right-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-title {
  font-weight: 600;
  font-size: 15px;
}

// 统计卡片
.stat-cards {
  display: flex;
  gap: 16px;
}

.stat-card {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #ebeef5;
  text-align: center;
  transition: box-shadow 0.3s;

  &:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  .stat-label {
    font-size: 13px;
    color: #909399;
    margin-bottom: 8px;
  }

  .stat-value-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
  }

  .stat-number {
    font-size: 28px;
    font-weight: 700;
    color: #303133;
    line-height: 1.2;
  }

  .stat-trend {
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }

  .trend-up {
    color: #f56c6c;
  }

  .trend-down {
    color: #67c23a;
  }
}

.stat-card-warning {
  border-left: 3px solid #e6a23c;
  .stat-number { color: #e6a23c; }
}

.stat-card-info {
  border-left: 3px solid #409eff;
  .stat-number { color: #409eff; }
}

.stat-card-danger {
  border-left: 3px solid #f56c6c;
  .stat-number { color: #f56c6c; }
}

// 趋势卡片
.trend-card {
  .card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

// 环形进度图
.circle-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  padding: 8px 0;
}

.circle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.circle-text {
  text-align: center;
}

.circle-value {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
}

.circle-month {
  font-size: 13px;
  color: #606266;
  text-align: center;
}

// 分析报告
.report-card {
  .report-content {
    line-height: 1.8;
    color: #303133;
    font-size: 14px;
  }

  .report-section {
    margin-bottom: 20px;

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

    h4 {
      font-size: 15px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 8px;
      padding-left: 10px;
      border-left: 3px solid #409eff;
    }

    p {
      margin-bottom: 6px;
      text-indent: 2em;
    }
  }
}
</style>
