<script setup lang="ts">
/**
 * 监测详情页
 *
 * 展示设备的监测数据详情，包含实时数据、历史趋势图表占位、
 * 告警记录和数据分析。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const detailId = (route.query.id as string) || '1'

/** 模拟监测详情 */
const monitoring = ref({
  id: detailId,
  equipmentName: '流量监测仪 A-01',
  equipmentType: '流量计',
  currentValue: '125.6 m³/h',
  status: 'normal',
  updateTime: '2025-06-15 08:30:00',
  statistics: {
    today: { avg: '122.3 m³/h', max: '135.8 m³/h', min: '110.2 m³/h', total: '2935.2 m³' },
    yesterday: { avg: '118.7 m³/h', max: '130.1 m³/h', min: '105.8 m³/h', total: '2848.8 m³' },
    thisMonth: { avg: '120.5 m³/h', max: '145.2 m³/h', min: '95.6 m³/h', total: '86760 m³' },
  },
  alarmRecords: [
    { time: '2025-06-14 16:30:00', level: 'warning', content: '流量超过预警值 130 m³/h', value: '131.5 m³/h' },
    { time: '2025-06-10 09:15:00', level: 'alarm', content: '流量异常下降', value: '45.2 m³/h' },
    { time: '2025-06-05 22:00:00', level: 'warning', content: '信号短暂丢失', value: '-' },
  ],
})

const levelColorMap: Record<string, string> = {
  warning: '#FF9800',
  alarm: '#F44336',
}
</script>

<template>
  <div class="monitoring-detail-page">
    <van-nav-bar title="监测详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />

    <!-- 实时数据 -->
    <div class="realtime-card">
      <div class="realtime-value">{{ monitoring.currentValue }}</div>
      <div class="realtime-label">当前流量</div>
      <div class="realtime-time">更新时间: {{ monitoring.updateTime }}</div>
    </div>

    <!-- 图表占位区（趋势图） -->
    <van-cell-group title="流量趋势" class="info-group">
      <van-cell>
        <div class="chart-placeholder">
          <van-icon name="chart-trending-o" size="36" color="#ccc" />
          <span>流量趋势图表</span>
        </div>
      </van-cell>
    </van-cell-group>

    <!-- 今日统计 -->
    <van-cell-group title="今日统计" class="info-group">
      <van-cell title="平均流量" :value="monitoring.statistics.today.avg" />
      <van-cell title="最大流量" :value="monitoring.statistics.today.max" />
      <van-cell title="最小流量" :value="monitoring.statistics.today.min" />
      <van-cell title="累计流量" :value="monitoring.statistics.today.total" />
    </van-cell-group>

    <!-- 昨日统计 -->
    <van-cell-group title="昨日统计" class="info-group">
      <van-cell title="平均流量" :value="monitoring.statistics.yesterday.avg" />
      <van-cell title="最大流量" :value="monitoring.statistics.yesterday.max" />
      <van-cell title="最小流量" :value="monitoring.statistics.yesterday.min" />
      <van-cell title="累计流量" :value="monitoring.statistics.yesterday.total" />
    </van-cell-group>

    <!-- 本月统计 -->
    <van-cell-group title="本月统计" class="info-group">
      <van-cell title="平均流量" :value="monitoring.statistics.thisMonth.avg" />
      <van-cell title="最大流量" :value="monitoring.statistics.thisMonth.max" />
      <van-cell title="最小流量" :value="monitoring.statistics.thisMonth.min" />
      <van-cell title="累计流量" :value="monitoring.statistics.thisMonth.total" />
    </van-cell-group>

    <!-- 告警记录 -->
    <van-cell-group title="告警记录" class="info-group">
      <van-empty v-if="monitoring.alarmRecords.length === 0" description="暂无告警" />
      <van-cell v-for="(alarm, idx) in monitoring.alarmRecords" :key="idx" :title="alarm.content">
        <template #label>
          <span>{{ alarm.time }}</span>
        </template>
        <template #value>
          <div class="alarm-info">
            <span class="alarm-dot" :style="{ backgroundColor: levelColorMap[alarm.level] }" />
            <span class="alarm-value">{{ alarm.value }}</span>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<style lang="scss" scoped>
.monitoring-detail-page {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding-bottom: 24px;

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.realtime-card {
  margin: 8px;
  padding: 20px 16px;
  background: linear-gradient(135deg, var(--color-primary), #36a3f7);
  border-radius: 12px;
  text-align: center;
  color: #fff;

  .realtime-value {
    font-size: 36px;
    font-weight: 700;
  }

  .realtime-label {
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.9;
  }

  .realtime-time {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.7;
  }
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 180px;
  background: #f5f7fa;
  border-radius: 8px;
  color: var(--color-text-placeholder);
  font-size: 13px;
  gap: 8px;
}

.info-group {
  margin-top: 8px;
}

.alarm-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.alarm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.alarm-value {
  font-size: 13px;
}
</style>
