<template>
  <div>
    <canvas ref="canvas" @click="handleCanvasClick"></canvas>
    <div v-if="showPopup" class="popup" :style="popupStyle">
      <p>{{ popupContent }}</p >
      <button @click="closePopup">关闭</button>
    </div>
  </div>
</template>

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

export default {
  setup() {
    const canvas = ref(null);
    const showPopup = ref(false);
    const popupContent = ref('');
    const popupStyle = ref({});
    const markers = ref([]);

    const imageUrl = 'your-image-url.jpg'; // 替换为你的图片URL

    onMounted(() => {
      const ctx = canvas.value.getContext('2d');
      const img = new Image();
      img.src = imageUrl;
      img.onload = () => {
        canvas.value.width = img.width;
        canvas.value.height = img.height;
        ctx.drawImage(img, 0, 0);

        // 绘制标记点
        markers.value.forEach(marker => {
          ctx.beginPath();
          ctx.arc(marker.x, marker.y, 5, 0, 2 * Math.PI);
          ctx.fillStyle = 'red';
          ctx.fill();
        });
      };
    });

    const handleCanvasClick = (event) => {
      const rect = canvas.value.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;

      // 检查是否点击了标记点
      const clickedMarker = markers.value.find(marker => {
        const dx = marker.x - x;
        const dy = marker.y - y;
        return Math.sqrt(dx * dx + dy * dy) < 5; // 5是标记点的半径
      });

      if (clickedMarker) {
        showPopup.value = true;
        popupContent.value = clickedMarker.info;
        popupStyle.value = {
          left: `${clickedMarker.x + rect.left}px`,
          top: `${clickedMarker.y + rect.top}px`,
        };
      }
    };

    const closePopup = () => {
      showPopup.value = false;
    };

    return {
      canvas,
      showPopup,
      popupContent,
      popupStyle,
      handleCanvasClick,
      closePopup,
    };
  },
};
</script>

<style>
.popup {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
