<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'

type StatRow = { avg: string; max: string; min: string; total: string }

interface MonitoringDetail {
  id: string
  equipmentName: string
  equipmentType: string
  currentValue: string
  status: string
  updateTime: string
  statistics: { today: StatRow; yesterday: StatRow }
  alarmRecords: { time: string; level: 'warning' | 'alarm'; content: string; value: string }[]
}

const monitoring = ref<MonitoringDetail>({
  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³' },
  },
  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 alarmCfg: Record<string, { color: string; bg: string; icon: string }> = {
  warning: { color: '#FF976A', bg: '#FFF3ED', icon: 'warning-o' },
  alarm: { color: '#EE0A24', bg: '#FDECEC', icon: 'warning-o' },
}

const statPeriods = [
  { label: '今日统计', key: 'today' as const },
  { label: '昨日统计', key: 'yesterday' as const },
] as const
</script>

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

    <!-- Realtime Card -->
    <div class="realtime-card">
      <div class="realtime-value">{{ monitoring.currentValue }}</div>
      <div class="realtime-label">当前流量</div>
      <div class="realtime-time">更新于 {{ monitoring.updateTime }}</div>
    </div>

    <!-- Stat Cards -->
    <div class="stat-row" v-for="period in statPeriods" :key="period.key">
      <div class="section-header">
        <span class="section-accent"></span>
        <span class="section-title">{{ period.label }}</span>
      </div>
      <div class="stat-grid">
        <div class="stat-card">
          <span class="stat-label">平均流量</span>
          <span class="stat-value">{{ monitoring.statistics[period.key].avg }}</span>
        </div>
        <div class="stat-card">
          <span class="stat-label">最大流量</span>
          <span class="stat-value stat-peak">{{ monitoring.statistics[period.key].max }}</span>
        </div>
        <div class="stat-card">
          <span class="stat-label">最小流量</span>
          <span class="stat-value stat-low">{{ monitoring.statistics[period.key].min }}</span>
        </div>
        <div class="stat-card stat-full">
          <span class="stat-label">累计流量</span>
          <span class="stat-value">{{ monitoring.statistics[period.key].total }}</span>
        </div>
      </div>
    </div>

    <!-- Alarm Records -->
    <div class="section-header section-pad">
      <span class="section-accent"></span>
      <span class="section-title">告警记录</span>
    </div>
    <div class="alarm-list">
      <van-empty v-if="monitoring.alarmRecords.length === 0" description="暂无告警" />
      <div
        v-for="(alarm, idx) in monitoring.alarmRecords"
        :key="idx"
        class="alarm-card"
        :style="{ borderLeftColor: alarmCfg[alarm.level].color }"
      >
        <div class="alarm-top">
          <span class="alarm-level" :style="{ color: alarmCfg[alarm.level].color }">
            {{ alarm.level === 'alarm' ? '严重' : '预警' }}
          </span>
          <span class="alarm-time">{{ alarm.time }}</span>
        </div>
        <div class="alarm-content">{{ alarm.content }}</div>
        <div class="alarm-value" v-if="alarm.value !== '-'">
          触发值：{{ alarm.value }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #F4F7F8;
  padding-bottom: 24px;
}

// ── NavBar ──
:deep(.van-nav-bar) {
  background: #1E74FF;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-text-color: #fff;
  --van-nav-bar-icon-color: #fff;
}

// ── Realtime Card ──
.realtime-card {
  margin: 12px;
  padding: 24px 16px;
  background: linear-gradient(135deg, #1E74FF, #42A5F5);
  border-radius: 12px;
  color: #fff;
  text-align: center;

  .realtime-value {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 1px;
  }

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

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

// ── Section Header ──
.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  margin-top: 4px;

  &.section-pad {
    padding: 8px 16px 4px;
  }

  .section-accent {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: #1E74FF;
  }

  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #323233;
  }
}

// ── Stat Grid ──
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 12px;
}

.stat-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;

  &.stat-full {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .stat-label {
    font-size: 12px;
    color: #969799;
  }

  .stat-value {
    font-size: 18px;
    font-weight: 600;
    color: #323233;

    &.stat-peak {
      color: #EE0A24;
    }

    &.stat-low {
      color: #07C160;
    }
  }
}

// ── Alarm List ──
.alarm-list {
  padding: 0 12px;
}

.alarm-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-left: 4px solid;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);

  .alarm-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }

  .alarm-level {
    font-size: 12px;
    font-weight: 600;
  }

  .alarm-time {
    font-size: 11px;
    color: #C8C9CC;
  }

  .alarm-content {
    font-size: 14px;
    color: #323233;
    line-height: 1.5;
  }

  .alarm-value {
    margin-top: 6px;
    font-size: 12px;
    color: #969799;
  }
}
</style>
