<template>
  <div class="container">
    <h2 class="title" style="margin-bottom:12px;">
      压力监测看板
      <span class="chip">实时 · 可视化</span>
    </h2>

    <div class="grid">
      <div class="card">
        <div class="title">当前数据</div>
        <CurrentReading :deviceId="deviceId" />
      </div>

      <div class="card">
        <div class="title">时间序列</div>
        <div class="toolbar" style="margin:8px 0 6px;">
          <select v-model="rangeUnit">
            <option value="minutes">过去 N 分钟</option>
            <option value="hours">过去 N 小时</option>
            <option value="days">过去 N 天</option>
          </select>
          <input v-model.number="rangeValue" type="number" min="1" style="width:120px;" />
          <button @click="refreshSeries">刷新</button>
        </div>
        <TimeSeriesChart :deviceId="deviceId" :rangeUnit="rangeUnit" :rangeValue="rangeValue" />
      </div>
    </div>

    <div class="card" style="margin-top:16px;">
      <div class="title">报警信息</div>
      <div class="toolbar" style="margin:8px 0 6px;">
        <label class="sub">阈值区间（MPa）</label>
        <input v-model.number="minPressure" type="number" step="0.001" placeholder="min" style="width:120px;" />
        <input v-model.number="maxPressure" type="number" step="0.001" placeholder="max" style="width:120px;" />
        <button @click="refreshAlarms">查询</button>
      </div>
      <AlarmsList :deviceId="deviceId" :minPressure="minPressure" :maxPressure="maxPressure" />
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CurrentReading from './components/CurrentReading.vue'
import TimeSeriesChart from './components/TimeSeriesChart.vue'
import AlarmsList from './components/AlarmsList.vue'

const deviceId = ref<string>('test')
const rangeUnit = ref<'minutes'|'hours'|'days'>('minutes')
const rangeValue = ref<number>(30)
const minPressure = ref<number | undefined>(undefined)
const maxPressure = ref<number | undefined>(undefined)

function refreshSeries() { /* 由子组件侦听 props 变化自动刷新 */ }
function refreshAlarms() { /* 同上 */ }
</script>

<style scoped>
</style>


