<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" class="search-form">
      <el-form-item label="管线编号">
        <el-input v-model="queryParams.pipeNo" placeholder="请输入" clearable style="width: 160px" />
      </el-form-item>
      <el-form-item label="管线类别">
        <el-select v-model="queryParams.pipeType" placeholder="请选择" clearable style="width: 160px">
          <el-option v-for="item in pipeTypeOptions" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属区域">
        <el-select v-model="queryParams.area" placeholder="请选择" clearable style="width: 160px">
          <el-option v-for="item in areaOptions" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="所在道路">
        <el-input v-model="queryParams.road" placeholder="请输入" clearable style="width: 160px" />
      </el-form-item>
      <el-form-item label="风险级别">
        <el-select v-model="queryParams.riskLevel" placeholder="请选择" clearable style="width: 160px">
          <el-option v-for="item in riskLevelOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 统计概览卡片 -->
    <div class="stat-cards">
      <el-card class="stat-card stat-blue" shadow="hover">
        <div class="stat-card-inner">
          <div class="stat-icon"><el-icon :size="32">
              <DataLine />
            </el-icon></div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.total }}</div>
            <div class="stat-label">总管线数</div>
          </div>
        </div>
      </el-card>
      <el-card class="stat-card stat-red" shadow="hover">
        <div class="stat-card-inner">
          <div class="stat-icon"><el-icon :size="32">
              <Warning />
            </el-icon></div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.high }}</div>
            <div class="stat-label">高风险管线</div>
          </div>
        </div>
      </el-card>
      <el-card class="stat-card stat-orange" shadow="hover">
        <div class="stat-card-inner">
          <div class="stat-icon"><el-icon :size="32">
              <WarningFilled />
            </el-icon></div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.medium }}</div>
            <div class="stat-label">中风险管线</div>
          </div>
        </div>
      </el-card>
      <el-card class="stat-card stat-green" shadow="hover">
        <div class="stat-card-inner">
          <div class="stat-icon"><el-icon :size="32">
              <CircleCheck />
            </el-icon></div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.low }}</div>
            <div class="stat-label">低风险管线</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据表格 -->
    <el-table :data="pageList" border style="width: 100%">
      <el-table-column label="序号" type="index" width="60" align="center" />
      <el-table-column label="管线编号" prop="pipeNo" min-width="130" />
      <el-table-column label="管线名称" prop="pipeName" min-width="150" />
      <el-table-column label="管线类别" prop="pipeType" min-width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="pipeTypeTagType(row.pipeType)" effect="light">{{ row.pipeType }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="所属区域" prop="area" min-width="110" />
      <el-table-column label="所在道路" prop="road" min-width="110" />
      <el-table-column label="管线长度(m)" prop="length" min-width="110" align="center" />
      <el-table-column label="管径(mm)" prop="diameter" min-width="100" align="center" />
      <el-table-column label="埋深(m)" prop="depth" min-width="90" align="center" />
      <el-table-column label="风险评分" prop="riskScore" min-width="90" align="center">
        <template #default="{ row }">
          <span :class="'score-' + row.riskLevel">{{ row.riskScore }}</span>
        </template>
      </el-table-column>
      <el-table-column label="风险级别" prop="riskLevel" min-width="100" align="center">
        <template #default="{ row }">
          <el-tag :color="riskLevelColor(row.riskLevel)" effect="dark" style="border:none">{{ riskLevelText(row.riskLevel)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="评估时间" prop="assessTime" min-width="120" align="center" />
      <el-table-column label="操作" width="100" align="center" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleDetail(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrap">
      <el-pagination v-model:current-page="page.current" v-model:page-size="page.size" :page-sizes="[10, 20, 50]"
        :total="filteredList.length" layout="total, sizes, prev, pager, next, jumper" background />
    </div>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailVisible" title="管网综合风险评估详情" width="800px" destroy-on-close>
      <template v-if="currentRow">
        <el-tabs v-model="detailTab">
          <el-tab-pane label="基本信息" name="basic">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="管线编号">{{ currentRow.pipeNo }}</el-descriptions-item>
              <el-descriptions-item label="管线名称">{{ currentRow.pipeName }}</el-descriptions-item>
              <el-descriptions-item label="管线类别">{{ currentRow.pipeType }}</el-descriptions-item>
              <el-descriptions-item label="所属区域">{{ currentRow.area }}</el-descriptions-item>
              <el-descriptions-item label="所在道路">{{ currentRow.road }}</el-descriptions-item>
              <el-descriptions-item label="建设年份">2018年</el-descriptions-item>
              <el-descriptions-item label="管理单位">沅陵县市政管理处</el-descriptions-item>
              <el-descriptions-item label="负责人">张工</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="管线信息" name="pipe">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="管径(mm)">{{ currentRow.diameter }}</el-descriptions-item>
              <el-descriptions-item label="管线长度(m)">{{ currentRow.length }}</el-descriptions-item>
              <el-descriptions-item label="埋深(m)">{{ currentRow.depth }}</el-descriptions-item>
              <el-descriptions-item label="管材类型">钢筋混凝土</el-descriptions-item>
              <el-descriptions-item label="坡度">0.3%</el-descriptions-item>
              <el-descriptions-item label="流向">由北向南</el-descriptions-item>
              <el-descriptions-item label="接口形式">承插式</el-descriptions-item>
              <el-descriptions-item label="周边环境">城市主干道下方</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="评估详情" name="assess">
            <div style="margin-bottom:16px">
              <el-tag :type="riskLevelColor(currentRow.riskLevel)" size="large">{{ riskLevelText(currentRow.riskLevel)
              }}</el-tag>
              <span style="margin-left:12px;font-size:18px;font-weight:bold;">综合评分：{{ currentRow.riskScore }}</span>
            </div>
            <el-table :data="assessItems" border size="small">
              <el-table-column prop="name" label="评估指标" />
              <el-table-column prop="weight" label="权重" width="80" align="center" />
              <el-table-column prop="score" label="评分" width="80" align="center" />
              <el-table-column prop="level" label="等级" width="100" align="center" />
            </el-table>
          </el-tab-pane>
          <!-- <el-tab-pane label="评估分析" name="analysis">
            <el-alert type="info" :closable="false" style="margin-bottom:12px">
              <template #title>
                <strong>风险评估建议：</strong>
                <span v-if="currentRow.riskLevel==='high'">该管线风险等级较高，建议3个月内安排专项检修，加强监测频率。</span>
                <span v-else-if="currentRow.riskLevel==='medium'">该管线存在中等风险，建议6个月内纳入巡检计划。</span>
                <span v-else>该管线风险较低，按常规周期巡检即可。</span>
              </template>
            </el-alert>
            <p><strong>评估时间：</strong>{{ currentRow.assessTime }}</p>
            <p><strong>评估人员：</strong>李工、王工</p>
            <p><strong>下次评估建议时间：</strong>2026-05-01</p>
          </el-tab-pane> -->
        </el-tabs>
      </template>
      <template #footer>
        <el-button @click="detailVisible = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Zhfxtjfx">
import { ref, computed } from 'vue'
import { DataLine, Warning, WarningFilled, CircleCheck } from '@element-plus/icons-vue'

// ==================== 下拉选项 ====================
const pipeTypeOptions = ['雨水管', '污水管', '合流管', '燃气管']
const areaOptions = ['沅陵大道', '城北路段', '河西片区', '人民路', '南环路', '开发区']
const riskLevelOptions = [
  { label: '高风险', value: 'high' },
  { label: '中风险', value: 'medium' },
  { label: '低风险', value: 'low' },
  { label: '极低风险', value: 'veryLow' }
]

// ==================== 搜索参数 ====================
const queryParams = ref({
  pipeNo: '',
  pipeType: '',
  area: '',
  road: '',
  riskLevel: ''
})
const queryRef = ref(null)

const handleQuery = () => {
  page.value.current = 1
}
const resetQuery = () => {
  queryParams.value = { pipeNo: '', pipeType: '', area: '', road: '', riskLevel: '' }
  page.value.current = 1
}

// ==================== 模拟数据 ====================
const tableData = ref([
  { id: 1, pipeNo: 'GX-2024-001', pipeName: '沅陵大道雨水主干线', pipeType: '雨水管', area: '沅陵大道', road: '沅陵大道', length: 1250, diameter: 800, depth: 2.5, riskScore: 87, riskLevel: 'high', assessTime: '2025-11-15' },
  { id: 2, pipeNo: 'GX-2024-002', pipeName: '城北路段污水管线', pipeType: '污水管', area: '城北路段', road: '城北路', length: 980, diameter: 600, depth: 3.1, riskScore: 72, riskLevel: 'medium', assessTime: '2025-11-10' },
  { id: 3, pipeNo: 'GX-2024-003', pipeName: '河西片区合流管线', pipeType: '合流管', area: '河西片区', road: '河西大道', length: 1560, diameter: 1000, depth: 2.8, riskScore: 45, riskLevel: 'low', assessTime: '2025-11-08' },
  { id: 4, pipeNo: 'GX-2024-004', pipeName: '人民路雨水管线', pipeType: '雨水管', area: '人民路', road: '人民路', length: 870, diameter: 500, depth: 2.2, riskScore: 91, riskLevel: 'high', assessTime: '2025-11-05' },
  { id: 5, pipeNo: 'GX-2024-005', pipeName: '南环路污水支线', pipeType: '污水管', area: '南环路', road: '南环路', length: 640, diameter: 400, depth: 1.9, riskScore: 38, riskLevel: 'veryLow', assessTime: '2025-11-02' },
  { id: 6, pipeNo: 'GX-2024-006', pipeName: '开发区雨水管线A', pipeType: '雨水管', area: '开发区', road: '开发大道', length: 2100, diameter: 1200, depth: 3.5, riskScore: 76, riskLevel: 'medium', assessTime: '2025-10-28' },
  { id: 7, pipeNo: 'GX-2024-007', pipeName: '沅陵大道污水支线', pipeType: '污水管', area: '沅陵大道', road: '沅陵大道', length: 560, diameter: 300, depth: 2.0, riskScore: 52, riskLevel: 'low', assessTime: '2025-10-25' },
  { id: 8, pipeNo: 'GX-2024-008', pipeName: '城北路段雨水干线', pipeType: '雨水管', area: '城北路段', road: '城北路', length: 1320, diameter: 800, depth: 2.7, riskScore: 83, riskLevel: 'high', assessTime: '2025-10-22' },
  { id: 9, pipeNo: 'GX-2024-009', pipeName: '河西片区污水管线', pipeType: '污水管', area: '河西片区', road: '河西大道', length: 780, diameter: 500, depth: 2.4, riskScore: 62, riskLevel: 'medium', assessTime: '2025-10-18' },
  { id: 10, pipeNo: 'GX-2024-010', pipeName: '人民路合流管线', pipeType: '合流管', area: '人民路', road: '人民路', length: 1050, diameter: 700, depth: 3.0, riskScore: 29, riskLevel: 'veryLow', assessTime: '2025-10-15' },
  { id: 11, pipeNo: 'GX-2024-011', pipeName: '南环路雨水管线', pipeType: '雨水管', area: '南环路', road: '南环路', length: 930, diameter: 600, depth: 2.3, riskScore: 68, riskLevel: 'medium', assessTime: '2025-10-12' },
  { id: 12, pipeNo: 'GX-2024-012', pipeName: '开发区燃气管线', pipeType: '燃气管', area: '开发区', road: '开发大道', length: 1800, diameter: 200, depth: 1.5, riskScore: 94, riskLevel: 'high', assessTime: '2025-10-08' },
  { id: 13, pipeNo: 'GX-2024-013', pipeName: '沅陵大道合流支线', pipeType: '合流管', area: '沅陵大道', road: '沅陵大道', length: 420, diameter: 400, depth: 1.8, riskScore: 41, riskLevel: 'low', assessTime: '2025-10-05' },
  { id: 14, pipeNo: 'GX-2024-014', pipeName: '城北路段燃气管线', pipeType: '燃气管', area: '城北路段', road: '城北路', length: 690, diameter: 150, depth: 1.4, riskScore: 33, riskLevel: 'veryLow', assessTime: '2025-10-01' },
  { id: 15, pipeNo: 'GX-2024-015', pipeName: '河西片区雨水干线', pipeType: '雨水管', area: '河西片区', road: '河西大道', length: 1150, diameter: 900, depth: 3.2, riskScore: 79, riskLevel: 'medium', assessTime: '2025-09-28' }
])

// ==================== 过滤与分页 ====================
const filteredList = computed(() => {
  return tableData.value.filter(item => {
    if (queryParams.value.pipeNo && !item.pipeNo.includes(queryParams.value.pipeNo)) return false
    if (queryParams.value.pipeType && item.pipeType !== queryParams.value.pipeType) return false
    if (queryParams.value.area && item.area !== queryParams.value.area) return false
    if (queryParams.value.road && !item.road.includes(queryParams.value.road)) return false
    if (queryParams.value.riskLevel && item.riskLevel !== queryParams.value.riskLevel) return false
    return true
  })
})

const page = ref({ current: 1, size: 10 })
const pageList = computed(() => {
  const start = (page.value.current - 1) * page.value.size
  return filteredList.value.slice(start, start + page.value.size)
})

// ==================== 统计 ====================
const stats = computed(() => {
  const list = filteredList.value
  return {
    total: list.length,
    high: list.filter(i => i.riskLevel === 'high').length,
    medium: list.filter(i => i.riskLevel === 'medium').length,
    low: list.filter(i => i.riskLevel === 'low' || i.riskLevel === 'veryLow').length
  }
})

// ==================== 工具函数 ====================
const pipeTypeTagType = (type) => {
  const map = { '雨水管': '', '污水管': 'warning', '合流管': 'success', '燃气管': 'danger' }
  return map[type] || ''
}

const riskLevelColor = (level) => {
  const map = { high: '#F56C6C', medium: '#E6A23C', low: '#409EFF', veryLow: '#67C23A' }
  return map[level] || '#909399'
}

const riskLevelText = (level) => {
  const map = { high: '高风险', medium: '中风险', low: '低风险', veryLow: '极低风险' }
  return map[level] || '未知'
}

// ==================== 详情弹窗 ====================
const detailVisible = ref(false)
const currentRow = ref(null)
const detailTab = ref('basic')

const assessItems = [
  { name: '结构性缺陷', weight: '0.25', score: '82', level: '中等' },
  { name: '功能性缺陷', weight: '0.20', score: '75', level: '中等' },
  { name: '环境影响', weight: '0.20', score: '68', level: '较高' },
  { name: '运行状态', weight: '0.20', score: '79', level: '中等' },
  { name: '历史事故', weight: '0.15', score: '90', level: '良好' }
]

const handleDetail = (row) => {
  currentRow.value = row
  detailTab.value = 'basic'
  detailVisible.value = true
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

/* 搜索表单 */
.search-form {
  margin-bottom: 16px;
}

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

.stat-card {
  flex: 1;
  min-width: 0;
}

.stat-card :deep(.el-card__body) {
  padding: 16px 20px;
}

.stat-card-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-blue .stat-icon {
  background: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.stat-red .stat-icon {
  background: rgba(245, 108, 108, 0.1);
  color: #F56C6C;
}

.stat-orange .stat-icon {
  background: rgba(230, 162, 60, 0.1);
  color: #E6A23C;
}

.stat-green .stat-icon {
  background: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.stat-info {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.stat-blue .stat-value {
  color: #409EFF;
}

.stat-red .stat-value {
  color: #F56C6C;
}

.stat-orange .stat-value {
  color: #E6A23C;
}

.stat-green .stat-value {
  color: #67C23A;
}

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

/* 风险评分颜色 */
.score-high {
  color: #F56C6C;
  font-weight: 700;
}

.score-medium {
  color: #E6A23C;
  font-weight: 700;
}

.score-low {
  color: #409EFF;
  font-weight: 700;
}

.score-veryLow {
  color: #67C23A;
  font-weight: 700;
}

/* 分页 */
.pagination-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}</style>
