<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'

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]

const mockData = [
  { id: 1, name: '太湖流域管理局', location: '上海', level: '一级', year: 2020, status: '有效', projectCount: 12, mainProjects: '太浦河工程、望虞河工程', manageScope: '太湖流域', address: '上海市虹口区纪念路480号' },
  { id: 2, name: '江苏省水利厅', location: '南京', level: '一级', year: 2021, status: '有效', projectCount: 8, mainProjects: '长江堤防工程、秦淮河治理', manageScope: '江苏省境内', address: '南京市鼓楼区上海路5号' },
  { id: 3, name: '浙江省水利厅', location: '杭州', level: '一级', year: 2021, status: '有效', projectCount: 10, mainProjects: '钱塘江干堤、新安江水库', manageScope: '浙江省境内', address: '杭州市上城区梅花碑7号' },
  { id: 4, name: '安徽省水利厅', location: '合肥', level: '二级', year: 2022, status: '有效', projectCount: 6, mainProjects: '淮河干流治理、巢湖防洪', manageScope: '安徽省境内', address: '合肥市包河区九华山路48号' },
  { id: 5, name: '江西省水利厅', location: '南昌', level: '二级', year: 2022, status: '有效', projectCount: 7, mainProjects: '鄱阳湖治理、赣江堤防', manageScope: '江西省境内', address: '南昌市西湖区中山西路68号' },
  { id: 6, name: '福建省水利厅', location: '福州', level: '一级', year: 2023, status: '有效', projectCount: 9, mainProjects: '闽江防洪工程、九龙江治理', manageScope: '福建省境内', address: '福州市鼓楼区东大路229号' },
  { id: 7, name: '山东省水利厅', location: '济南', level: '二级', year: 2020, status: '有效', projectCount: 5, mainProjects: '黄河山东段治理、南四湖防洪', manageScope: '山东省境内', address: '济南市历下区历山路127号' },
  { id: 8, name: '广东省水利厅', location: '广州', level: '一级', year: 2021, status: '有效', projectCount: 11, mainProjects: '珠江堤防、东江治理工程', manageScope: '广东省境内', address: '广州市天河区天寿路116号' },
]

function getList() {
  loading.value = true
  let data = [...mockData]
  if (queryParams.name) {
    data = data.filter(r => r.name.includes(queryParams.name))
  }
  if (queryParams.year) {
    data = data.filter(r => r.year === queryParams.year)
  }
  total.value = data.length
  const start = (queryParams.pageNum - 1) * queryParams.pageSize
  const end = start + queryParams.pageSize
  list.value = data.slice(start, end)
  loading.value = false
}

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

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

function handleView(row) {
  detail.value = row
  open.value = true
}

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

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