<template>
  <div class="alert-map-container" ref="mapContainer">
    <div class="map-wrapper">
      <Amap
        ref="mainMap"
        container-id="main-alert-map"
        width="100%"
        :height="mapHeight"
        :center="mapCenter"
        :zoom="mapZoom"
        :markers="allMarkers"
      />
    </div>
    <!-- 地图工具栏（搜索框） -->
    <div class="map-toolbar">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索地点..."
        size="small"
        style="width: 300px;"
        @keyup.enter.native="handleSearch"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleSearch"
        ></el-button>
      </el-input>
    </div>
  </div>
</template>

<script>
import Amap from '@/components/Amap'
import { listAlerts } from '@/api/duty/alert'
import { getStatusInfo } from '../utils/alertTransformers'

export default {
  name: 'AlertMap',
  components: {
    Amap
  },
  data() {
    return {
      mapCenter: [120.1551, 30.2741], // 默认中心点（杭州）
      mapZoom: 12, // 默认缩放级别
      allAlertMarkers: [], // 所有警情标记
      allAlerts: [], // 所有警情数据（用于标记点击时查找详情）
      searchKeyword: '', // 搜索关键词
      placeSearch: null, // AMap.PlaceSearch 实例
      refreshTimer: null, // 刷新定时器
      mapHeight: '500px', // 地图高度，会在 mounted 后动态计算
      resizeObserver: null // ResizeObserver 实例
    }
  },
  computed: {
    /**
     * 所有警情标记
     */
    allMarkers() {
      return [...this.allAlertMarkers]
    }
  },
  watch: {
    // 监听标记变化，重新设置点击事件
    allMarkers: {
      handler() {
        this.$nextTick(() => {
          this.setupMarkerClickHandlers()
        })
      },
      deep: true
    }
  },
  mounted() {
    // 等待 DOM 渲染完成后，计算并设置地图高度
    this.$nextTick(() => {
      this.updateMapHeight()
      
      // 使用 ResizeObserver 监听容器大小变化
      if (window.ResizeObserver && this.$refs.mapContainer) {
        this.resizeObserver = new ResizeObserver(() => {
          this.updateMapHeight()
        })
        this.resizeObserver.observe(this.$refs.mapContainer)
      } else {
        // 降级方案：使用窗口 resize 事件
        window.addEventListener('resize', this.updateMapHeight)
      }
    })
    
    // 加载所有警情标记
    this.loadAllAlertMarkers()
    
    // 定期刷新标记（每60秒）
    this.refreshTimer = setInterval(() => {
      this.loadAllAlertMarkers()
    }, 60000)
  },
  beforeDestroy() {
    // 清理定时器
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer)
      this.refreshTimer = null
    }
    // 清理 ResizeObserver
    if (this.resizeObserver) {
      this.resizeObserver.disconnect()
      this.resizeObserver = null
    } else {
      // 移除窗口 resize 监听
      window.removeEventListener('resize', this.updateMapHeight)
    }
  },
  methods: {
    /**
     * 更新地图高度（动态计算）
     */
    updateMapHeight() {
      if (this.$refs.mapContainer) {
        const container = this.$refs.mapContainer
        const height = container.offsetHeight || container.clientHeight
        
        // 如果容器高度为0或太小，等待一下再重试（最多重试3次）
        if (height <= 100 && !this._heightRetryCount) {
          this._heightRetryCount = 0
        }
        
        if (height <= 100 && this._heightRetryCount < 3) {
          this._heightRetryCount++
          setTimeout(() => {
            this.updateMapHeight()
          }, 200)
          return
        }
        
        // 重置重试计数
        this._heightRetryCount = 0
        
        // 只有当高度大于100px且与当前高度不同时才更新
        const currentHeight = parseInt(this.mapHeight) || 0
        if (height > 100 && height !== currentHeight) {
          this.mapHeight = `${height}px`
          // 如果地图已创建，通知地图调整大小
          if (this.$refs.mainMap && this.$refs.mainMap.map) {
            this.$nextTick(() => {
              try {
                this.$refs.mainMap.map.resize()
              } catch (error) {
                console.warn('地图调整大小失败:', error)
              }
            })
          }
        }
      }
    },
    
    /**
     * 加载所有警情标记（用于地图显示）
     */
    async loadAllAlertMarkers() {
      try {
        // 获取所有非草稿状态的警情（有位置信息的）
        const res = await listAlerts({})
        
        if (res.code === 200) {
          const alerts = res.rows || []
          // 过滤出有位置信息的警情，排除草稿
          const alertsWithLocation = alerts.filter(alert => 
            alert.longitude && 
            alert.latitude && 
            alert.status !== 'draft'
          )
          
          // 保存所有警情数据（用于点击标记时查找详情）
          this.allAlerts = alertsWithLocation
          
          // 转换为地图标记
          this.allAlertMarkers = alertsWithLocation.map(alert => {
            // 传入完整的 alert 对象（后端已经包含了 transferRecord 和 convertRecord）
            const statusInfo = getStatusInfo(alert)
            
            // 根据状态标签类型设置不同颜色
            let markerColor = 'blue' // 默认
            if (statusInfo.tag === 'primary') markerColor = 'primary'
            else if (statusInfo.tag === 'warning') markerColor = 'warning'
            else if (statusInfo.tag === 'success') markerColor = 'success'
            else if (statusInfo.tag === 'info') markerColor = 'info'
            
            return {
              lat: parseFloat(alert.latitude),
              lng: parseFloat(alert.longitude),
              title: alert.alertNo || '警情',
              content: `${alert.summary || '无摘要'}<br/>状态: ${statusInfo.label}`,
              color: markerColor,
              alertId: alert.id // 用于点击时查找详情
            }
          })
          
          // 更新标记后，设置标记点击事件
          this.$nextTick(() => {
            this.setupMarkerClickHandlers()
          })
        }
      } catch (error) {
        console.error('加载警情标记失败:', error)
      }
    },
    
    // 移除地图点击选择位置功能（已改用 LocationPickerDialog）
    
    /**
     * 处理标记点击（查看警情详情）
     */
    handleMarkerClick(marker) {
      if (marker.alertId) {
        // 触发事件，传递警情ID
        this.$emit('marker-clicked', marker.alertId)
      }
    },
    
    /**
     * 处理地图搜索
     */
    handleSearch() {
      if (!this.searchKeyword.trim()) {
        this.$message.warning('请输入搜索关键词')
        return
      }
      
      if (!window.AMap) {
        this.$message.warning('地图服务未加载')
        return
      }
      
      // 初始化 PlaceSearch（如果未初始化）
      if (!this.placeSearch) {
        window.AMap.plugin('AMap.PlaceSearch', () => {
          this.placeSearch = new window.AMap.PlaceSearch({
            city: '全国',
            pageSize: 10
          })
          this.performSearch()
        })
      } else {
        this.performSearch()
      }
    },
    
    /**
     * 执行搜索
     */
    performSearch() {
      this.placeSearch.search(this.searchKeyword, (status, result) => {
        if (status === 'complete' && result.poiList && result.poiList.pois.length > 0) {
          const poi = result.poiList.pois[0]
          const location = poi.location
          
          // 更新地图中心点和缩放级别
          this.mapCenter = [location.lng, location.lat]
          this.mapZoom = 16 // 设置合适的缩放级别以显示确切地点（16-18 比较合适）
          
          // 如果地图实例已加载，直接调用 setZoomAndCenter 以获得更好的动画效果
          if (this.$refs.mainMap && this.$refs.mainMap.map) {
            this.$refs.mainMap.map.setZoomAndCenter(16, [location.lng, location.lat])
          }
          
          this.$message.success(`已定位到: ${poi.name}`)
        } else {
          this.$message.warning('未找到相关地点')
        }
      })
    },
    
    /**
     * 刷新标记（供外部调用）
     */
    refresh() {
      this.loadAllAlertMarkers()
    },
    
    // 移除地图点击事件处理器（不再需要点击地图选择位置功能）
    
    /**
     * 更新标记点击事件（在 updateMarkers 中调用）
     */
    setupMarkerClickHandlers() {
      if (!this.$refs.mainMap || !this.$refs.mainMap.map) return
      
      // 等待标记更新完成（需要等待 Amap 组件的 updateMarkers 完成）
      this.$nextTick(() => {
        // 添加额外的延迟，确保 Amap 组件已经创建了标记
        setTimeout(() => {
          if (this.$refs.mainMap.markerList && this.$refs.mainMap.infoWindowList) {
            this.$refs.mainMap.markerList.forEach((marker, index) => {
              // 获取对应的标记数据
              const markerData = this.allMarkers[index]
              
              // 如果是警情标记（有 alertId），添加自定义点击处理
              if (markerData && markerData.alertId) {
                // 获取对应的信息窗口（Amap 组件已创建）
                const infoWindow = this.$refs.mainMap.infoWindowList[index]
                
                // 移除旧的事件监听器（如果存在）
                marker.off('click')
                
                // 添加新的点击事件监听器
                marker.on('click', () => {
                  // 先打开信息窗口（如果存在）
                  if (infoWindow) {
                    // 关闭其他信息窗口
                    this.$refs.mainMap.infoWindowList.forEach(iw => {
                      if (iw && iw !== infoWindow) {
                        iw.close()
                      }
                    })
                    infoWindow.open(this.$refs.mainMap.map, marker.getPosition())
                  }
                  
                  // 触发自定义事件，传递警情ID
                  this.handleMarkerClick(markerData)
                })
              }
            })
          }
        }, 100) // 延迟100ms，确保 Amap 组件的 updateMarkers 已完成
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.alert-map-container {
  position: relative;
  width: 100%;
  height: 100%; /* 明确设置高度，确保能正确计算 */
  flex: 1; /* 使用 flex: 1 占满父容器的剩余空间（父容器是 flexbox） */
  min-height: 500px;
  display: flex;
  flex-direction: column;
}

.map-wrapper {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0; /* 重要：允许 flex 子元素缩小 */
  
  /* 确保 Amap 组件占满容器 */
  ::v-deep > div {
    width: 100%;
    height: 100%;
  }
  
  /* 确保地图容器占满高度 */
  ::v-deep [id^="amap-container"] {
    width: 100%;
    height: 100%;
  }
}

.map-toolbar {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
}
</style>