<script setup lang="ts">
/**
 * 仪表弹窗
 *
 * 从地图底部弹出的仪表/监测数据面板。
 */
import { ref } from 'vue'

defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  'update:show': [val: boolean]
}>()

/** 仪表数据 */
const gauges = ref([
  { id: 1, name: '流量', value: '12.5', unit: 'm³/h', status: 'normal' },
  { id: 2, name: '压力', value: '0.35', unit: 'MPa', status: 'normal' },
  { id: 3, name: '液位', value: '2.8', unit: 'm', status: 'alarm' },
  { id: 4, name: '水质', value: '6.8', unit: 'pH', status: 'normal' },
])

const statusCfg: Record<string, { color: string; bg: string; label: string }> = {
  normal: { color: '#07C160', bg: '#E8F8EF', label: '正常' },
  alarm: { color: '#EE0A24', bg: '#FDECEC', label: '告警' },
}

function onClose() {
  emit('update:show', false)
}
</script>

<template>
  <van-popup
    :show="show"
    position="bottom"
    round
    :style="{ height: '42%' }"
    @update:show="emit('update:show', $event)"
  >
    <div class="pop-container">
      <!-- Header -->
      <div class="pop-header">
        <span class="pop-title">实时监测</span>
        <span class="pop-subtitle">数据更新时间: 刚刚</span>
        <van-icon name="cross" size="20" color="#C8C9CC" @click="onClose" />
      </div>

      <!-- Body -->
      <div class="pop-body">
        <div
          v-for="gauge in gauges"
          :key="gauge.id"
          class="gauge-card"
          :style="{ borderColor: statusCfg[gauge.status].color }"
        >
          <div class="gauge-header">
            <span
              class="gauge-dot"
              :style="{ backgroundColor: statusCfg[gauge.status].color }"
            />
            <span class="gauge-name">{{ gauge.name }}</span>
            <span
              class="gauge-status"
              :style="{ color: statusCfg[gauge.status].color, background: statusCfg[gauge.status].bg }"
            >
              {{ statusCfg[gauge.status].label }}
            </span>
          </div>
          <div class="gauge-value">
            <span class="value-num">{{ gauge.value }}</span>
            <span class="value-unit">{{ gauge.unit }}</span>
          </div>
        </div>
      </div>

      <!-- Safe Area -->
      <div class="pop-safe-bottom" />
    </div>
  </van-popup>
</template>

<style lang="scss" scoped>
.pop-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #F4F7F8;
}

// ── Header ──
.pop-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 20px;
  background: #fff;
  border-bottom: 1px solid #EBEDF0;
  flex-shrink: 0;

  .pop-title {
    font-size: 17px;
    font-weight: 600;
    color: #323233;
    flex: 1;
  }

  .pop-subtitle {
    font-size: 12px;
    color: #969799;
  }
}

// ── Body ──
.pop-body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
  padding: 16px 12px;
  overflow-y: auto;
}

// ── Gauge Card ──
.gauge-card {
  width: calc(50% - 6px);
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  border-left: 3px solid #EBEDF0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gauge-header {
  display: flex;
  align-items: center;
  gap: 8px;

  .gauge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .gauge-name {
    font-size: 13px;
    color: #969799;
    flex: 1;
  }

  .gauge-status {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
  }
}

.gauge-value {
  display: flex;
  align-items: baseline;
  gap: 4px;

  .value-num {
    font-size: 26px;
    font-weight: 700;
    color: #323233;
    line-height: 1;
  }

  .value-unit {
    font-size: 13px;
    color: #969799;
  }
}

// ── Safe Area ──
.pop-safe-bottom {
  height: env(safe-area-inset-bottom, 12px);
  flex-shrink: 0;
  background: #F4F7F8;
}
</style>
