<template>
  <div id="aInspectionRouteMap" class="map-container"></div>
</template>

<script>
import { listAdminInspectionRoutePoints } from '@/api/inspection/aInspectionPlanDetailApi'

export default {
  name: 'AInspectionRouteMap',
  data() {
    return {
      map: null,
      points: []
    }
  },
  methods: {
    async initMap(params) {
      try {
        const { data } = await listAdminInspectionRoutePoints({
          inspectionRouteId: params.inspectionRouteId,
          page: 1,
          row: 1000
        })
        this.points = data
        this.initMapView()
      } catch (error) {
        this.$message.error(this.$t('common.fetchError'))
      }
    },
    initMapView() {
      if (!this.points || this.points.length === 0) return

      // 这里需要根据实际地图API实现地图初始化
      // 示例代码，需要替换为实际地图API调用
      console.log('Initialize map with points:', this.points)
      
      // 示例：使用腾讯地图API
      if (window.TMap) {
        const center = new TMap.LatLng(this.points[0].lat, this.points[0].lng)
        this.map = new TMap.Map(document.getElementById('aInspectionRouteMap'), {
          center: center,
          zoom: 17
        })
        
        // 添加标记点
        const markers = this.points.map(point => ({
          position: new TMap.LatLng(point.lat, point.lng),
          properties: {
            title: point.inspectionName
          }
        }))
        
        new TMap.MultiMarker({
          map: this.map,
          geometries: markers
        })
      }
    }
  }
}
</script>

<style scoped>
.map-container {
  height: 600px;
  width: 100%;
}
</style>