<template>
  <div :id="containerId" :style="{ width: width, height: height }">
    <div v-if="loading" style="text-align: center; padding-top: 50px; color: #909399;">
      <i class="el-icon-loading" style="font-size: 24px;"></i>
      <div style="margin-top: 10px;">地图加载中...</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Amap',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    center: {
      type: Array,
      default: () => [116.397428, 39.90923] // 默认北京 [经度, 纬度]
    },
    zoom: {
      type: Number,
      default: 13
    },
    markers: {
      type: Array,
      default: () => [] // [{ lat, lng, title, content }]
    },
    containerId: {
      type: String,
      default: 'amap-container'
    }
  },
  data() {
    return {
      map: null,
      markerList: [],
      infoWindowList: [],
      loading: true,
      apiKey: null
    }
  },
  computed: {
    // 确保容器ID是唯一的
    uniqueContainerId() {
      return this.containerId || `amap-container-${this._uid}`
    }
  },
  mounted() {
    this.loadAmapScript()
  },
  watch: {
    center: {
      handler(newVal) {
        if (this.map && newVal && newVal.length === 2) {
          this.map.setCenter(newVal)
        }
      },
      deep: true
    },
    zoom: {
      handler(newVal) {
        if (this.map && newVal) {
          this.map.setZoom(newVal)
        }
      }
    },
    markers: {
      handler() {
        this.updateMarkers()
      },
      deep: true
    }
  },
  methods: {
    // 从后端获取API Key并加载高德地图脚本
    async loadAmapScript() {
      try {
        // 从后端获取高德地图API Key和安全密钥
        const [apiKeyResponse, securityKeyResponse] = await Promise.all([
          this.getConfigKey('amap.api.key'),
          this.getConfigKey('amap.api.security.key').catch(() => null) // 如果配置不存在，返回null
        ])
        
        console.log('API Key 响应:', apiKeyResponse)
        
        // 处理不同的返回格式：可能是 response.data 或 response.msg 或直接是字符串
        // 根据 user/index.vue 中的用法，使用 response.msg
        this.apiKey = apiKeyResponse.msg || apiKeyResponse.data || apiKeyResponse
        
        // 获取安全密钥
        let securityKey = null
        if (securityKeyResponse) {
          securityKey = securityKeyResponse.msg || securityKeyResponse.data || securityKeyResponse
        }
        
        // 配置安全密钥（必须在加载脚本之前）
        if (securityKey && securityKey !== 'YOUR_SECURITY_KEY' && securityKey.trim() !== '') {
          window._AMapSecurityConfig = {
            securityJsCode: securityKey
          }
          console.log('安全密钥已配置')
        } else {
          console.warn('安全密钥未配置，某些服务可能无法使用')
        }
        
        console.log('提取的API Key:', this.apiKey)
        console.log('API Key 类型:', typeof this.apiKey)
        console.log('API Key 长度:', this.apiKey ? this.apiKey.length : 0)
        
        if (!this.apiKey || this.apiKey === 'YOUR_AMAP_KEY' || this.apiKey.trim() === '') {
          console.error('高德地图API Key未配置，请在系统管理-参数配置中配置 amap.api.key')
          this.$message.error('地图配置未完成，请联系管理员配置高德地图API Key')
          this.loading = false
          return
        }
        
        // 如果已经加载，确保安全密钥已配置，然后直接初始化地图
        if (window.AMap) {
          console.log('AMap 已存在，直接初始化')
          // 即使AMap已加载，也设置安全密钥（可能之前未设置）
          if (securityKey && !window._AMapSecurityConfig) {
            window._AMapSecurityConfig = {
              securityJsCode: securityKey
            }
            console.log('安全密钥已配置（AMap已存在）')
          }
          this.initMap()
          return
        }
        
        // 如果脚本正在加载，等待加载完成
        if (document.querySelector('script[src*="webapi.amap.com"]')) {
          console.log('检测到高德地图脚本正在加载，等待...')
          let retryCount = 0
          const maxRetries = 50 // 最多等待5秒
          const checkInterval = setInterval(() => {
            retryCount++
            if (window.AMap) {
              clearInterval(checkInterval)
              console.log('AMap 加载完成')
              this.initMap()
            } else if (retryCount >= maxRetries) {
              clearInterval(checkInterval)
              console.error('高德地图脚本加载超时')
              this.$message.error('地图加载超时，请刷新页面重试')
              this.loading = false
            }
          }, 100)
          return
        }
        
        // 动态创建script标签加载高德地图
        console.log('开始加载高德地图脚本，API Key:', this.apiKey.substring(0, 10) + '...')
        const script = document.createElement('script')
        script.src = `https://webapi.amap.com/maps?v=2.0&key=${this.apiKey}`
        script.async = true
        script.onload = () => {
          console.log('高德地图脚本加载成功')
          console.log('window.AMap:', window.AMap)
          // 脚本加载后，等待一小段时间确保 AMap 对象已初始化
          setTimeout(() => {
            if (window.AMap) {
              console.log('AMap 对象已就绪')
              this.initMap()
            } else {
              console.error('脚本加载完成但 AMap 对象不存在')
              this.$message.error('地图初始化失败，请刷新页面重试')
              this.loading = false
            }
          }, 200)
        }
        script.onerror = (error) => {
          console.error('高德地图脚本加载失败:', error)
          this.$message.error('地图加载失败，请检查高德地图配置和网络连接')
          this.loading = false
        }
        document.head.appendChild(script)
      } catch (error) {
        console.error('获取高德地图配置失败:', error)
        console.error('错误堆栈:', error.stack)
        this.$message.error('获取地图配置失败: ' + (error.message || '未知错误'))
        this.loading = false
      }
    },
    
    initMap() {
      // 检查高德地图是否已加载
      if (window.AMap) {
        try {
          this.createMap()
        } catch (error) {
          console.error('创建地图失败:', error)
          this.$message.error('创建地图失败: ' + (error.message || '未知错误'))
          this.loading = false
        }
      } else {
        // 如果还没加载，轮询检查（最多等待3秒）
        let retryCount = 0
        const maxRetries = 30 // 30次 * 100ms = 3秒
        const checkInterval = setInterval(() => {
          retryCount++
          if (window.AMap) {
            clearInterval(checkInterval)
            this.createMap()
          } else if (retryCount >= maxRetries) {
            clearInterval(checkInterval)
            console.error('高德地图未加载，已超时')
            this.$message.error('地图加载超时，请检查网络连接或刷新页面重试')
            this.loading = false
          }
        }, 100)
      }
    },
    createMap() {
      try {
        // 检查 AMap 对象是否存在
        if (!window.AMap) {
          console.error('AMap 对象不存在，无法创建地图')
          this.$message.error('地图库未加载，请刷新页面重试')
          this.loading = false
          return
        }
        
        // 检查容器是否存在
        const container = document.getElementById(this.uniqueContainerId)
        if (!container) {
          console.error('地图容器不存在:', this.uniqueContainerId)
          this.$message.error('地图容器不存在，请刷新页面重试')
          this.loading = false
          return
        }
        
        // 检查容器是否有尺寸
        const containerWidth = container.offsetWidth || container.clientWidth
        const containerHeight = container.offsetHeight || container.clientHeight
        
        // 检查容器是否可见（避免在隐藏的容器中初始化）
        const containerStyle = window.getComputedStyle(container)
        const isVisible = containerStyle.display !== 'none' && 
                         containerStyle.visibility !== 'hidden' &&
                         container.offsetParent !== null
        
        if (containerWidth === 0 || containerHeight === 0 || !isVisible) {
          console.warn('地图容器尺寸为0或不可见，等待容器渲染', {
            width: containerWidth,
            height: containerHeight,
            visible: isVisible
          })
          // 等待容器渲染，最多重试10次（增加重试次数，因为抽屉动画需要时间）
          if (!this._retryCount) this._retryCount = 0
          if (this._retryCount < 10) {
            this._retryCount++
            setTimeout(() => {
              this.createMap()
            }, 300) // 增加延迟时间到300ms
          } else {
            console.error('容器渲染超时，已重试', this._retryCount, '次')
            this.$message.error('地图容器渲染超时，请刷新页面重试')
            this.loading = false
            this._retryCount = 0 // 重置计数
          }
          return
        }
        
        // 重置重试计数
        this._retryCount = 0
        
        console.log('开始创建地图')
        console.log('容器尺寸:', containerWidth, 'x', containerHeight)
        console.log('地图中心点:', this.center)
        console.log('地图缩放级别:', this.zoom)
        console.log('AMap.Map:', window.AMap.Map)
        
        // 验证中心点格式
        if (!Array.isArray(this.center) || this.center.length !== 2) {
          console.error('地图中心点格式错误:', this.center)
          this.$message.error('地图中心点格式错误')
          this.loading = false
          return
        }
        
        // 创建地图实例（使用2D视图，更稳定）
        console.log('调用 AMap.Map 构造函数...')
        this.map = new window.AMap.Map(this.uniqueContainerId, {
          zoom: this.zoom,
          center: this.center,
          viewMode: '2D', // 使用2D视图，更稳定
          resizeEnable: true // 允许地图自动适应容器大小变化
        })
        
        console.log('地图实例创建成功:', this.map)
        
        // 暂时不添加控件，先确保地图能正常显示
        // 高德地图 2.0 版本的控件可能需要额外的插件加载
        // 如果需要控件，可以在后续通过插件方式加载
        console.log('地图创建完成，跳过控件加载（可选功能）')
        
        // 监听地图加载完成事件
        this.map.on('complete', () => {
          console.log('地图加载完成事件触发')
          this.loading = false
          this.updateMarkers()
        })
        
        // 如果complete事件没有触发，延迟更新标记
        setTimeout(() => {
          if (this.loading) {
            console.log('地图加载超时，强制更新标记')
            this.loading = false
            this.updateMarkers()
          }
        }, 2000)
      } catch (error) {
        console.error('创建地图失败:', error)
        console.error('错误类型:', error.constructor.name)
        console.error('错误消息:', error.message)
        console.error('错误堆栈:', error.stack)
        this.$message.error('创建地图失败: ' + (error.message || '未知错误，请检查API Key是否正确'))
        this.loading = false
      }
    },
    updateMarkers() {
      if (!this.map) return
      
      // 清除旧标记和信息窗口
      this.map.clearMap()
      this.markerList = []
      this.infoWindowList = []
      
      // 添加新标记
      if (this.markers && this.markers.length > 0) {
        this.markers.forEach((item, index) => {
            if (item.lat && item.lng) {
              const size = item.isHighlighted ? 24 : 16
              const color = item.isHighlighted ? '#FF4D4F' : (item.color || '#409EFF')
              
              // Build LabelMarker options
              const labelMarkerOptions = {
                position: [item.lng, item.lat], // 注意：高德地图是 [经度, 纬度]
                zIndex: item.isHighlighted ? 1000 : 100
              }
              
              // Icon configuration
              if (item.icon) {
                labelMarkerOptions.icon = {
                  type: 'image',
                  image: item.icon,
                  size: [size, size],
                  anchor: 'center'
                }
              } else {
                // Fallback: create a colored circle as icon
                // For LabelMarker, we still need an icon, so create a data URI
                const canvas = document.createElement('canvas')
                canvas.width = size
                canvas.height = size
                const ctx = canvas.getContext('2d')
                
                // Draw circle background
                ctx.fillStyle = color
                ctx.beginPath()
                ctx.arc(size / 2, size / 2, size / 2 - 2, 0, 2 * Math.PI)
                ctx.fill()
                
                // Draw white border
                ctx.strokeStyle = '#fff'
                ctx.lineWidth = 3
                ctx.stroke()
                
                labelMarkerOptions.icon = {
                  type: 'image',
                  image: canvas.toDataURL('image/png'),
                  size: [size, size],
                  anchor: 'center'
                }
              }
              
              // Text label configuration
              if (item.title || item.typeLabel) {
                labelMarkerOptions.text = {
                  content: item.typeLabel ? `${item.typeLabel} ${item.title || ''}`.trim() : item.title || '',
                  direction: 'bottom', // Label below icon
                  offset: [0, 5], // Offset from icon
                  style: {
                    fontSize: 12,
                    fillColor: '#333',
                    strokeColor: '#fff',
                    strokeWidth: 2,
                    padding: '2px 4px',
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    borderColor: color,
                    borderWidth: 1,
                    borderRadius: 4
                  }
                }
              }
              
              const marker = new AMap.LabelMarker(labelMarkerOptions)
            
            this.map.add(marker)
            this.markerList.push(marker)
            
            // 添加信息窗口
            if (item.content) {
              const infoWindow = new AMap.InfoWindow({
                content: item.content,
                offset: new AMap.Pixel(0, -30)
              })
              
              // Track click timer for this marker
              let clickTimer = null
              
              marker.on('click', () => {
                // 关闭其他信息窗口
                this.infoWindowList.forEach(iw => iw.close())
                
                // Clear existing timer if any
                if (clickTimer) {
                  clearTimeout(clickTimer)
                  clickTimer = null
                }
                
                // Set a timer to handle single click (open info window)
                clickTimer = setTimeout(() => {
                  // Single click: only open info window
                  infoWindow.open(this.map, marker.getPosition())
                  clickTimer = null
                }, 250) // 250ms delay to detect double click
              })
              
              // Handle double click: emit event for drawer
              marker.on('dblclick', () => {
                // Clear single click timer
                if (clickTimer) {
                  clearTimeout(clickTimer)
                  clickTimer = null
                }
                
                // Close info window if open
                infoWindow.close()
                
                // Emit marker-click event for drawer
                this.$emit('marker-click', {
                  marker: marker,
                  data: item.markerData || item,
                  position: marker.getPosition()
                })
              })
              
              marker.on('rightclick', (e) => {
                if (!this.map || !e.lnglat) return
                const pixel = this.map.lngLatToContainer(e.lnglat)
                this.$emit('marker-context', {
                  marker,
                  data: item.markerData || item,
                  position: marker.getPosition(),
                  lnglat: e.lnglat,
                  pixel
                })
              })
              
              this.infoWindowList.push(infoWindow)
            } else {
              // Even without content, support double click for drawer
              let clickTimer = null
              
              marker.on('dblclick', () => {
                if (clickTimer) {
                  clearTimeout(clickTimer)
                  clickTimer = null
                }
                
                this.$emit('marker-click', {
                  marker: marker,
                  data: item.markerData || item,
                  position: marker.getPosition()
                })
              })
            }
          }
        })
        
        // 如果有标记，自动调整视野以包含所有标记
        if (this.markerList.length > 0) {
          this.map.setFitView(this.markerList, false, [20, 20, 20, 20])
        }
      }
    }
  },
  beforeDestroy() {
    // 销毁地图实例
    if (this.map) {
      this.map.destroy()
      this.map = null
    }
    this.markerList = []
    this.infoWindowList = []
  }
}
</script>

<style scoped>
[id^="amap-container"] {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>