<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header><div class="card-header"><span>防洪工程数据库</span></div></template>
      <el-form :inline="true" size="small">
        <el-form-item label="水库名称"><el-input v-model="q.resName" placeholder="请输入" clearable @keyup.enter="search" /></el-form-item>
        <el-form-item label="管理单位"><el-input v-model="q.admDep" placeholder="请输入" clearable @keyup.enter="search" /></el-form-item>
        <el-form-item><el-button type="primary" @click="search">查询</el-button><el-button @click="reset">重置</el-button></el-form-item>
      </el-form>
      <el-table :data="list" stripe v-loading="loading" border>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="resCode" label="水库编码" width="120" />
        <el-table-column prop="resName" label="水库名称" min-width="160" />
        <el-table-column prop="resLoc" label="位置" min-width="160" />
        <el-table-column prop="resType" label="类型" width="100" />
        <el-table-column prop="engGrad" label="工程等别" width="80" />
        <el-table-column prop="totCap" label="总库容" width="100" />
        <el-table-column prop="engStat" label="工程状态" width="80" />
        <el-table-column prop="admDep" label="管理单位" min-width="140" />
        <el-table-column prop="updDate" label="更新日期" width="160" />
      </el-table>
      <pagination v-if="total>0" :total="total" v-model:page="q.pageNum" v-model:limit="q.pageSize" @pagination="search" />
    </el-card>
  </div>
</template>
<script setup name="Fhgc">
import { getFhgcList } from '@/api/slgc/fhgc/index'
const loading = ref(true); const list = ref([]); const total = ref(0)
const q = reactive({ resName: '', admDep: '', pageNum: 1, pageSize: 20 })
function search() {
  loading.value = true
  getFhgcList(q).then(res => {
    list.value = res.rows || []
    total.value = res.total || 0
    loading.value = false
  })
}
function reset() { q.resName = ''; q.admDep = ''; q.pageNum = 1; search() }
onMounted(() => search())
</script>
<style scoped>.card-header { font-weight:600;font-size:16px; }</style>
