<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 水闸(KM)管理</span></el-space>
        </div>
      </template>
      <el-form :inline="true" size="small">
        <el-form-item label="口门名称"><el-input v-model="queryParams.kmName" placeholder="请输入" clearable @keyup.enter="getList" /></el-form-item>
        <el-form-item label="所属水域">
          <el-select v-model="queryParams.gcType" placeholder="请选择" clearable @change="getList" style="width:130px">
            <el-option label="太浦河" value="太浦河" />
            <el-option label="望虞河" value="望虞河" />
            <el-option label="环湖" value="环湖" />
            <el-option label="沿长江" value="沿长江" />
            <el-option label="杭州湾" value="杭州湾" />
          </el-select>
        </el-form-item>
        <el-form-item><el-button type="primary" @click="getList">查询</el-button><el-button @click="reset">重置</el-button></el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="list" stripe>
        <el-table-column prop="kmCode" label="编码" width="100" />
        <el-table-column prop="kmName" label="口门名称" min-width="140" />
        <el-table-column prop="gcType" label="所属水域" width="100" />
        <el-table-column prop="locrc" label="所在河流" width="120" />
        <el-table-column prop="holeStaNum" label="闸孔数" width="80" />
        <el-table-column prop="desFlow" label="设计流量" width="100" />
        <el-table-column prop="gaTopHig" label="闸顶高程" width="90" />
        <el-table-column prop="rcStat" label="状态" width="80">
          <template #default="s"><el-tag :type="s.row.rcStat === '1' || s.row.rcStat === '正常' ? 'success' : 'warning'" size="small">{{ s.row.rcStat || '正常' }}</el-tag></template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="s"><el-button type="primary" link @click="handleDetail(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>
  </div>
</template>
<script setup name="WcoKm">
import { getWcoKmList } from '@/api/slgc/wco/index'
const loading = ref(true); const total = ref(0)
const list = ref([])
const queryParams = reactive({ pageNum: 1, pageSize: 10, kmName: '', gcType: '' })
function getList() {
  loading.value = true
  const params = { ...queryParams }
  if (!params.kmName) delete params.kmName
  if (!params.gcType) delete params.gcType
  getWcoKmList(params).then(res => {
    list.value = res.rows || res.data || []
    total.value = res.total || list.value.length
    loading.value = false
  }).catch(() => { loading.value = false })
}
function reset() {
  queryParams.kmName = ''
  queryParams.gcType = ''
  queryParams.pageNum = 1
  getList()
}
function handleDetail(row) { ElMessage.info('详情: ' + row.kmName) }
onMounted(() => { getList() })
</script>
<style scoped>.card-header { font-weight:600;font-size:16px; }</style>
