<template>
  <div class="map-zoom-demo">
    <div class="demo-header">
      <h2>地图缩放功能演示</h2>
      <p>这个页面展示了地图组件的各种缩放功能</p>
    </div>
    
    <div class="demo-controls">
      <div class="control-group">
        <label>显示缩放级别：</label>
        <input type="checkbox" v-model="showZoomLevel" />
      </div>
      
      <div class="control-group">
        <label>当前缩放级别：</label>
        <span class="zoom-info">{{ currentZoom }}</span>
      </div>
    </div>
    
    <div class="map-container">
      <BaiduMap 
        :markers="demoMarkers" 
        :show-zoom-level="showZoomLevel"
        :height="'500px'"
        @map-ready="onMapReady"
        @marker-click="onMarkerClick"
      />
    </div>
    
    <div class="demo-instructions">
      <h3>缩放功能说明：</h3>
      <ul>
        <li><strong>右上角缩放按钮：</strong>
          <ul>
            <li>「+」按钮：放大地图</li>
            <li>「−」按钮：缩小地图</li>
            <li>「⌂」按钮：重置到默认缩放级别和中心点</li>
          </ul>
        </li>
        <li><strong>鼠标滚轮：</strong>向上滚动放大，向下滚动缩小</li>
        <li><strong>双击地图：</strong>放大一个级别</li>
        <li><strong>键盘控制：</strong>使用方向键移动地图，+/- 键缩放</li>
        <li><strong>缩放级别显示：</strong>右下角显示当前缩放级别（可通过复选框控制显示/隐藏）</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import BaiduMap from '../components/BaiduMap.vue'

// 响应式数据
const showZoomLevel = ref(true)
const mapInstance = ref(null)

// 演示标记数据
const demoMarkers = ref([
  {
    location: { lng: 106.27, lat: 38.47 },
    title: '银川市',
    content: '宁夏回族自治区首府'
  },
  {
    location: { lng: 106.15, lat: 38.35 },
    title: '永宁县',
    content: '银川市下辖县'
  },
  {
    location: { lng: 106.45, lat: 38.55 },
    title: '贺兰县',
    content: '银川市下辖县'
  }
])

// 计算当前缩放级别
const currentZoom = computed(() => {
  return mapInstance.value ? mapInstance.value.currentZoom : '未知'
})

// 地图就绪事件
const onMapReady = (map) => {
  console.log('地图就绪:', map)
  mapInstance.value = map
}

// 标记点击事件
const onMarkerClick = (markerData, marker) => {
  console.log('标记被点击:', markerData)
  alert(`点击了标记: ${markerData.title}`)
}
</script>

<style scoped>
.map-zoom-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-header {
  text-align: center;
  margin-bottom: 20px;
}

.demo-header h2 {
  color: #1890ff;
  margin-bottom: 10px;
}

.demo-controls {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-group label {
  font-weight: 500;
  color: #333;
}

.zoom-info {
  font-weight: bold;
  color: #1890ff;
  background: #e6f7ff;
  padding: 2px 8px;
  border-radius: 4px;
}

.map-container {
  border: 2px solid #d9d9d9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.demo-instructions {
  background: #fafafa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
}

.demo-instructions h3 {
  color: #1890ff;
  margin-top: 0;
  margin-bottom: 15px;
}

.demo-instructions ul {
  margin: 0;
  padding-left: 20px;
}

.demo-instructions li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.demo-instructions ul ul {
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>