<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; // 最大宽度
  
  // 计算实际距离（米）
  let meters = resolution * 100; // 基于100像素计算距离

  // 让比例尺线段宽度更贴合整数距离
  // 取常用的比例尺长度（如1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000...）
  const niceScales = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000, 50000, 100000];
  
  // 找到最接近的"漂亮"比例尺值
  let best = niceScales[0];
  for (let i = 0; i < niceScales.length; i++) {
    if (meters < niceScales[i]) {
      // 如果当前值已经超过了meters，我们选择前一个或当前值
      best = i === 0 ? niceScales[0] : 
             (meters - niceScales[i-1] < niceScales[i] - meters) ? 
             niceScales[i-1] : niceScales[i];
      break;
    }
    if (i === niceScales.length - 1) {
      best = niceScales[i]; // 如果到达数组末尾，使用最大值
    }
  }
  
  // 重新计算线段宽度（像素）
  let width = best / resolution;
  
  // 限制宽度在合理范围内
  width = Math.max(minWidth, Math.min(maxWidth, width));
  scaleWidth.value = Math.round(width);
  
  // 设置显示文本
  if (best >= 1000) {
    scaleText.value = (best / 1000) + ' 公里';
  } else {
    scaleText.value = best + ' 米';
  }
}

// 监听地图事件
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> 