<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <el-space><el-button text @click="$router.back()">← 返回</el-button><span>WCO 堤防工程</span></el-space>
        </div>
      </template>
      <el-form :model="queryParams" :inline="true" size="small">
        <el-form-item label="堤防名称">
          <el-input v-model="queryParams.dikeName" placeholder="请输入堤防名称" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="起始位置">
          <el-input v-model="queryParams.startLoc" placeholder="请输入起始位置" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="所在位置">
          <el-input v-model="queryParams.key" placeholder="请输入所在位置" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="堤防级别">
          <el-select v-model="queryParams.dikeGrad" placeholder="请选择堤防级别" clearable @keyup.enter="handleQuery">
            <el-option label="1级" value="1" /><el-option label="2级" value="2" /><el-option label="3级" value="3" /><el-option label="4级" value="4" /><el-option label="5级" value="5" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button type="info" icon="DataAnalysis" @click="handleStats">统计</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="list" stripe>
        <el-table-column prop="dikeCode" label="编码" width="100" />
        <el-table-column prop="dikeName" label="堤防名称" min-width="160" />
        <el-table-column prop="startLoc" label="起始位置" width="140" />
        <el-table-column prop="dikeLen" label="长度(km)" width="100" />
        <el-table-column prop="dikeGrad" label="等级" width="80">
          <template #default="s">{{ dikeGradMap[s.row.dikeGrad] || s.row.dikeGrad }}</template>
        </el-table-column>
        <el-table-column prop="engStat" label="状态" width="80">
          <template #default="s"><el-tag :type="s.row.engStat === '1' ? 'success' : 'warning'" size="small">{{ s.row.engStat === '1' ? '正常' : s.row.engStat === '0' ? '停用' : s.row.engStat }}</el-tag></template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="s">
            <el-button type="primary" link icon="View" @click="handleDetail(s.row)">查看</el-button>
            <el-button type="danger" link icon="Delete" @click="handleDelete(s.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <el-dialog :title="title" v-model="open" width="900px" append-to-body>
      <el-form :model="form" label-width="140px">
        <el-divider content-position="left">基本信息</el-divider>
        <el-row>
          <el-col :span="8"><el-form-item label="堤防名称"><el-input v-model="form.dikeName" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="堤防代码"><el-input v-model="form.dikeCode" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="堤防级别">
            <el-select v-model="form.dikeGrad" disabled>
              <el-option label="未知" value="0" /><el-option label="1级" value="1" /><el-option label="2级" value="2" /><el-option label="3级" value="3" /><el-option label="4级" value="4" /><el-option label="5级" value="5" /><el-option label="5级以下" value="9" />
            </el-select>
          </el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><el-form-item label="堤防类型">
            <el-select v-model="form.dikeType" disabled>
              <el-option label="河（江）堤" value="1" /><el-option label="湖堤" value="2" /><el-option label="海堤" value="3" /><el-option label="围（圩、圈）" value="4" />
            </el-select>
          </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="堤防型式">
            <el-select v-model="form.dikePatt" disabled>
              <el-option label="土堤" value="1" /><el-option label="砌石堤" value="2" /><el-option label="土石混合堤" value="3" /><el-option label="钢筋混凝土防洪墙" value="4" /><el-option label="其他" value="9" />
            </el-select>
          </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="堤防长度(m)"><el-input v-model="form.dikeLen" disabled /></el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><el-form-item label="起点所在位置"><el-input v-model="form.startLoc" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="终点所在位置"><el-input v-model="form.endLoc" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="工程任务"><el-input v-model="form.engTask" disabled /></el-form-item></el-col>
        </el-row>

        <el-divider content-position="left">桩号与高程</el-divider>
        <el-row>
          <el-col :span="8"><el-form-item label="堤防起点桩号"><el-input v-model="form.dikeStartNum" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="堤防终点桩号"><el-input v-model="form.dikeEndNum" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="起点堤顶高程(m)"><el-input v-model="form.startDikeTopEl" disabled /></el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><el-form-item label="终点堤顶高程(m)"><el-input v-model="form.endDikeTopEl" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="堤防最小高度(m)"><el-input v-model="form.dikeHeigMin" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="堤防最大高度(m)"><el-input v-model="form.dikeHeigMax" disabled /></el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><el-form-item label="堤顶最小宽度(m)"><el-input v-model="form.dikeTopWidMin" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="堤顶最大宽度(m)"><el-input v-model="form.dikeTopWidMax" disabled /></el-form-item></el-col>
        </el-row>

        <el-divider content-position="left">经纬度信息</el-divider>
        <el-row>
          <el-col :span="6"><el-form-item label="起点经度"><el-input v-model="form.startLong" disabled /></el-form-item></el-col>
          <el-col :span="6"><el-form-item label="起点纬度"><el-input v-model="form.startLat" disabled /></el-form-item></el-col>
          <el-col :span="6"><el-form-item label="终点经度"><el-input v-model="form.endLong" disabled /></el-form-item></el-col>
          <el-col :span="6"><el-form-item label="终点纬度"><el-input v-model="form.endLat" disabled /></el-form-item></el-col>
        </el-row>

        <el-divider content-position="left">建设与管理</el-divider>
        <el-row>
          <el-col :span="8"><el-form-item label="工程建设情况">
            <el-select v-model="form.engStat" disabled>
              <el-option label="未建" value="0" /><el-option label="在建" value="1" /><el-option label="已建" value="2" />
            </el-select>
          </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="开工时间"><el-input v-model="form.startDate" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="建成时间"><el-input v-model="form.compDate" disabled /></el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><el-form-item label="归口管理部门">
            <el-select v-model="form.admDep" disabled>
              <el-option label="水利部门" value="1" /><el-option label="电力部门" value="2" /><el-option label="农业部门" value="3" /><el-option label="林业部门" value="4" /><el-option label="城建部门" value="5" /><el-option label="航运部门" value="6" /><el-option label="环保部门" value="7" /><el-option label="其他部门" value="9" />
            </el-select>
          </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="运行状况"><el-input v-model="form.runStat" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="备注"><el-input v-model="form.note" disabled /></el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><el-form-item label="属性采集时间"><el-input v-model="form.collDate" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="属性更新时间"><el-input v-model="form.updDate" disabled /></el-form-item></el-col>
        </el-row>
      </el-form>
      <template #footer><el-button @click="cancel">关 闭</el-button></template>
    </el-dialog>

    <el-dialog v-model="statsVisible" title="堤防类型分布统计" width="600px" append-to-body>
      <el-table :data="statsData" stripe v-loading="statsLoading">
        <el-table-column prop="name" label="类型" min-width="120" />
        <el-table-column prop="value" label="数量" width="100" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup name="WcoDike">
