<template>
  <div class="app-container">
    <el-row :gutter="16">
      <el-col :span="24"><el-card shadow="never">
        <template #header><div class="card-header"><span>预警信息</span><el-tag type="danger">实时预警</el-tag></div></template>
        <el-table :data="warnings" stripe v-loading="loading">
          <el-table-column prop="title" label="预警标题" min-width="200" />
          <el-table-column prop="station" label="监测站点" width="120" />
          <el-table-column prop="type" label="预警类型" width="100" />
          <el-table-column label="预警等级" width="80">
            <template #default="s"><el-tag :type="s.row.level==='红色'?'danger':s.row.level==='橙色'?'warning':s.row.level==='黄色'?'':'info'" size="small">{{ s.row.level }}</el-tag></template>
          </el-table-column>
          <el-table-column prop="value" label="当前值" width="80" />
          <el-table-column prop="threshold" label="阈值" width="80" />
          <el-table-column prop="time" label="时间" width="160" />
          <el-table-column label="状态" width="80">
            <template #default="s"><el-tag :type="s.row.status==='已处置'?'success':s.row.status==='处置中'?'warning':'info'" size="small">{{ s.row.status }}</el-tag></template>
          </el-table-column>
        </el-table>
      </el-card></el-col>
    </el-row>
    <el-row class="mt-16">
      <el-col :span="24"><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="hq.station" placeholder="请输入" /></el-form-item>
          <el-form-item label="类型"><el-select v-model="hq.type" style="width:120px"><el-option label="全部" value="" /><el-option label="水位" value="水位" /><el-option label="流量" value="流量" /></el-select></el-form-item>
          <el-form-item><el-button type="primary" @click="searchHistory">查询</el-button></el-form-item>
        </el-form>
        <el-table :data="history" stripe size="small">
          <el-table-column prop="time" label="时间" width="160" />
          <el-table-column prop="station" label="站点" width="120" />
          <el-table-column prop="type" label="类型" width="80" />
          <el-table-column prop="value" label="数值" width="80" />
          <el-table-column prop="unit" label="单位" width="60" />
          <el-table-column label="状态" width="80">
            <template #default="s"><el-tag :type="s.row.alertType==='正常'?'success':'danger'" size="small">{{ s.row.alertType }}</el-tag></template>
          </el-table-column>
        </el-table>
      </el-card></el-col>
    </el-row>
  </div>
</template>
<script setup name="EarlyWarning">
import { getWarningList, getWarningHistory } from '@/api/slgc/earlywarning/index'
const loading = ref(true); const warnings = ref([]); const history = ref([])
const hq = reactive({ station: '', type: '' })
async function searchHistory() {
  const params = {}
  if (hq.station) params.station = hq.station
  if (hq.type) params.type = hq.type
  const r = await getWarningHistory(params)
  history.value = r.rows
  ElMessage.success('查询成功')
}
onMounted(() => {
  getWarningList().then(r => { warnings.value = r.rows; loading.value = false })
  getWarningHistory({}).then(r => { history.value = r.rows })
})
</script>
<style scoped>
.card-header { font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center; }
.mt-16 { margin-top: 16px; }
</style>
