<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-number v-model="year" :min="1945" :max="2030" /></el-form-item>
        <el-form-item><el-button type="primary" @click="loadData">查询</el-button></el-form-item>
      </el-form>
      <el-table :data="list" stripe v-loading="loading">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column v-for="c in columns" :key="c.key" :prop="c.key" :label="c.label" min-width="120" show-overflow-tooltip />
      </el-table>
    </el-card>
  </div>
</template>

<script setup name="Typhoon">
import { getTyphoonInfoList } from '@/api/slgc/typhoon/index'
const loading = ref(true); const list = ref([]); const columns = ref([]); const year = ref(2024)
function loadData() {
  loading.value = true
  getTyphoonInfoList({ year: year.value }).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 }))
    loading.value = false
  })
}
onMounted(() => { loadData() })
</script>
<style scoped>.card-header { font-weight:600;font-size:16px; }</style>