import { getWcoDikeList } from '@/api/slgc/wco/index'
import { getDike, delDike, getDikeCountType } from '@/api/slgc/dike/index'
const { proxy } = getCurrentInstance()
const loading = ref(true); const total = ref(0); const open = ref(false); const title = ref('')
const list = ref([]); const form = ref({})
const queryParams = reactive({ pageNum: 1, pageSize: 10, dikeName: undefined, startLoc: undefined, key: undefined, dikeGrad: undefined })
const dikeGradMap = { '0': '未知', '1': '1级', '2': '2级', '3': '3级', '4': '4级', '5': '5级', '9': '5级以下' }
const statsVisible = ref(false); const statsLoading = ref(false); const statsData = ref([])
function getList() { loading.value = true; getWcoDikeList(queryParams).then(res => { list.value = res.rows; total.value = res.total; loading.value = false }) }
function handleQuery() { queryParams.pageNum = 1; getList() }
function resetQuery() { queryParams.dikeName = undefined; queryParams.startLoc = undefined; queryParams.key = undefined; queryParams.dikeGrad = undefined; handleQuery() }
function handleDetail(row) { getDike(row.dikeCode).then(res => { form.value = res.data; title.value = '详情'; open.value = true }) }
function handleDelete(row) { proxy.$modal.confirm('确认删除堤防"' + row.dikeName + '"？').then(() => { delDike(row.dikeCode).then(() => { proxy.$modal.msgSuccess('删除成功'); getList() }) }) }
function handleStats() { statsVisible.value = true; statsLoading.value = true; getDikeCountType().then(res => { statsData.value = res.data || []; statsLoading.value = false }).catch(() => { statsLoading.value = false }) }
function cancel() { open.value = false }
onMounted(() => { getList() })
</script>
<style scoped>.card-header { font-weight: 600; font-size: 16px; }</style>
