<template>
  <div class="baidu-map-wrapper">
    <div class="baidu-map-container" ref="mapContainer"></div>
    
    <!-- 自定义缩放控制按钮 -->
    <div class="map-zoom-controls" v-if="isReady">
      <button class="zoom-btn zoom-in" @click="zoomIn" title="放大">
        <span class="zoom-icon">+</span>
      </button>
      <button class="zoom-btn zoom-out" @click="zoomOut" title="缩小">
        <span class="zoom-icon">−</span>
      </button>
      <button class="zoom-btn zoom-reset" @click="resetZoom" title="重置缩放">
        <span class="zoom-icon">⌂</span>
      </button>
    </div>
    
    <!-- 缩放级别显示 -->
    <div class="zoom-level-display" v-if="isReady && showZoomLevel">
      缩放级别: {{ currentZoom }}
    </div>
    
    <div v-if="isLoading" class="map-loading-overlay">
      <div class="loading-content">
        <div class="loading-spinner"></div>
        <p>地图加载中...</p>
      </div>
    </div>
    <!-- 新增：加载状态信息div -->
    <div v-if="statusText" class="map-status">{{ statusText }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { createMap, addMarkers, clearOverlays, setViewToFitMarkers } from '../utils/mapService'
import { baiduMapTester } from '../utils/baiduMapTest'

// 定义组件属性
const props = defineProps({
  // 地图标记数据
  markers: {
    type: Array,
    default: () => []
  },
  // 地图配置选项
  options: {
    type: Object,
    default: () => ({})
  },
  // 地图高度
  height: {
    type: String,
    default: '100%'
  },
  // 是否显示缩放级别
  showZoomLevel: {
    type: Boolean,
    default: true
  }
})

// 定义事件
const emit = defineEmits(['map-ready', 'marker-click', 'map-click'])

// 地图容器引用
const mapContainer = ref(null)

// 组件状态
const isLoading = ref(true)
// 新增：加载状态文本
const statusText = ref('')
let clearStatusTimer = null
// 新增：地图就绪标志
const isReady = ref(false)

// 缩放相关状态
const currentZoom = ref(10)
const defaultZoom = ref(10)

// 地图实例和标记
let baiduMap = null
let mapMarkers = []
let markersInitialized = false
let clickListenerAdded = false

// 初始化地图
async function initMap() {
  statusText.value = '正在初始化地图...'
  console.log('BaiduMap组件: 开始初始化地图')
  console.log('地图容器:', mapContainer.value)
  console.log('容器尺寸:', mapContainer.value?.offsetWidth, 'x', mapContainer.value?.offsetHeight)
  console.log('window.BMap是否存在:', typeof window.BMap)
  
  if (!mapContainer.value) {
    console.error('地图容器不存在')
    statusText.value = '地图容器不存在'
    isLoading.value = false
    return
  }
  
  try {
    console.log('BaiduMap组件: 调用createMap函数')
    statusText.value = '正在创建地图实例...'
    
    // 确保容器有尺寸
    if (mapContainer.value.offsetWidth === 0 || mapContainer.value.offsetHeight === 0) {
      console.log('BaiduMap组件: 容器尺寸为0，等待容器渲染...')
      statusText.value = '等待容器渲染...'
      // 等待容器渲染
      await new Promise(resolve => setTimeout(resolve, 200))
      
      // 再次检查容器尺寸
      if (mapContainer.value.offsetWidth === 0 || mapContainer.value.offsetHeight === 0) {
        // 强制设置容器尺寸
        mapContainer.value.style.width = '100%'
        mapContainer.value.style.height = '400px'
        mapContainer.value.style.minHeight = '400px'
        console.log('BaiduMap组件: 强制设置容器尺寸')
        await new Promise(resolve => setTimeout(resolve, 100))
      }
    }
    
    // 验证容器最终状态
    console.log('BaiduMap组件: 容器最终状态:', {
      offsetWidth: mapContainer.value.offsetWidth,
      offsetHeight: mapContainer.value.offsetHeight,
      clientWidth: mapContainer.value.clientWidth,
      clientHeight: mapContainer.value.clientHeight
    })
    
    // 确保容器仍然存在且有效
    if (!mapContainer.value || !mapContainer.value.parentNode) {
      throw new Error('地图容器已从DOM中移除')
    }
    
    // 等待下一个事件循环，确保DOM完全稳定
    await new Promise(resolve => setTimeout(resolve, 50))
    
    // 再次验证容器
    if (!mapContainer.value || mapContainer.value.offsetWidth === 0 || mapContainer.value.offsetHeight === 0) {
      throw new Error('地图容器尺寸无效')
    }
    
    // 创建地图实例
    baiduMap = await createMap(mapContainer.value, props.options)
    
    // 验证地图实例是否有效
    if (!baiduMap || typeof baiduMap.addEventListener !== 'function') {
      throw new Error('地图实例创建失败或无效')
    }
    
    console.log('BaiduMap组件: 地图创建成功', baiduMap)
    statusText.value = '地图实例创建成功，正在加载瓦片...'
    
    // 监听地图完全加载完成事件
    baiduMap.addEventListener('tilesloaded', () => {
      console.log('BaiduMap组件: 地图瓦片加载完成')
      
      // 只在第一次加载时初始化
      if (!markersInitialized) {
        console.log('BaiduMap组件: 首次加载，开始初始化')
        
        // 标记地图就绪，防止兜底重复添加
        if (baiduMap) {
          baiduMap._markersAdded = true
        }
        
        // 初始化缩放相关状态
        if (baiduMap && typeof baiduMap.getZoom === 'function') {
          currentZoom.value = baiduMap.getZoom()
          defaultZoom.value = currentZoom.value
          
          // 添加缩放事件监听器
          baiduMap.addEventListener('zoomend', () => {
            if (baiduMap && typeof baiduMap.getZoom === 'function') {
              currentZoom.value = baiduMap.getZoom()
              console.log('缩放级别变化:', currentZoom.value)
            }
          })
        }
        
        // 添加地图点击事件监听器（只添加一次）
        if (!clickListenerAdded) {
          baiduMap.addEventListener('click', function(e) {
            console.log('BaiduMap组件: 地图被点击', e)
            console.log('点击事件详情:', {
              type: e.type,
              lnglat: e.lnglat,
              point: e.point,
              pixel: e.pixel,
              overlay: e.overlay,
              target: e.target,
              currentTarget: e.currentTarget
            })
            
            // 百度地图点击事件的标准处理方式
            let lng, lat
            if (e.lnglat) {
              lng = e.lnglat.lng
              lat = e.lnglat.lat
            } else if (e.point) {
              lng = e.point.lng
              lat = e.point.lat
            } else {
              // 如果事件对象没有直接的位置信息，尝试从地图获取
              const point = baiduMap.getPosition(e.pixel)
              if (point) {
                lng = point.lng
                lat = point.lat
              } else {
                console.warn('BaiduMap组件: 无法获取点击位置信息', e)
                return
              }
            }
            
            console.log('解析到的坐标:', { lng, lat })
            
            // 触发地图点击事件，传递点击位置信息
            emit('map-click', {
              lnglat: {
                lng: lng,
                lat: lat
              },
              pixel: e.pixel || { x: 0, y: 0 },
              overlay: e.overlay || null
            })
          })
          clickListenerAdded = true
          console.log('BaiduMap组件: 点击事件监听器已添加')
        }
        
        isReady.value = true
        isLoading.value = false
        statusText.value = '地图加载完成'
        // 自动隐藏状态条
        if (clearStatusTimer) clearTimeout(clearStatusTimer)
        clearStatusTimer = setTimeout(() => { statusText.value = '' }, 1200)
        
        // 地图就绪后，检查是否有待添加的标记
        if (props.markers && props.markers.length > 0) {
          console.log('BaiduMap组件: 地图就绪，添加标记', props.markers.length)
          addMarkersToMap()
        } else {
          console.log('BaiduMap组件: 没有标记数据，添加测试标记')
          const testMarkers = [{
            location: { lng: 106.27, lat: 38.47 },
            title: '测试标记',
            content: '这是一个测试标记点'
          }]
          addMarkers(baiduMap, testMarkers)
        }
        
        markersInitialized = true
      }
    })
    
    // 备用方案：如果事件监听失败，使用延时
    setTimeout(() => {
      if (baiduMap && !baiduMap._markersAdded) {
        console.log('BaiduMap组件: 备用方案 - 延时添加标记')
        if (baiduMap) {
          baiduMap._markersAdded = true
        }
        
        // 备用方案中不重复添加点击事件监听器，避免重复触发
        console.log('BaiduMap组件: 备用方案 - 跳过重复的点击事件监听器')
        
        isReady.value = true
        isLoading.value = false
        statusText.value = '地图加载完成（兼容模式）'
        if (clearStatusTimer) clearTimeout(clearStatusTimer)
        clearStatusTimer = setTimeout(() => { statusText.value = '' }, 1500)
        
        if (props.markers && props.markers.length > 0) {
          console.log('BaiduMap组件: 备用方案 - 地图就绪，添加标记', props.markers.length)
          addMarkersToMap()
        } else {
          const testMarkers = [{
            location: { lng: 106.27, lat: 38.47 },
            title: '测试标记',
            content: '这是一个测试标记点'
          }]
          addMarkers(baiduMap, testMarkers)
        }
      }
    }, 2000)
    
    // 触发地图就绪事件
    emit('map-ready', baiduMap)
    console.log('BaiduMap组件: 地图初始化完成')
  } catch (error) {
    console.error('初始化百度地图失败:', error)
    console.error('错误详情:', error.stack)
    statusText.value = '地图加载失败，正在诊断问题...'
    isLoading.value = false
    isReady.value = false
    baiduMap = null
    
    // 运行诊断测试
    try {
      console.log('🔍 开始运行百度地图诊断测试...')
      const testResults = await baiduMapTester.runFullTest()
      const suggestions = baiduMapTester.getFixSuggestions()
      
      console.log('📊 诊断结果:', testResults)
      console.log('💡 修复建议:', suggestions)
      
      if (suggestions.length > 0) {
        statusText.value = `地图加载失败: ${error.message}。请查看控制台获取修复建议。`
      } else {
        statusText.value = '地图加载失败，请检查网络或密钥配置'
      }
    } catch (diagnosticError) {
      console.error('诊断测试失败:', diagnosticError)
      statusText.value = '地图加载失败，请检查网络或密钥配置'
    }
    
    // 清理状态文本
    if (clearStatusTimer) clearTimeout(clearStatusTimer)
    clearStatusTimer = setTimeout(() => { statusText.value = '' }, 5000)
  }
}

// 添加标记到地图
function addMarkersToMap() {
  // 检查地图实例是否有效
  if (!baiduMap || !isReady.value) {
    console.warn('BaiduMap组件: 地图未就绪，跳过标记添加')
    return
  }
  
  // 验证地图实例的有效性
  if (typeof baiduMap.addEventListener !== 'function') {
    console.error('BaiduMap组件: 地图实例无效')
    return
  }
  
  // 验证BMap对象是否可用
  if (!window.BMap) {
    console.error('BaiduMap组件: BMap对象不可用')
    return
  }
  
  try {
    console.log('BaiduMap组件: 开始添加标记，数量:', props.markers?.length || 0)
    
    // 清除现有标记
    clearOverlays(baiduMap)
    
    // 验证标记数据
    if (!props.markers || !Array.isArray(props.markers) || props.markers.length === 0) {
      console.log('BaiduMap组件: 没有标记数据需要添加')
      return
    }
    
    // 添加新标记
    mapMarkers = addMarkers(baiduMap, props.markers, (markerData, marker) => {
      // 触发标记点击事件
      emit('marker-click', markerData, marker)
    })
    
    console.log('BaiduMap组件: 成功添加标记，数量:', mapMarkers.length)
    
    // 调整视图以显示所有标记
    if (mapMarkers.length > 0) {
      const points = mapMarkers.map(marker => marker.getPosition()).filter(point => point)
      if (points.length > 0) {
        setViewToFitMarkers(baiduMap, points)
      }
    }
  } catch (error) {
    console.error('BaiduMap组件: 添加标记失败:', error)
    console.error('错误详情:', error.stack)
  }
}

// 缩放方法
function zoomIn() {
  if (baiduMap && isReady.value) {
    const currentZoomLevel = baiduMap.getZoom()
    const newZoom = Math.min(currentZoomLevel + 1, 19)
    baiduMap.setZoom(newZoom)
    currentZoom.value = newZoom
    console.log('地图放大到级别:', newZoom)
  }
}

function zoomOut() {
  if (baiduMap && isReady.value) {
    const currentZoomLevel = baiduMap.getZoom()
    const newZoom = Math.max(currentZoomLevel - 1, 3)
    baiduMap.setZoom(newZoom)
    currentZoom.value = newZoom
    console.log('地图缩小到级别:', newZoom)
  }
}

function resetZoom() {
  if (baiduMap && isReady.value) {
    // 重置到默认缩放级别和中心点
    const defaultCenter = new window.BMap.Point(106.27, 38.47)
    baiduMap.centerAndZoom(defaultCenter, defaultZoom.value)
    currentZoom.value = defaultZoom.value
    console.log('地图重置到默认状态:', defaultZoom.value)
  }
}

// 监听标记数据变化
watch(() => props.markers, (newMarkers) => {
  if (baiduMap && isReady.value && newMarkers) {
    addMarkersToMap()
  } else if (newMarkers && newMarkers.length > 0) {
    // 如果地图还未就绪但有标记数据，等待地图就绪后再添加
    console.log('BaiduMap组件: 地图未就绪，等待地图加载完成后添加标记')
  }
}, { deep: true })

// 重试机制
let retryCount = 0
const maxRetries = 3

async function retryInitMap() {
  if (retryCount >= maxRetries) {
    console.error('BaiduMap组件: 达到最大重试次数，停止重试')
    statusText.value = '地图初始化失败，请刷新页面重试'
    isLoading.value = false
    return
  }
  
  retryCount++
  console.log(`BaiduMap组件: 第${retryCount}次重试初始化地图`)
  statusText.value = `正在重试初始化地图 (${retryCount}/${maxRetries})...`
  
  // 清理之前的状态
  if (baiduMap) {
    baiduMap = null
  }
  
  // 等待一段时间后重试
  await new Promise(resolve => setTimeout(resolve, 1000 * retryCount))
  
  try {
    await initMap()
  } catch (error) {
    console.error(`BaiduMap组件: 第${retryCount}次重试失败:`, error)
    if (retryCount < maxRetries) {
      retryInitMap()
    } else {
      statusText.value = '地图初始化失败，请检查网络连接或刷新页面'
      isLoading.value = false
    }
  }
}

// 组件挂载时初始化地图
onMounted(() => {
  console.log('BaiduMap组件: 组件已挂载')
  console.log('地图容器DOM:', mapContainer.value)
  console.log('地图容器ID:', mapContainer.value?.id)
  console.log('地图容器类名:', mapContainer.value?.className)
  
  // 延迟初始化，确保DOM完全渲染
  setTimeout(async () => {
    console.log('BaiduMap组件: 延迟初始化地图')
    // 确保容器完全可见
    if (mapContainer.value) {
      mapContainer.value.style.visibility = 'visible'
      mapContainer.value.style.display = 'block'
    }
    
    try {
      await initMap()
    } catch (error) {
      console.error('BaiduMap组件: 初始化失败，开始重试:', error)
      retryInitMap()
    }
  }, 200)
})

// 组件卸载时清理资源
onUnmounted(() => {
  if (baiduMap) {
    clearOverlays(baiduMap)
    baiduMap = null
  }
  isReady.value = false
  markersInitialized = false
  if (clearStatusTimer) {
    clearTimeout(clearStatusTimer)
    clearStatusTimer = null
  }
})

// 暴露地图实例
defineExpose({
  getMapInstance: () => baiduMap
})
</script>

<style scoped>
.baidu-map-wrapper {
  position: relative;
  width: 100%;
  min-height: 400px;
}

.baidu-map-container {
  width: 100%;
  height: v-bind(height);
  min-height: 400px;
  position: relative;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  overflow: hidden;
}

.map-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* 新增：地图状态信息样式 */
.map-status {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 1001;
  pointer-events: none;
}

.loading-content {
  text-align: center;
  color: #666;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-content p {
  margin: 0;
  font-size: 14px;
}
</style>