<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <el-space>
            <el-button text @click="$router.back()">← 返回</el-button>
            <span>历史数据查询</span>
          </el-space>
        </div>
      </template>
      <el-form :inline="true" size="small">
        <el-form-item label="站点">
          <el-select v-model="query.station" placeholder="请选择站点" style="width:180px" clearable>
            <el-option v-for="s in stations" :key="s.STNM" :label="s.STNM" :value="s.STNM" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据类型">
          <el-select v-model="query.dataType" style="width:120px">
            <el-option label="水位" value="水位" />
            <el-option label="流量" value="流量" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker v-model="query.dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width:260px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" stripe v-loading="loading" style="margin-top:12px">
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column prop="station" label="站点" min-width="120" />
        <el-table-column prop="waterLevel" label="水位(m)" width="100" />
        <el-table-column prop="flow" label="流量(m³/s)" width="110" />
      </el-table>

      <el-pagination
        class="mt-12"
        v-model:current-page="query.pageNum"
        v-model:page-size="query.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="loadData"
        @current-change="loadData"
      />
    </el-card>
  </div>
</template>

<script setup name="GisHistory">
import { getStationList, getLevelData, getFlowData } from '@/api/slgc/hydrology/index'

const { proxy } = getCurrentInstance()
const loading = ref(true)
const tableData = ref([])
const stations = ref([])
const total = ref(0)

const query = reactive({
  station: '',
  dataType: '水位',
  dateRange: [],
  pageNum: 1,
  pageSize: 20,
})

function loadData() {
  loading.value = true
  const params = { pageNum: query.pageNum, pageSize: query.pageSize }
  if (query.station) params.station = query.station
  if (query.dateRange && query.dateRange.length === 2) {
    params.startDate = query.dateRange[0]
    params.endDate = query.dateRange[1]
  }

  const api = query.dataType === '水位' ? getLevelData : getFlowData
  api(params).then(res => {
    const rows = res.rows || res.data?.list || res.data || []
    total.value = res.total || rows.length
    tableData.value = rows.map(item => ({
      time: item.VIEWTIME || item.time || '-',
      station: item.STNM || item.station || '-',
      waterLevel: item.W0 ?? item.waterLevel ?? '-',
      flow: item.Q0 ?? item.flow ?? '-',
    }))
  }).catch(() => {
    proxy.$modal.msgError('历史数据加载失败')
  }).finally(() => {
    loading.value = false
  })
}

function handleSearch() {
  query.pageNum = 1
  loadData()
}

onMounted(() => {
  getStationList().then(res => {
    stations.value = res.data || res.rows || []
  })
  loadData()
})
</script>

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