<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">国家级水管单位管理</div>
      </template>
      <el-form :model="queryParams" :inline="true" size="small">
        <el-form-item label="单位名称">
          <el-input v-model="queryParams.name" placeholder="请输入" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="评定年份">
          <el-select v-model="queryParams.year" placeholder="全部" clearable @change="handleQuery">
            <el-option v-for="y in yearOptions" :key="y" :label="y" :value="y" />
          </el-select>
        </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-form-item>
      </el-form>

      <el-table v-loading="loading" :data="list" stripe>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="name" label="单位名称" min-width="160" />
        <el-table-column prop="location" label="所在地" width="120" />
        <el-table-column prop="level" label="等级" width="80" />
        <el-table-column prop="year" label="评定年份" width="100" />
        <el-table-column prop="status" label="状态" width="80" />
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="s">
            <el-button type="primary" link icon="View" @click="handleView(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="单位详情" v-model="open" width="600px" append-to-body>
      <el-form :model="detail" label-width="120px">
        <el-form-item label="单位名称">{{ detail.name }}</el-form-item>
        <el-form-item label="所在地">{{ detail.location }}</el-form-item>
        <el-form-item label="等级">{{ detail.level }}</el-form-item>
        <el-form-item label="评定年份">{{ detail.year }}</el-form-item>
        <el-form-item label="管理工程数量">{{ detail.projectCount }}</el-form-item>
        <el-form-item label="主要工程">{{ detail.mainProjects }}</el-form-item>
        <el-form-item label="管理范围">{{ detail.manageScope }}</el-form-item>
        <el-form-item label="详细地址">{{ detail.address }}</el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="open = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="NationalUnit">
import { getCurrentInstance } from 'vue'
import { getUnitList, getUnit } from '@/api/slgc/unit/index'

const { proxy } = getCurrentInstance()
const loading = ref(false)
const total = ref(0)
const open = ref(false)
const list = ref([])
const detail = ref({})
const queryParams = reactive({ pageNum: 1, pageSize: 10, name: undefined, year: undefined })
const yearOptions = [2020, 2021, 2022, 2023, 2024, 2025]

function getList() {
  loading.value = true
  getUnitList(queryParams).then(res => {
    list.value = res.rows || []
    total.value = res.total || 0
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

function resetQuery() {
  queryParams.name = undefined
  queryParams.year = undefined
  handleQuery()
}

function handleView(row) {
  getUnit(row.id).then(res => {
    detail.value = res.data || {}
    open.value = true
  })
}

onMounted(() => { getList() })
</script>

<style scoped>
.card-header { font-weight: 600; font-size: 16px; }
</style>
