<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="太湖水质概况" name="1" />
      <el-tab-pane label="太湖水位数据" name="2" />
      <el-tab-pane label="太湖出入湖水量" name="3" />
      <el-tab-pane label="太湖营养指数" name="4" />
      <el-tab-pane label="太湖水质类别" name="5" />
      <el-tab-pane label="引江济太调水" name="6" />
      <el-tab-pane label="太湖蓝藻监测" name="7" />
    </el-tabs>

    <div class="tab-content">
      <h3 class="data-title">{{ dataTitle }}</h3>
      <el-table v-loading="loading" :data="tableData" stripe border max-height="600">
        <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" :min-width="col.width || 120" :show-overflow-tooltip="true" />
      </el-table>
      <el-empty v-if="!loading && tableData.length === 0" description="暂无数据" />
    </div>
  </div>
</template>

<script setup name="Jkth">
import { getShitData } from "@/api/portal/jkth"

const { proxy } = getCurrentInstance()

const activeTab = ref("1")
const loading = ref(false)
const tableData = ref([])
const dataTitle = ref("")

const columnMap = {
  1: [
    { prop: "year", label: "年份", width: 100 },
    { prop: "avgWaterLevel", label: "平均水位(m)" },
    { prop: "maxWaterLevel", label: "最高水位(m)" },
    { prop: "minWaterLevel", label: "最低水位(m)" },
    { prop: "waterQuality", label: "水质类别" },
    { prop: "algaeDensity", label: "藻类密度(万个/L)" }
  ],
  2: [
    { prop: "year", label: "年份", width: 100 },
    { prop: "yearStartWaterLevel", label: "年初水位(m)" },
    { prop: "yearEddtWaterLevel", label: "年末水位(m)" },
    { prop: "avgWaterLevel", label: "平均水位(m)" },
    { prop: "maxWaterLevel", label: "最高水位(m)" },
    { prop: "minWaterLevel", label: "最低水位(m)" },
    { prop: "maxRange", label: "最大变幅(m)" },
    { prop: "avgRange", label: "平均变幅(m)" }
  ],
  3: [
    { prop: "year", label: "年份", width: 100 },
    { prop: "hxq", label: "湖西区(亿m³)" },
    { prop: "wcxyq", label: "武澄锡虞区(亿m³)" },
    { prop: "ycdlq", label: "阳澄淀泖区(亿m³)" },
    { prop: "pdpxq", label: "浦东片西区(亿m³)" },
    { prop: "hjhq", label: "杭嘉湖区(亿m³)" },
    { prop: "zxq", label: "浙西区(亿m³)" },
    { prop: "wyh", label: "望虞河(亿m³)" },
    { prop: "tph", label: "太浦河(亿m³)" },
    { prop: "mlh", label: "其他河流(亿m³)" },
    { prop: "flowType", label: "流向" }
  ],
  4: [
    { prop: "year", label: "年份", width: 100 },
    { prop: "allLakeIndex", label: "全湖综合指数" },
    { prop: "allLackAvgIndex", label: "全湖平均指数" },
    { prop: "moderateIndex", label: "中度营养指数" },
    { prop: "mildIndex", label: "轻度营养指数" }
  ],
  5: [
    { prop: "year", label: "年份", width: 100 },
    { prop: "season", label: "季节", width: 80 },
    { prop: "wlh", label: "五里湖" },
    { prop: "mlh", label: "梅梁湖" },
    { prop: "zsh", label: "竺山湖" },
    { prop: "gh", label: "贡湖" },
    { prop: "dth", label: "东太湖" },
    { prop: "hxq", label: "湖心区" },
    { prop: "avgValue", label: "均值" }
  ],
  6: [
    { prop: "year", label: "年份", width: 100 },
    { prop: "province", label: "省份", width: 80 },
    { prop: "checkRiver", label: "控制河流" },
    { prop: "gtV", label: "过水量(亿m³)" },
    { prop: "ratio", label: "占比" },
    { prop: "remark", label: "备注" }
  ],
  7: [
    { prop: "year", label: "年份", width: 100 },
    { prop: "addr", label: "监测点位" },
    { prop: "gmsy", label: "规模水华" },
    { prop: "ad", label: "藻密度(万个/L)" },
    { prop: "zl", label: "藻种类别" },
    { prop: "zd", label: "最大密度(万个/L)" },
    { prop: "typeFlow", label: "类型" }
  ]
}

const columns = computed(() => columnMap[activeTab.value] || [])

function handleTabChange() {
  fetchData()
}

function fetchData() {
  loading.value = true
  getShitData(activeTab.value).then(res => {
    const d = res.data
    dataTitle.value = d.title || ""
    tableData.value = d.rows || []
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

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

<style scoped>
.tab-content {
  margin-top: 16px;
}

.data-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
}
</style>
