<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.name" placeholder="请输入" clearable @keyup.enter="search" /></el-form-item>
        <el-form-item label="所在河流"><el-input v-model="q.river" placeholder="请输入" clearable @keyup.enter="search" /></el-form-item>
        <el-form-item label="是否达标"><el-select v-model="q.达标" clearable style="width:100px"><el-option label="是" value="是" /><el-option label="否" value="否" /></el-select></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">
        <el-table-column prop="name" label="功能区名称" min-width="180" />
        <el-table-column prop="river" label="所在河流" width="100" />
        <el-table-column prop="level" label="级别" width="80" />
        <el-table-column prop="type" label="类型" width="100" />
        <el-table-column prop="length" label="长度(km)" width="80" />
        <el-table-column prop="standard" label="目标水质" width="80" />
        <el-table-column prop="currentStatus" label="现状水质" width="80" />
        <el-table-column label="是否达标" width="80">
          <template #default="s"><el-tag :type="s.row.达标==='是'?'success':'danger'" size="small">{{ s.row.达标 }}</el-tag></template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="s"><el-button type="primary" link @click="handleDetail(s.row)">详情</el-button></template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script setup name="WaterFunction">
import { getWaterFuncList } from '@/api/slgc/waterfunc/index'
const loading = ref(true); const list = ref([])
const q = reactive({ name: '', river: '', 达标: '' })
function search() { loading.value = true; getWaterFuncList().then(r => { list.value = r.rows; loading.value = false }) }
function reset() { q.name = ''; q.river = ''; q.达标 = ''; search() }
function handleDetail(r) { ElMessage.info('功能区: ' + r.name) }
onMounted(() => { search() })
</script>
<style scoped>.card-header { font-weight:600;font-size:16px; }</style>
