<template>
  <div class="scale-control">
    <div class="scale-bar">
      <div class="scale-line" :style="{ width: scaleWidth + 'px' }"></div>
      <div class="scale-ticks" :style="{ width: scaleWidth + 'px' }">
        <div class="tick left"></div>
        <div class="tick right"></div>
      </div>
      <div class="scale-text">{{ scaleText }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  map: Object,
  position: {
    type: String,
    default: 'bottomleft' // 默认位置在左下角
  }
});

// 响应式状态
const scaleText = ref('100 米');
const scaleWidth = ref(80);

// 更新比例尺
function updateScale() {
  if (!props.map) return;
  
  const view = props.map.getView();
  if (!view) return;
  
  const resolution = view.getResolution();
  if (!resolution) return;

  // 设定比例尺线段的像素宽度范围
  const minWidth = 60;  // 最小宽度
  const maxWidth = 150; // 最大宽度
  
  // 目标宽度取中值，随后按分辨率调出“漂亮值”并确保宽度在范围内
  const targetWidth = Math.round((minWidth + maxWidth) / 2); // 约 105px

  // 计算目标显示距离（米）
  const targetMeters = resolution * targetWidth;

  // 按 1-2-5 的“漂亮刻度”规则取最近显示值（更平滑地随档位变化）
  function toNice(m) {
    if (m <= 0) return 0;
    const exp = Math.floor(Math.log10(m));
    const base = m / Math.pow(10, exp);
    let niceBase;
    if (base < 1.5) niceBase = 1;
    else if (base < 3) niceBase = 2;
    else if (base < 7) niceBase = 5;
    else niceBase = 10;
    return niceBase * Math.pow(10, exp);
  }

  // 初步取一个“漂亮值”，并基于它计算线段宽度
  let displayMeters = toNice(targetMeters);
  let width = displayMeters / resolution;

  // 若宽度超界，按界限重新计算显示距离并再次取“漂亮值”以保证文本与线段一致
  if (width < minWidth || width > maxWidth) {
    width = Math.max(minWidth, Math.min(maxWidth, width));
    displayMeters = toNice(width * resolution);
  }

  // 应用宽度
  scaleWidth.value = Math.round(width);

  // 设置显示文本（以米/公里显示，与线段宽度一致）
  if (displayMeters >= 1000) {
    const km = displayMeters / 1000;
    // 保留一位小数的“漂亮值”展示
    scaleText.value = (Math.round(km * 10) / 10) + ' 公里';
  } else {
    scaleText.value = Math.round(displayMeters) + ' 米';
  }
}

// 监听地图事件
function setupListeners() {
  if (!props.map) return;
  
  // 使用moveend事件，它会在任何导致分辨率变化的操作后触发
  // 包括缩放、平移等
  props.map.on('moveend', updateScale);
  
  // 初始更新一次
  updateScale();
}

// 清理事件监听
function cleanupListeners() {
  if (props.map) {
    props.map.un('moveend', updateScale);
  }
}

// 监听map属性变化
watch(() => props.map, (newMap) => {
  cleanupListeners(); // 清理旧的监听器
  if (newMap) {
    setupListeners();
  }
});

onMounted(() => {
  setupListeners();
});

onUnmounted(() => {
  cleanupListeners();
});
</script>

<style scoped>
.scale-control {
  position: absolute;
  left: 30px;
  bottom: 190px;
  z-index: 1200;
  pointer-events: none;
}

.scale-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 3px 6px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.scale-line {
  height: 3px;
  background-color: #27313F;
  margin-bottom: 1px;
}

.scale-ticks {
  position: relative;
  height: 0;
}

.tick {
  position: absolute;
  width: 2px;
  height: 8px;
  background-color: #27313F;
  bottom: -3px;
}

.tick.left {
  left: 0;
}

.tick.right {
  right: 0;
}

.scale-text {
  font-size: 12px;
  color: #27313F;
  font-weight: normal;
  margin-top: 4px;
  white-space: nowrap;
  font-family: Arial, sans-serif;
}
</style>