<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.typeNames" placeholder="多个用逗号分隔" clearable @keyup.enter="search" /></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" border>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column v-for="col in columns" :key="col.key" :prop="col.key" :label="col.label" :width="col.width" :min-width="col.minWidth" show-overflow-tooltip />
      </el-table>
    </el-card>
  </div>
</template>
<script setup name="Gcfb">
import { getGcfbList } from '@/api/slgc/gcfb/index'
const loading = ref(true); const list = ref([]); const columns = ref([])
const q = reactive({ typeNames: '' })
function search() {
  loading.value = true
  getGcfbList(q).then(res => {
    const data = res.data || res.rows || []
    list.value = data
    if (data.length > 0) columns.value = Object.keys(data[0]).map(k => ({ key: k, label: k, minWidth: 120 }))
    loading.value = false
  })
}
function reset() { q.typeNames = ''; search() }
onMounted(() => search())
</script>
<style scoped>.card-header { font-weight:600;font-size:16px; }</style>
