<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header><div class="card-header"><span>水量数据管理</span></div></template>
      <el-tabs v-model="activeTab" @tab-change="loadTab">
        <el-tab-pane label="闸坝水量数据" name="bz">
          <el-form :inline="true" size="small">
            <el-form-item label="开始日期"><el-input v-model="bzQ.startDate" placeholder="yyyy-MM-dd" style="width:140px" clearable /></el-form-item>
            <el-form-item label="站名"><el-input v-model="bzQ.bsnm" placeholder="请输入" clearable style="width:120px" @keyup.enter="loadBz" /></el-form-item>
            <el-form-item label="警戒"><el-input v-model="bzQ.frgrd" placeholder="请输入" clearable style="width:100px" @keyup.enter="loadBz" /></el-form-item>
            <el-form-item><el-button type="primary" @click="loadBz">查询</el-button></el-form-item>
          </el-form>
          <el-table :data="bzList" stripe v-loading="loading" border>
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column v-for="col in bzCols" :key="col" :prop="col" :label="col" min-width="120" show-overflow-tooltip />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="工程水量数据" name="gc">
          <el-form :inline="true" size="small">
            <el-form-item label="开始日期"><el-input v-model="gcQ.startDate" placeholder="yyyy-MM-dd" style="width:140px" clearable /></el-form-item>
            <el-form-item label="站名"><el-input v-model="gcQ.bsnm" placeholder="请输入" clearable style="width:120px" @keyup.enter="loadGc" /></el-form-item>
            <el-form-item label="警戒"><el-input v-model="gcQ.frgrd" placeholder="请输入" clearable style="width:100px" @keyup.enter="loadGc" /></el-form-item>
            <el-form-item><el-button type="primary" @click="loadGc">查询</el-button></el-form-item>
          </el-form>
          <el-table :data="gcList" stripe v-loading="loading" border>
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column v-for="col in gcCols" :key="col" :prop="col" :label="col" min-width="120" show-overflow-tooltip />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script setup name="Water">
import { getWaterBzList, getWaterGcList } from '@/api/slgc/water/index'
const activeTab = ref('bz'); const loading = ref(false)
const bzList = ref([]); const bzCols = ref([]); const bzQ = reactive({ startDate: '', bsnm: '', frgrd: '' })
const gcList = ref([]); const gcCols = ref([]); const gcQ = reactive({ startDate: '', bsnm: '', frgrd: '' })
function loadBz() { loading.value = true; getWaterBzList(bzQ).then(r => { const d = r.data || []; bzList.value = d; if (d.length > 0) bzCols.value = Object.keys(d[0]); loading.value = false }) }
function loadGc() { loading.value = true; getWaterGcList(gcQ).then(r => { const d = r.data || []; gcList.value = d; if (d.length > 0) gcCols.value = Object.keys(d[0]); loading.value = false }) }
function loadTab() { activeTab.value === 'bz' ? loadBz() : loadGc() }
onMounted(() => loadBz())
</script>
<style scoped>.card-header { font-weight:600;font-size:16px; }</style>
