<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 statusColorMap: Record<string, string> = {
  normal: '#07c160',
  alarm: '#ee0a24',
}
</script>

<template>
  <van-popup
    :show="show"
    position="bottom"
    round
    :style="{ height: '40%' }"
    @update:show="emit('update:show', $event)"
  >
    <div class="yb-pop">
      <div class="pop-header">
        <span class="pop-title">实时仪表</span>
        <van-icon name="cross" size="20" color="#999" @click="emit('update:show', false)" />
      </div>
      <div class="pop-body">
        <div
          v-for="gauge in gauges"
          :key="gauge.id"
          class="gauge-item"
        >
          <span
            class="gauge-dot"
            :style="{ backgroundColor: statusColorMap[gauge.status] }"
          />
          <div class="gauge-info">
            <span class="gauge-label">{{ gauge.name }}</span>
            <span class="gauge-value">
              {{ gauge.value }}
              <small>{{ gauge.unit }}</small>
            </span>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<style lang="scss" scoped>
.yb-pop {
  height: 100%;
  display: flex;
  flex-direction: column;

  .pop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);

    .pop-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-text-regular);
    }
  }

  .pop-body {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 20px;
  }

  .gauge-item {
    width: calc(50% - 8px);
    display: flex;
    align-items: center;
    background: #f7f8fa;
    border-radius: 10px;
    padding: 16px;

    .gauge-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .gauge-info {
      display: flex;
      flex-direction: column;
      gap: 4px;

      .gauge-label {
        font-size: 13px;
        color: var(--color-text-secondary);
      }

      .gauge-value {
        font-size: 22px;
        font-weight: 700;
        color: var(--color-text-regular);

        small {
          font-size: 12px;
          font-weight: 400;
          color: var(--color-text-placeholder);
        }
      }
    }
  }
}
</style>
