<template>
  <div
    class="absolute w454px h-289px, top-423px right-1341px pointer-events-none"
    style="opacity: 0"
  >
    <img src="@/assets/images/guage.png" alt="guage" />
    <img
      class="absolute bottom-8px left-60px pointer transition-transform duration-500 ease-in-out"
      :style="{ transform: `rotate(${pointerAngle ? pointerAngle : 0}deg)` }"
      src="@/assets/images/guage-pointer.png"
      alt="pointer"
    />
    <div class="absolute w-200px top-82px text-42px text-center left-50% translate-x--1/2">
      -66dBm
    </div>
    <div class="absolute left-0 bottom--44px w-full text-center text-44px">
      WIFI Signal Strength
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, withDefaults } from 'vue';

interface Props {
  currentSignal: number; // WiFi信号强度，单位dBm (通常范围-30到-90)
}

const props = withDefaults(defineProps<Props>(), {});

// WiFi信号强度范围 (dBm)
const MIN_SIGNAL = -90; // 最弱信号
const MAX_SIGNAL = -30; // 最强信号

// 计算指针旋转角度
const pointerAngle = computed(() => {
  const clampedSignal = Math.max(MIN_SIGNAL, Math.min(MAX_SIGNAL, props.currentSignal));
  // 将信号强度映射到角度范围 (0° 到 180°)
  return ((clampedSignal - MIN_SIGNAL) / (MAX_SIGNAL - MIN_SIGNAL)) * 180;
});
</script>

<style lang="less" scoped>
.pointer {
  transform-origin: 165px 36px;
}
</style>
