<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-form :inline="true" :model="queryForm" size="small">
        <el-form-item label="时间范围">
          <el-date-picker v-model="timeRange" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 380px" />
        </el-form-item>
        <el-form-item label="高温阈值">
          <el-input-number v-model="queryForm.highTempThreshold" :min="0" :max="100" :precision="1" style="width: 120px" />
          <span class="ml-1 text-xs text-gray-400">℃</span>
        </el-form-item>
        <el-form-item label="低温阈值">
          <el-input-number v-model="queryForm.lowTempThreshold" :min="-50" :max="50" :precision="1" style="width: 120px" />
          <span class="ml-1 text-xs text-gray-400">℃</span>
        </el-form-item>
        <el-form-item label="未更新阈值">
          <el-input-number v-model="queryForm.staleThresholdSeconds" :min="60" :max="86400" :step="60" style="width: 120px" />
          <span class="ml-1 text-xs text-gray-400">秒</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 实时温度明细表 -->
    <el-card shadow="never" class="mt-4">
      <template #header>
        <div class="card-header">
          <span class="font-bold">实时温度明细</span>
          <div class="flex items-center gap-2">
            <el-tag size="small">共 {{ detailList.length }} 条</el-tag>
            <HelpButton title="实时温度明细" :content="REALTIME_HELP" />
          </div>
        </div>
      </template>
      <el-table v-loading="loading" :data="detailList" stripe size="small" max-height="400">
        <el-table-column prop="monitorId" label="测点ID" width="150" />
        <el-table-column prop="monitorName" label="测点名称" width="180" />
        <el-table-column prop="temperature" label="温度" width="100" align="right">
          <template #default="{ row }">
            <span :class="row.temperature >= (queryForm.highTempThreshold ?? 35) ? 'text-red-500 font-bold' : row.temperature <= (queryForm.lowTempThreshold ?? 10) ? 'text-blue-500 font-bold' : ''">
              {{ row.temperature?.toFixed(2) }}℃
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="collectTime" label="采集时间" width="200" />
        <el-table-column prop="recodeTime" label="入库时间" width="200" />
        <el-table-column prop="delaySeconds" label="入库延迟" width="100" align="right">
          <template #default="{ row }">
            <el-tag :type="row.delaySeconds < 10 ? 'success' : row.delaySeconds < 30 ? 'warning' : 'danger'" size="small">
              {{ row.delaySeconds }}s
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="staleSeconds" label="数据新鲜度" width="100" align="right">
          <template #default="{ row }">
            <el-tag :type="row.staleSeconds < 60 ? 'success' : row.staleSeconds < 300 ? 'warning' : 'danger'" size="small">
              {{ formatDuration(row.staleSeconds) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 高温/低温/未更新 三列布局 -->
    <el-row :gutter="16" class="mt-4">
      <el-col :xs="24" :sm="8">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <el-tag type="danger" size="small">高温测点</el-tag>
              <HelpButton title="高温测点" :content="REALTIME_HELP" />
            </div>
          </template>
          <el-table :data="highTempList" stripe size="small" max-height="300">
            <el-table-column prop="monitorName" label="测点" show-overflow-tooltip />
            <el-table-column prop="temperature" label="温度" width="80" align="right">
              <template #default="{ row }"><span class="text-red-500 font-bold">{{ row.temperature?.toFixed(2) }}</span></template>
            </el-table-column>
            <el-table-column prop="collectTime" label="时间" width="160" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <el-tag type="primary" size="small">低温测点</el-tag>
              <HelpButton title="低温测点" :content="REALTIME_HELP" />
            </div>
          </template>
          <el-table :data="lowTempList" stripe size="small" max-height="300">
            <el-table-column prop="monitorName" label="测点" show-overflow-tooltip />
            <el-table-column prop="temperature" label="温度" width="80" align="right">
              <template #default="{ row }"><span class="text-blue-500 font-bold">{{ row.temperature?.toFixed(2) }}</span></template>
            </el-table-column>
            <el-table-column prop="collectTime" label="时间" width="160" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <el-tag type="warning" size="small">长时间未更新</el-tag>
              <HelpButton title="长时间未更新" :content="REALTIME_HELP" />
            </div>
          </template>
          <el-table :data="staleList" stripe size="small" max-height="300">
            <el-table-column prop="monitorName" label="测点" show-overflow-tooltip />
            <el-table-column prop="temperature" label="温度" width="80" align="right">
              <template #default="{ row }">{{ row.temperature?.toFixed(2) }}</template>
            </el-table-column>
            <el-table-column prop="staleSeconds" label="未更新" width="80" align="right">
              <template #default="{ row }">{{ formatDuration(row.staleSeconds) }}</template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getRealtimeDetail, getHighTempMonitors, getLowTempMonitors, getStaleMonitors } from '@/api/ems/report/tempBoard'
import type { TempBoardQuery, TempBoardRealtimeVO } from '@/api/ems/report/tempBoard'
import HelpButton from '../components/HelpButton.vue'
import { REALTIME_HELP } from '../components/helpContent'

defineOptions({ name: 'TempBoardRealtime' })

const timeRange = ref<[string, string]>(['', ''])
const queryForm = reactive<TempBoardQuery>({ highTempThreshold: 35, lowTempThreshold: 10, staleThresholdSeconds: 600 })
const loading = ref(false)
const detailList = ref<TempBoardRealtimeVO[]>([])
const highTempList = ref<TempBoardRealtimeVO[]>([])
const lowTempList = ref<TempBoardRealtimeVO[]>([])
const staleList = ref<TempBoardRealtimeVO[]>([])

/** 初始化默认时间范围：昨天8:30 ~ 今天8:30 */
function initTimeRange() {
  const now = new Date()
  const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 30, 0)
  const start = new Date(end.getTime() - 24 * 3600 * 1000)
  const fmt = (d: Date) => {
    const p = (n: number) => n.toString().padStart(2, '0')
    return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`
  }
  timeRange.value = [fmt(start), fmt(end)]
}

function formatDuration(seconds: number): string {
  if (seconds < 60) return `${seconds}s`
  if (seconds < 3600) return `${Math.floor(seconds / 60)}m${seconds % 60}s`
  return `${Math.floor(seconds / 3600)}h${Math.floor((seconds % 3600) / 60)}m`
}

async function handleQuery() {
  if (timeRange.value?.[0]) {
    queryForm.startTime = timeRange.value[0]
    queryForm.endTime = timeRange.value[1]
  }
  loading.value = true
  try {
    const [detailRes, highRes, lowRes, staleRes] = await Promise.all([
      getRealtimeDetail(queryForm),
      getHighTempMonitors(queryForm),
      getLowTempMonitors(queryForm),
      getStaleMonitors(queryForm)
    ])
    detailList.value = detailRes.data
    highTempList.value = highRes.data
    lowTempList.value = lowRes.data
    staleList.value = staleRes.data
  } finally { loading.value = false }
}

onMounted(() => { initTimeRange(); handleQuery() })
</script>

<style scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
