<template>
  <div class="gc-page">
    <div class="gc-toolbar">
      <el-button type="success" icon="DataAnalysis" @click="handleStats">统计</el-button>
      <div class="gc-toolbar-right">
        <el-input v-model="queryParams.wagaName" placeholder="请输入名称" clearable style="width: 160px" @keyup.enter="handleQuery" />
        <el-input v-model="queryParams.wagaLoc" placeholder="请输入位置" clearable style="width: 160px" @keyup.enter="handleQuery" />
        <el-select v-model="queryParams.wagaType" placeholder="请选择" clearable style="width: 140px">
          <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-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
      </div>
    </div>

    <el-table v-loading="loading" :data="list" stripe border>
      <el-table-column prop="wagaName" label="水闸名称" min-width="180" />
      <el-table-column prop="wagaLoc" label="水闸所在位置" min-width="220" />
      <el-table-column prop="engGrad" label="工程等别" width="120">
        <template #default="s">{{ engGradMap[s.row.engGrad] || s.row.engGrad }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100" fixed="right" align="center">
        <template #default="s">
          <el-button type="primary" link icon="View" @click="handleDetail(s.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="gc-pagination">
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>

    <!-- 查看详情弹窗 -->
    <el-dialog :title="form.wagaName" v-model="open" width="720px" append-to-body>
      <el-form :model="form" label-width="130px" :disabled="true">
        <el-row>
          <el-col :span="12"><el-form-item label="水闸名称">{{ form.wagaName }}</el-form-item></el-col>
          <el-col :span="12"><el-form-item label="水闸代码">{{ form.wagaCode }}</el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><el-form-item label="起点经度">{{ form.startLon }}</el-form-item></el-col>
          <el-col :span="12"><el-form-item label="起点纬度">{{ form.startLat }}</el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><el-form-item label="终点经度">{{ form.endLon }}</el-form-item></el-col>
          <el-col :span="12"><el-form-item label="终点纬度">{{ form.endLat }}</el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><el-form-item label="水闸所在位置">{{ form.wagaLoc }}</el-form-item></el-col>
          <el-col :span="12"><el-form-item label="水闸类型">{{ wagaTypeMap[form.wagaType] }}</el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><el-form-item label="水闸用途">{{ form.wagaUsage }}</el-form-item></el-col>
          <el-col :span="12"><el-form-item label="工程等别">{{ engGradMap[form.engGrad] }}</el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><el-form-item label="工程规模">{{ form.engScale }}</el-form-item></el-col>
          <el-col :span="12"><el-form-item label="最大过闸流量">{{ form.lockDisc }}</el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><el-form-item label="闸孔数量">{{ form.lockNum }}</el-form-item></el-col>
          <el-col :span="12"><el-form-item label="工程建设情况">{{ form.engBuild }}</el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><el-form-item label="开工时间">{{ form.startDate }}</el-form-item></el-col>
          <el-col :span="12"><el-form-item label="建成时间">{{ form.endDate }}</el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><el-form-item label="归口管理部门">{{ form.admDep }}</el-form-item></el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 统计弹窗 -->
    <el-dialog title="统计类别" v-model="statsVisible" width="500px" 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="120" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup name="Waga">
import { getWagaList } from '@/api/slgc/gc/index'
import { getWaga, getWagaCountType } from '@/api/slgc/waga/index'

const loading = ref(true)
const total = ref(0)
const open = ref(false)
const list = ref([])
const queryParams = reactive({ pageNum: 1, pageSize: 10, wagaName: undefined, wagaLoc: undefined, wagaType: 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': 'Ⅴ等' }

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 handleDetail(row) {
  getWaga(row.wagaCode).then(res => { form.value = res.data; open.value = true })
}
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>
.gc-page {
  padding: 16px;
  background: #fff;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.gc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.gc-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gc-pagination {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  justify-content: flex-end;
}
</style>
