<!--数据查询与统计-->
<template>
  <div class="app-container">
    <div class="inquiry-layout">
      <!-- 左侧条件面板 -->
      <div class="left-panel">
        <el-card shadow="hover">
          <template #header>
            <div class="panel-title">多维条件查询</div>
          </template>
          <el-form :model="queryForm" label-width="80px" label-position="top" size="default">
            <el-form-item label="事件类型">
              <el-select v-model="queryForm.eventType" placeholder="请选择" clearable 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-date-picker v-model="queryForm.eventTime" type="date" placeholder="请选择日期"
                value-format="YYYY-MM-DD" style="width: 100%" clearable />
            </el-form-item>
            <el-form-item label="事件等级">
              <el-select v-model="queryForm.eventLevel" placeholder="请选择" clearable style="width: 100%">
                <el-option v-for="item in eventLevelOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="地域">
              <el-select v-model="queryForm.region" placeholder="请选择" clearable style="width: 100%">
                <el-option v-for="item in regionOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="责任部门">
              <el-select v-model="queryForm.department" placeholder="请选择" clearable style="width: 100%">
                <el-option v-for="item in departmentOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="损失情况">
              <el-select v-model="queryForm.lossRange" placeholder="请选择" clearable style="width: 100%">
                <el-option v-for="item in lossRangeOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery" style="width: 100%">执行查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleReset" 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-value">{{ stats.totalEvents }}</div>
            <div class="stat-label">事件总数</div>
          </div>
          <div class="stat-card stat-card-warning">
            <div class="stat-value">{{ stats.totalLoss }}</div>
            <div class="stat-label">直接经济损失(万元)</div>
          </div>
          <div class="stat-card stat-card-info">
            <div class="stat-value">{{ stats.avgLoss }}</div>
            <div class="stat-label">平均损失(万元)</div>
          </div>
          <div class="stat-card stat-card-danger">
            <div class="stat-value">{{ stats.majorEvents }}</div>
            <div class="stat-label">重大及以上事件数</div>
          </div>
        </div>

        <!-- 事件列表表格 -->
        <el-card shadow="hover">
          <template #header>
            <div class="panel-title">事件列表 <span class="total-count">共{{ filteredData.length }}条数据</span></div>
          </template>
          <el-table :data="pagedData" border stripe style="width: 100%" size="default">
            <el-table-column prop="name" label="事件名称" min-width="180" show-overflow-tooltip />
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="time" label="时间" width="140" />
            <el-table-column prop="level" label="等级" width="100">
              <template #default="{ row }">
                <el-tag :type="levelTagType(row.level)" size="small" effect="dark">{{ row.level }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="region" label="地域" width="110" />
            <el-table-column prop="department" label="责任部门" width="130" />
            <el-table-column prop="loss" label="损失(万元)" width="110" align="right" />
          </el-table>
          <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :total="filteredData.length"
            layout="total, prev, pager, next, sizes"
            :page-sizes="[10, 20, 50]"
            style="margin-top: 16px; justify-content: flex-end"
          />
        </el-card>
      </div>
    </div>
  </div>
</template>

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

// 查询条件选项
const eventTypeOptions = ['全部', '自然灾害', '事故灾难', '公共卫生', '社会安全', '管网泄漏', '管道堵塞']
const eventLevelOptions = ['全部', '一般', '较大', '重大', '特别重大']
const regionOptions = ['全部', '太常片区', '城东片区', '城南片区', '城北片区']
const departmentOptions = ['全部', '应急管理局', '消防救援局', '市政管理局', '水务局']
const lossRangeOptions = ['全部', '100万以下', '100-500万', '500-1000万', '1000万以上']

// 查询表单
const queryForm = reactive({
  eventType: '',
  eventTime: '',
  eventLevel: '',
  region: '',
  department: '',
  lossRange: ''
})

// Mock 数据
const allData = ref([
  { id: 1, name: '太常片区暴雨内涝事件', type: '自然灾害', time: '2025-06-15', level: '重大', region: '太常片区', department: '应急管理局', loss: 860 },
  { id: 2, name: '城东主管道泄漏事故', type: '管网泄漏', time: '2025-05-22', level: '较大', region: '城东片区', department: '水务局', loss: 320 },
  { id: 3, name: '城南化工厂氯气泄漏', type: '事故灾难', time: '2025-04-10', level: '特别重大', region: '城南片区', department: '消防救援局', loss: 1580 },
  { id: 4, name: '城北管道堵塞溢流', type: '管道堵塞', time: '2025-07-03', level: '一般', region: '城北片区', department: '市政管理局', loss: 45 },
  { id: 5, name: '太常片区燃气管道破裂', type: '管网泄漏', time: '2025-03-18', level: '重大', region: '太常片区', department: '应急管理局', loss: 720 },
  { id: 6, name: '城东餐饮食物中毒', type: '公共卫生', time: '2025-08-01', level: '较大', region: '城东片区', department: '应急管理局', loss: 180 },
  { id: 7, name: '城南地铁施工坍塌', type: '事故灾难', time: '2025-02-14', level: '重大', region: '城南片区', department: '消防救援局', loss: 950 },
  { id: 8, name: '城北片区群体性事件', type: '社会安全', time: '2025-09-20', level: '一般', region: '城北片区', department: '应急管理局', loss: 60 },
  { id: 9, name: '太常片区排水管网堵塞', type: '管道堵塞', time: '2025-05-08', level: '较大', region: '太常片区', department: '市政管理局', loss: 260 },
  { id: 10, name: '城东供水主管爆裂', type: '管网泄漏', time: '2025-01-25', level: '特别重大', region: '城东片区', department: '水务局', loss: 2100 },
  { id: 11, name: '城南片区暴雨内涝', type: '自然灾害', time: '2025-07-18', level: '较大', region: '城南片区', department: '应急管理局', loss: 480 },
  { id: 12, name: '城北燃气泄漏事故', type: '管网泄漏', time: '2025-04-28', level: '一般', region: '城北片区', department: '消防救援局', loss: 88 },
  { id: 13, name: '太常片区路面塌陷', type: '事故灾难', time: '2025-06-30', level: '重大', region: '太常片区', department: '市政管理局', loss: 680 },
  { id: 14, name: '城东排水管道堵塞', type: '管道堵塞', time: '2025-03-05', level: '一般', region: '城东片区', department: '水务局', loss: 35 },
  { id: 15, name: '城南供水管网破裂', type: '管网泄漏', time: '2025-08-12', level: '重大', region: '城南片区', department: '水务局', loss: 780 },
  { id: 16, name: '城北片区洪涝灾害', type: '自然灾害', time: '2025-09-05', level: '特别重大', region: '城北片区', department: '应急管理局', loss: 1850 }
])

// 分页
const pageNum = ref(1)
const pageSize = ref(10)

// 根据条件筛选
const filteredData = computed(() => {
  let data = [...allData.value]
  if (queryForm.eventType && queryForm.eventType !== '全部') {
    data = data.filter(d => d.type === queryForm.eventType)
  }
  if (queryForm.eventTime) {
    data = data.filter(d => d.time === queryForm.eventTime)
  }
  if (queryForm.eventLevel && queryForm.eventLevel !== '全部') {
    data = data.filter(d => d.level === queryForm.eventLevel)
  }
  if (queryForm.region && queryForm.region !== '全部') {
    data = data.filter(d => d.region === queryForm.region)
  }
  if (queryForm.department && queryForm.department !== '全部') {
    data = data.filter(d => d.department === queryForm.department)
  }
  if (queryForm.lossRange && queryForm.lossRange !== '全部') {
    data = data.filter(d => {
      switch (queryForm.lossRange) {
        case '100万以下': return d.loss < 100
        case '100-500万': return d.loss >= 100 && d.loss < 500
        case '500-1000万': return d.loss >= 500 && d.loss < 1000
        case '1000万以上': return d.loss >= 1000
        default: return true
      }
    })
  }
  return data
})

// 分页后数据
const pagedData = computed(() => {
  const start = (pageNum.value - 1) * pageSize.value
  return filteredData.value.slice(start, start + pageSize.value)
})

// 统计数据
const stats = computed(() => {
  const data = filteredData.value
  const totalEvents = data.length
  const totalLoss = data.reduce((sum, d) => sum + d.loss, 0)
  const avgLoss = totalEvents > 0 ? (totalLoss / totalEvents).toFixed(1) : 0
  const majorEvents = data.filter(d => d.level === '重大' || d.level === '特别重大').length
  return { totalEvents, totalLoss, avgLoss, majorEvents }
})

// 等级tag颜色
const levelTagType = (level) => {
  const map = { '一般': 'info', '较大': 'warning', '重大': 'danger', '特别重大': 'danger' }
  return map[level] || 'info'
}

// 查询
const handleQuery = () => {
  pageNum.value = 1
}

// 重置
const handleReset = () => {
  Object.assign(queryForm, {
    eventType: '', eventTime: '', eventLevel: '', region: '', department: '', lossRange: ''
  })
  pageNum.value = 1
}
</script>

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

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

.left-panel {
  width: 25%;
  min-width: 260px;
  flex-shrink: 0;

  .el-card {
    height: 100%;
  }
}

.right-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-title {
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;

  .total-count {
    font-weight: 400;
    font-size: 13px;
    color: #909399;
  }
}

// 统计卡片
.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-value {
    font-size: 28px;
    font-weight: 700;
    color: #303133;
    line-height: 1.2;
  }

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

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

  .stat-value { color: #e6a23c; }
}

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

  .stat-value { color: #409eff; }
}

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

  .stat-value { color: #f56c6c; }
}

// 左侧表单间距调整
.left-panel {
  :deep(.el-form-item) {
    margin-bottom: 16px;
  }

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