<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>水闸工程管理</span>
          <el-button type="primary" size="small" style="float:right" @click="handleAdd">新增水闸</el-button>
        </div>
      </template>
      <el-form :model="queryParams" :inline="true" size="small">
        <el-form-item label="水闸名称"><el-input v-model="queryParams.wagaName" placeholder="请输入" clearable @keyup.enter="handleQuery" /></el-form-item>
        <el-form-item label="管理单位"><el-input v-model="queryParams.admDep" placeholder="请输入" clearable @keyup.enter="handleQuery" /></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="wagaCode" label="编码" width="100" />
        <el-table-column prop="wagaName" label="水闸名称" min-width="140" />
        <el-table-column prop="wagaLoc" label="位置" width="140" />
        <el-table-column prop="wagaType" label="类型" width="100">
          <template #default="s">{{ wagaTypeMap[s.row.wagaType] || s.row.wagaType }}</template>
        </el-table-column>
        <el-table-column prop="engGrad" label="工程等别" width="80">
          <template #default="s">{{ engGradMap[s.row.engGrad] || s.row.engGrad }}</template>
        </el-table-column>
        <el-table-column prop="lockDisc" label="最大过闸流量(m³/s)" width="130" />
        <el-table-column prop="runStat" label="运行状况" width="100">
          <template #default="s">
            <el-tag :type="s.row.runStat === '1' ? 'success' : s.row.runStat === '2' ? 'warning' : 'info'" size="small">
              {{ runStatMap[s.row.runStat] || s.row.runStat }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updDate" label="更新日期" width="120" />
        <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="primary" link icon="Edit" @click="handleEdit(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="720px" append-to-body>
      <el-form :model="form" label-width="130px">
        <el-row>
          <el-col :span="12"><el-form-item label="水闸编码"><el-input v-model="form.wagaCode" :disabled="title === '编辑水闸'" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="水闸名称"><el-input v-model="form.wagaName" /></el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><el-form-item label="位置"><el-input v-model="form.wagaLoc" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="类型">
            <el-select v-model="form.wagaType" placeholder="请选择类型">
              <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="9" />
            </el-select>
          </el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><el-form-item label="工程等别">
            <el-select v-model="form.engGrad" placeholder="请选择等别">
              <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-select>
          </el-form-item></el-col>
          <el-col :span="12"><el-form-item label="最大过闸流量(m³/s)"><el-input-number v-model="form.lockDisc" :min="0" :step="0.1" /></el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><el-form-item label="运行状况">
            <el-select v-model="form.runStat">
              <el-option label="在用良好" value="1" /><el-option label="在用故障" value="2" /><el-option label="停用" value="3" />
            </el-select>
          </el-form-item></el-col>
          <el-col :span="12"><el-form-item label="管理单位"><el-input v-model="form.admDep" /></el-form-item></el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <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="Waga">
import { getWagaList } from '@/api/slgc/gc/index'
import { getWaga, addWaga, updateWaga, delWaga, getWagaCountType } from '@/api/slgc/waga/index'
const { proxy } = getCurrentInstance()
const loading = ref(true); const total = ref(0); const open = ref(false); const title = ref('')
const list = ref([])
const queryParams = reactive({ pageNum: 1, pageSize: 10, wagaName: undefined, admDep: undefined })
const form = ref({})
const statsVisible = ref(false)
const statsLoading = ref(false)
const statsData = ref([])
const wagaTypeMap = { '1': '分（泄）洪闸', '2': '节制闸', '3': '排（退）水闸', '4': '引（进）水闸', '5': '挡潮闸', '6': '船闸', '9': '其他' }
const engGradMap = { '1': 'Ⅰ等', '2': 'Ⅱ等', '3': 'Ⅲ等', '4': 'Ⅳ等', '5': 'Ⅴ等' }
const runStatMap = { '1': '在用良好', '2': '在用故障', '3': '停用' }
function getList() { loading.value = true; getWagaList(queryParams).then(res => { list.value = res.rows; total.value = res.total; loading.value = false }) }
function handleQuery() { queryParams.pageNum = 1; getList() }
function resetQuery() { queryParams.wagaName = undefined; queryParams.admDep = undefined; handleQuery() }
function handleDetail(row) { getWaga(row.wagaCode).then(res => { form.value = res.data; title.value = '水闸详情'; open.value = true }) }
function handleEdit(row) { getWaga(row.wagaCode).then(res => { form.value = res.data; title.value = '编辑水闸'; open.value = true }) }
function submitForm() { const method = form.value.wagaCode && title.value === '编辑水闸' ? updateWaga : addWaga; method(form.value).then(() => { proxy.$modal.msgSuccess('操作成功'); open.value = false; getList() }) }
function cancel() { open.value = false }

function handleAdd() {
  form.value = { runStat: '1' }
  title.value = '新增水闸'
  open.value = true
}

function handleDelete(row) {
  proxy.$modal.confirm('确认删除水闸"' + row.wagaName + '"？').then(() => {
    delWaga(row.wagaCode).then(() => {
      proxy.$modal.msgSuccess('删除成功')
      getList()
    })
  })
}

function handleStats() {
  statsVisible.value = true
  statsLoading.value = true
  getWagaCountType().then(res => {
    statsData.value = res.data || []
    statsLoading.value = false
  }).catch(() => { statsLoading.value = false })
}

onMounted(() => { getList() })
</script>
<style scoped>.card-header { font-weight: 600; font-size: 16px; }</style>
