<template>
  <div class="map-container">
    <!-- 地图容器 -->
    <div id="container"></div>

    <!-- 地图工具栏 -->
    <div class="map-tools">
      <el-button-group>
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="startBoundaryEdit(null)" v-if="enableEdit" :disabled="isEditing">新增区域</el-button>
        <el-button size="mini" type="warning" icon="el-icon-edit" @click="startAreaBoundaryEdit" v-if="enableEdit" :disabled="isEditing">修改运营区</el-button>
        <el-button size="mini" icon="el-icon-full-screen" @click="setFitView">全局查看</el-button>
        <el-button size="mini" icon="el-icon-picture" @click="toggleMapStyle">切换样式</el-button>
        <el-button size="mini" icon="el-icon-document" @click="toggleLabels">{{ showLabels ? '隐藏' : '显示' }}文字</el-button>
        <el-button size="mini" icon="el-icon-video-play" @click="togglePlaybackPanel">{{ isPlaybackVisible ? '隐藏' : '显示' }}轨迹控制台</el-button>
      </el-button-group>
    </div>

    <!-- 轨迹回放控制面板 -->
    <el-card class="playback-panel" v-if="isPlaybackVisible && locationLogList.length > 0" header="轨迹控制台">
      <el-row class="device-info">
        <el-col :span="24" class="info-item">
          <span class="label">时间：</span>
          <span class="value">{{ currentLog ? currentLog.at : '-' }}</span>
        </el-col>
        <el-col :span="24" class="info-item">
          <span class="label">位置：</span>
          <span class="value">{{ currentLog ? `${currentLog.longitude}, ${currentLog.latitude}` : '-' }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">速度：</span>
          <span class="value">{{ currentSpeed }} km/h</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">电压：</span>
          <span class="value">{{ currentLog ? currentLog.voltage + 'V' : '-' }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">信号：</span>
          <span class="value">{{ currentLog ? currentLog.signal : '-' }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">卫星：</span>
          <span class="value">{{ currentLog ? currentLog.satellites : '-' }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">状态：</span>
          <span class="value"><dict-tag :options="dict.type.device_status" :value="currentLog.status" size="mini"/></span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">锁状态：</span>
          <span class="value"><dict-tag :options="dict.type.device_lock_status" :value="currentLog.lockStatus" size="mini"/></span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">电门：</span>
          <span class="value"><dict-tag :options="dict.type.device_quality" :value="currentLog.quality" size="mini"/></span>
        </el-col>
      </el-row>

      <div class="playback-controls">
        <el-slider
          v-model="currentLogIndex"
          :max="locationLogList.length - 1"
          :show-tooltip="false"
          @input="handleSliderChange">
        </el-slider>
        
        <div class="control-buttons">
          <el-button-group>
            <el-button size="mini" :icon="isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'" @click="togglePlay">
              {{ isPlaying ? '暂停' : '播放' }}
            </el-button>
            <el-button 
              v-for="speed in [1, 2, 4, 8]" 
              :key="speed"
              size="mini"
              :type="playbackSpeed === speed ? 'primary' : ''"
              @click="setPlaybackSpeed(speed)">
              {{ speed }}x
            </el-button>
          </el-button-group>
        </div>
      </div>
    </el-card>

    <!-- 编辑工具栏 -->
    <div class="boundary-tools" v-if="isEditing">
      <el-alert type="info" :closable="false">
        <template slot="title">
          <div>{{ editSubArea != null ? '编辑' : '新增' }}提示：</div>
          <div>1. 左键点击添加边界点</div>
          <div>2. 点击顶点可删除该点</div>
          <div>3. 双击完成绘制</div>
        </template>
      </el-alert>
      <div class="tool-buttons">
        <el-button type="success" size="mini" @click="saveBoundary">保存</el-button>
        <el-button size="mini" @click="cancelEdit">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { AreaSubStatus } from "@/utils/enums";
import { debounce, isEmpty } from "@/utils/index";
import globalConfig from "@/utils/config/globalConfig";
import { AREA_STYLES, HIGHLIGHT_STYLES, MARKER_ICONS, LABEL_STYLES, DEVICE_STATUS_ICONS } from "@/views/bst/areaSub/components/AreaMap";

export default {
  name: 'AreaMap',
  dicts: ['device_status', 'device_lock_status', 'device_quality'],
  props: {
    // 运营区域信息
    area: {
      type: Object,
      default: () => {}
    },
    // 子区域列表
    areaSubList: {
      type: Array,
      default: () => []
    },
    // 定位日志列表
    locationLogList: {
      type: Array,
      default: () => []
    },
    // 开启编辑
    enableEdit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      map: null,
      AMap: null,
      mapStyle: 'normal',
      showLabels: true,
      isEditing: false,
      editingPolygon: null,
      editSubArea: null,
      isEditingArea: false,
      polygonEditor: null,
      overlays: {
        polygons: new Map(),
        markers: new Map(),
        labels: new Map()
      },
      currentInfoWindow: null,
      highlightedAreaId: null,  // 当前鼠标悬停的区域ID
      selectedAreaId: null,      // 当前选中的区域ID
      isPlaybackVisible: false,
      currentLogIndex: 0,
      currentSpeed: 0,
      isPlaying: false,
      playbackSpeed: 1,
      playbackTimer: null,
      currentPolyline: null,
      currentDeviceMarker: null,
      currentLog: null,
      sortedLocationLogs: [],
      progressPolyline: null,
    };
  },

  watch: {
    // 监听区域数据变化
    area: {
      handler: debounce(function() {
        this.renderAll();
      }, 300),
      deep: true
    },
    // 监听子区域列表变化
    areaSubList: {
      handler: debounce(function() {
        this.renderAll();
      }, 300),
      deep: true
    },
    // 监听高亮状态变化
    highlightedAreaId: {
      handler(newVal, oldVal) {
        if (oldVal) {
          this.updateAreaStyle(oldVal);
        }
        if (newVal) {
          this.updateAreaStyle(newVal);
        }
      }
    },
    
    // 监听选中状态变化
    selectedAreaId: {
      handler(newVal, oldVal) {
        if (oldVal) {
          this.updateAreaStyle(oldVal);
        }
        if (newVal) {
          this.updateAreaStyle(newVal);
        }
      }
    },
    // 监听播放状态
    isPlaying(newVal) {
      if (newVal) {
        this.startPlayback();
      } else {
        this.pausePlayback();
      }
    },
    
  },

  async mounted() {
    await this.initMap();
    this.renderAll();
  },

  beforeDestroy() {
    this.pausePlayback();
    if (this.currentPolyline) {
      this.map.remove(this.currentPolyline);
    }
    if (this.currentDeviceMarker) {
      if (this.currentDeviceMarker.snLabel) {
        this.map.remove(this.currentDeviceMarker.snLabel);
      }
      this.map.remove(this.currentDeviceMarker);
    }
    this.destroyMap();
  },

  methods: {
    // 初始化地图
    async initMap() {
      try {
        this.AMap = await AMapLoader.load({
          key: globalConfig.aMap.key,
          version: '2.0',
          plugins: ['AMap.PolygonEditor', 'AMap.InfoWindow']
        });

        // 使用 area 的经纬度作为中心点
        const center = [
          this.area?.longitude || 120.35218, // 如果没有经度，使用默认值
          this.area?.latitude || 26.944335   // 如果没有纬度，使用默认值
        ];
        
        this.map = new this.AMap.Map('container', {
          zoom: 13,
          center: center,
          touchZoom: false,
          dragEnable: true,
          contextMenu: true
        });

        // 添加地图点击事件，关闭信息窗体和清除选中状态
        this.map.on('click', () => {
          if (this.currentInfoWindow) {
            this.currentInfoWindow.close();
          }
          if (!this.isEditing) {
            this.selectedAreaId = null;
          }
        });

        // 初始化多边形编辑器
        this.polygonEditor = new this.AMap.PolygonEditor(this.map);
        
        // 绑定编辑器事件
        this.polygonEditor.on('add', this.handlePolygonAdd);
        this.polygonEditor.on('end', this.handlePolygonEnd);
      } catch (error) {
        console.error('地图初始化失败:', error);
        this.$message.error('地图加载失败');
      }
    },
    handlePolygonAdd({target}) {
      this.editingPolygon = target;
    },
    handlePolygonEnd({target}) {
      this.editingPolygon = target;
    },
    // 渲染所有内容
    renderAll() {
      this.clearEditor();
      this.clearHighlight();
      this.clearOverlays();
      this.renderAreaBoundary();
      this.renderSubAreas();
      this.initPlayback();
    },

    // 清除编辑器
    clearEditor() {
      // 关闭编辑器
      if (this.polygonEditor) {
        // 清除编辑器的目标对象
        this.polygonEditor.setTarget();
      }
      // 移除编辑中的多边形
      if (this.editingPolygon) {
        this.map.remove(this.editingPolygon);
        this.editingPolygon = null;
      }
    },
    // 渲染运营区边界
    renderAreaBoundary() {
      if (!this.map || !this.area.boundaryStr) {
        return;
      };
      
      try {
        const boundary = JSON.parse(this.area.boundaryStr);
        const polygon = new this.AMap.Polygon({
          path: boundary,
          strokeColor: '#2b8cbe',
          strokeWeight: 2,
          fillColor: '#ccebc5',
          fillOpacity: 0.3,
          strokeStyle: 'dashed',
          strokeDasharray: [5, 5]
        });
        
        this.map.add(polygon);
        this.overlays.polygons.set('area', polygon);
      } catch (error) {
        console.error('渲染运营区边界失败:', error);
      }
    },

    // 渲染子区域
    renderSubAreas() {
      if (!this.map || !this.areaSubList.length) {
        return;
      }
      this.areaSubList.forEach(subArea => {
        if (subArea.status === AreaSubStatus.DISABLED) {
          return;
        }

        try {
          // 渲染边界
          if (subArea.boundaryStr) {
            const boundary = JSON.parse(subArea.boundaryStr);
            const polygon = new this.AMap.Polygon({
              path: boundary,
              ...AREA_STYLES[subArea.type],
              extData: {
                id: subArea.id,
                type: subArea.type
              }
            });
            
            // 添加事件监听
            polygon.on('mouseover', () => {
              if (!this.isEditing) {
                this.highlightedAreaId = subArea.id;
              }
            });
            
            polygon.on('mouseout', () => {
              if (!this.isEditing) {
                this.highlightedAreaId = null;
              }
            });
            
            polygon.on('click', (e) => {
              if (!this.isEditing) {
                // 如果点击的是当前选中的区域，不做任何操作
                if (this.selectedAreaId !== subArea.id) {
                  this.selectedAreaId = subArea.id;
                  this.showInfoWindow(subArea);
                }
              }
            });
            
            this.map.add(polygon);
            this.overlays.polygons.set(subArea.id, polygon);
          }

          // 渲染标记点
          const marker = new this.AMap.Marker({
            position: [subArea.longitude, subArea.latitude],
            icon: new this.AMap.Icon({
              image: MARKER_ICONS[subArea.type],
              size: new this.AMap.Size(25, 36),
              imageSize: new this.AMap.Size(25, 36)
            }),
            offset: new this.AMap.Pixel(-12.5, -36)
          });

          marker.on('click', (e) => {
            if (!this.isEditing) {
              this.showInfoWindow(subArea);
            }
          });
          
          this.map.add(marker);
          this.overlays.markers.set(subArea.id, marker);

          // 渲染文字标签
          const label = new this.AMap.Text({
            text: subArea.name,
            position: [subArea.longitude, subArea.latitude],
            offset: new this.AMap.Pixel(0, -60),
            anchor: 'center',
            cursor: 'pointer',
            style: {
              ...LABEL_STYLES[subArea.type],
              border: 'none',
              fontSize: '12px',
              padding: '2px 8px',
              borderRadius: '4px',
              whiteSpace: 'nowrap',
              textAlign: 'center',
              position: 'absolute',
              transform: 'translateX(-50%)',
              minWidth: '50px',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center'
            }
          });

          label.on('click', (e) => {
            if (!this.isEditing) {
              this.showInfoWindow(subArea);
            }
          });

          this.map.add(label);
          this.overlays.labels.set(subArea.id, label);
          label.setMap(this.showLabels ? this.map : null);
        } catch (error) {
          console.error(`渲染子区域失败 [${subArea.id}]:`, error);
        }
      });
    },

    // 显示信息窗体
    showInfoWindow(subArea, focus = false) {
      if (!this.enableEdit) {
        return;
      }
      if (this.currentInfoWindow) {
        this.currentInfoWindow.close();
      }

      const position = this.getPosition(subArea);

      if (position == null) {
        return;
      }

      // 聚焦效果
      if (focus) {
        this.focusArea(subArea);
      } else {
        this.map.setCenter(position);
      }

      // 创建自定义内容，使用Vue的事件处理方式
      const content = document.createElement('div');
      content.className = 'map-info-window';
      content.innerHTML = `
        <h4>${subArea.name}</h4>
        <div class="info-actions">
          <a class="info-action" data-action="edit">编辑信息</a>
          <a class="info-action" data-action="boundary">修改边界</a>
          <a class="info-action" data-action="delete">删除</a>
        </div>
      `;

      // 直接绑定事件
      content.addEventListener('click', (e) => {
        const target = e.target;
        if (target.classList.contains('info-action')) {
          const action = target.getAttribute('data-action');
          this.handleInfoAction(action, subArea);
          if (this.currentInfoWindow) {
            this.currentInfoWindow.close();
          }
        }
      });

      this.currentInfoWindow = new this.AMap.InfoWindow({
        content: content,
        offset: new this.AMap.Pixel(0, -30),
        closeWhenClickMap: true
      });

      // 添加关闭事件监听
      this.currentInfoWindow.on('close', () => {
        if (!this.isEditing) {
          this.selectedAreaId = null;
        }
      });

      this.currentInfoWindow.open(this.map, position);
    },

    // 聚焦子区域
    focusArea(subArea) {
      if (subArea == null) {
        return;
      }
      let position = this.getPosition(subArea);
      if (position == null) {
        return;
      }
      const polygon = this.overlays.polygons.get(subArea.id); 
      if (polygon) {
        const bounds = polygon.getBounds();
        const padding = [150, 300, 150, 300];
        this.map.setBounds(bounds, false, padding);
      } else {
        this.map.setZoomAndCenter(15, position, false, 300);
      }
    },

    // 获取子区域中心点
    getPosition(subArea) {
      if (subArea == null) {
        return null;
      }
      if (subArea.longitude == null || subArea.latitude == null) {
        return null;
      }
      return [subArea.longitude, subArea.latitude];
    },

    // 处理信息窗体操作
    handleInfoAction(action, subArea) {
      console.log("action", action);
      switch (action) {
        case 'edit':
          this.$emit('edit', subArea);
          break;
        case 'boundary':
          this.startBoundaryEdit(subArea, true);
          break;
        case 'delete':
          this.$emit('delete', subArea);
          break;
      }
    },

    // 计算多边形中心点
    calculateCenter(path) {
      if (!path || path.length === 0) return null;
      
      let total = path.length;
      let X = 0, Y = 0, Z = 0;
      
      path.forEach(point => {
        let lng = (point[0] * Math.PI) / 180;
        let lat = (point[1] * Math.PI) / 180;
        
        let x = Math.cos(lat) * Math.cos(lng);
        let y = Math.cos(lat) * Math.sin(lng);
        let z = Math.sin(lat);
        
        X += x;
        Y += y;
        Z += z;
      });
      
      X = X / total;
      Y = Y / total;
      Z = Z / total;
      
      let Lng = Math.atan2(Y, X);
      let Hyp = Math.sqrt(X * X + Y * Y);
      let Lat = Math.atan2(Z, Hyp);
      
      return [
        (Lng * 180) / Math.PI,
        (Lat * 180) / Math.PI
      ];
    },

    // 开始边界编辑
    startBoundaryEdit(subArea, focus = false) {

      this.clearEditor();

      this.editSubArea = subArea;

      if (focus) {
        this.focusArea(subArea);
      }

      if (subArea && subArea.boundaryStr) {
        console.log("subArea", subArea);
        try {
          const boundary = JSON.parse(subArea.boundaryStr);
          this.editingPolygon = new this.AMap.Polygon({
            path: boundary,
            ...AREA_STYLES[subArea.type]
          });
          this.map.add(this.editingPolygon);
          this.polygonEditor.setTarget(this.editingPolygon);
        } catch (error) {
          console.error('加载边界数据失败:', error);
          this.$message.error('加载边界数据失败');
        }
      } 
      this.polygonEditor.open();

      this.startEditArea();
    },

    // 保存边界
    saveBoundary() {
      if (!this.editingPolygon) {
        this.$message.warning('请先绘制边界');
        return;
      }

      const path = this.editingPolygon.getPath();
      const boundary = path.map(point => [point.getLng(), point.getLat()]);
      const center = this.calculateCenter(boundary);
      
      if (!center) {
        this.$message.error('计算中心点失败');
        return;
      }

      if (this.isEditingArea) {
        // 更新运营区边界
        this.$emit('update-area-boundary', {
          area: this.area,
          boundary: JSON.stringify(boundary),
          longitude: center[0],
          latitude: center[1]
        });
      } else {
        if (this.editSubArea == null) {
          // 新增子区域
          this.$emit('add-boundary', {
            boundary: JSON.stringify(boundary),
            longitude: center[0],
            latitude: center[1]
          });
        } else {
          // 更新子区域边界
          this.$emit('update-boundary', {
            areaSub: this.editSubArea,
            boundary: JSON.stringify(boundary),
            longitude: center[0],
            latitude: center[1]
          });
        }
      }
      
    },

    // 取消编辑
    cancelEdit() {
      console.log("cancelEdit");

      // 重置编辑状态
      this.isEditing = false;
      this.isEditingArea = false;
      
      // 移除地图事件监听
      this.map.clearEvents('click');
      this.map.clearEvents('rightclick');

      // 重新渲染所有区域，确保显示正常
      this.renderAll();
    },

    // 工具方法
    setFitView() {
      this.map.setFitView();
    },

    // 切换地图样式
    toggleMapStyle() {
      if (this.mapStyle === 'normal') {
        // 切换到卫星图
        this.mapStyle = 'satellite';
        const satelliteLayer = new this.AMap.TileLayer.Satellite();
        const roadNetLayer = new this.AMap.TileLayer.RoadNet();
        this.map.setLayers([satelliteLayer, roadNetLayer]);
      } else {
        // 切换到普通地图
        this.mapStyle = 'normal';
        const normalLayer = new this.AMap.TileLayer();
        this.map.setLayers([normalLayer]);
      }
    },

    toggleLabels() {
      this.showLabels = !this.showLabels;
      this.overlays.labels.forEach(label => {
        label.setMap(this.showLabels ? this.map : null);
      });
    },

    // 清理方法优化
    clearOverlays() {
      Object.values(this.overlays).forEach(overlayMap => {
        overlayMap.forEach(overlay => {
          this.map.remove(overlay);
        });
        overlayMap.clear();
      });
    },

    // 更新区域样式
    updateAreaStyle(areaId) {
      const polygon = this.overlays.polygons.get(areaId);
      if (!polygon) return;

      const type = polygon.getExtData().type;
      let style = { ...AREA_STYLES[type] };

      // 根据状态叠加高亮样式
      if (areaId === this.selectedAreaId) {
        style = { ...style, ...HIGHLIGHT_STYLES.selected };
      } else if (areaId === this.highlightedAreaId) {
        style = { ...style, ...HIGHLIGHT_STYLES.hover };
      }

      polygon.setOptions(style);
    },

    // 清除所有高亮状态
    clearHighlight() {
      this.highlightedAreaId = null;
      this.selectedAreaId = null;
    },

    destroyMap() {
      if (this.map) {
        this.clearHighlight();
        this.clearOverlays();
        this.map.destroy();
        this.map = null;
      }
    },

    // 开始编辑运营区边界
    startAreaBoundaryEdit() {

      this.clearEditor();

      this.setFitView();

      if (this.area.boundaryStr) {
        try {
          const boundary = JSON.parse(this.area.boundaryStr);
          this.editingPolygon = new this.AMap.Polygon({
            path: boundary,
            strokeColor: '#2b8cbe',
            strokeWeight: 2,
            fillColor: '#ccebc5',
            fillOpacity: 0.3,
            strokeStyle: 'dashed',
            strokeDasharray: [5, 5]
          });
          this.map.add(this.editingPolygon);
          this.polygonEditor.setTarget(this.editingPolygon);
        } catch (error) {
          console.error('加载运营区边界数据失败:', error);
          this.$message.error('加载运营区边界数据失败');
        }
      } 

      this.polygonEditor.open();
      this.isEditingArea = true;
      this.startEditArea();
    },
    // 开始绘制（不管是那种边界）
    startEditArea() {
      this.isEditing = true;
      
      // 关闭当前信息窗口
      if (this.currentInfoWindow) {
        this.currentInfoWindow.close();
      }

    },
    // 设置为新建模式
    setAddMode() {
      // 添加地图点击事件监听，用于绘制多边形
      const clickHandler = (e) => {
        const path = this.editingPolygon.getPath();
        path.push([e.lnglat.getLng(), e.lnglat.getLat()]);
        this.editingPolygon.setPath(path);
      };
      
      // 添加右键点击事件监听，用于完成绘制
      const rightClickHandler = () => {
        this.map.off('click', clickHandler);
        this.map.off('rightclick', rightClickHandler);
        
        if (this.editingPolygon.getPath().length < 3) {
          this.$message.warning('请至少绘制3个点形成多边形');
          return;
        }
        
        this.polygonEditor.setTarget(this.editingPolygon);
        this.polygonEditor.open();
      };
      
      this.map.on('click', clickHandler);
      this.map.on('rightclick', rightClickHandler);
    },
    togglePlaybackPanel() {
      this.isPlaybackVisible = !this.isPlaybackVisible;
    },
    handleSliderChange(index) {
      this.currentLogIndex = index;
      this.updateCurrentLog();
    },
    togglePlay() {
      this.isPlaying = !this.isPlaying;
    },
    setPlaybackSpeed(speed) {
      this.playbackSpeed = speed;
      // 如果正在播放，立即应用新的速度
      if (this.isPlaying) {
        this.pausePlayback();
        this.startPlayback();
      }
    },
    updateCurrentLog() {
      if (this.sortedLocationLogs.length === 0) return;
      
      this.currentLog = this.sortedLocationLogs[this.currentLogIndex];
      this.currentSpeed = this.currentLog.speed;
      
      this.updateDeviceMarker();
    },
    calculateDistance(lat1, lon1, lat2, lon2) {
      if (this.AMap) {
        const start = new this.AMap.LngLat(lon1, lat1);
        const end = new this.AMap.LngLat(lon2, lat2);
        return start.distance(end);
      }
      return 0;
    },
    updateDeviceMarker() {
      if (!this.currentLog) return;
      
      const position = [this.currentLog.longitude, this.currentLog.latitude];
      
      if (this.currentDeviceMarker) {
        this.currentDeviceMarker.setPosition(position);
      } else {
        // 创建设备标记
        this.currentDeviceMarker = new this.AMap.Marker({
          position: position,
          offset: new this.AMap.Pixel(-16, -36),
          icon: new this.AMap.Icon({
            image: DEVICE_STATUS_ICONS[this.currentLog.status],
            size: new this.AMap.Size(32, 36),
            imageSize: new this.AMap.Size(32, 36),
            anchor: 'bottom-center'
          })
        });
        
        // 创建SN标签
        const snLabel = new this.AMap.Text({
          text: `${this.currentLog.sn}`,
          position: position,
          offset: new this.AMap.Pixel(0, -50), // 调整位置到marker上方
          anchor: 'center',
          style: {
            background: '#fff',
            border: '1px solid #409EFF',
            borderRadius: '4px',
            padding: '2px 8px',
            color: '#409EFF',
            fontSize: '12px',
            whiteSpace: 'nowrap',
            textAlign: 'center',
            boxShadow: '0 2px 6px rgba(0,0,0,0.1)'
          }
        });

        this.map.add([this.currentDeviceMarker, snLabel]);
        // 保存snLabel引用以便后续更新
        this.currentDeviceMarker.snLabel = snLabel;
      }
      
      // 更新图标
      this.currentDeviceMarker.setIcon(new this.AMap.Icon({
        image: DEVICE_STATUS_ICONS[this.currentLog.status],
        size: new this.AMap.Size(32, 36),
        imageSize: new this.AMap.Size(32, 36),
        anchor: 'bottom-center'
      }));

      // 更新SN标签位置
      if (this.currentDeviceMarker.snLabel) {
        this.currentDeviceMarker.snLabel.setPosition(position);
      }

      // 更新进度轨迹
      this.updateProgressTrajectory();
    },
    drawTrajectory() {
      if (this.currentPolyline) {
        this.map.remove(this.currentPolyline);
      }
      if (this.progressPolyline) {
        this.map.remove(this.progressPolyline);
      }
      
      const path = this.sortedLocationLogs.map(log => [log.longitude, log.latitude]);
      
      // 绘制完整轨迹
      this.currentPolyline = new this.AMap.Polyline({
        path: path,
        strokeColor: '#409EFF',
        strokeWeight: 6,
        strokeOpacity: 0.4,
        showDir: true
      });
      
      // 绘制进度轨迹
      this.progressPolyline = new this.AMap.Polyline({
        path: [],
        strokeColor: '#67C23A',
        strokeWeight: 6,
        strokeOpacity: 0.8,
        showDir: true
      });
      
      this.map.add([this.currentPolyline, this.progressPolyline]);
      this.map.setFitView([this.currentPolyline]);
    },
    updateProgressTrajectory() {
      if (!this.progressPolyline || this.currentLogIndex < 0) return;
      
      const progressPath = this.sortedLocationLogs
        .slice(0, this.currentLogIndex + 1)
        .map(log => [log.longitude, log.latitude]);
      
      this.progressPolyline.setPath(progressPath);
    },
    // 初始化轨迹播放
    initPlayback() {
      // 清除现有轨迹和设备标记
      if (this.currentPolyline) {
        this.map.remove(this.currentPolyline);
        this.currentPolyline = null;
      }
      if (this.progressPolyline) {
        this.map.remove(this.progressPolyline);
        this.progressPolyline = null;
      }
      if (this.currentDeviceMarker) {
        if (this.currentDeviceMarker.snLabel) {
          this.map.remove(this.currentDeviceMarker.snLabel);
        }
        this.map.remove(this.currentDeviceMarker);
        this.currentDeviceMarker = null;
      }

      if (isEmpty(this.locationLogList)) {
        this.sortedLocationLogs = [];
        this.currentLogIndex = 0;
        this.currentLog = null;
        return;
      }

      // 按时间排序日志并预计算速度
      this.sortedLocationLogs = [...this.locationLogList]
        .sort((a, b) => new Date(a.at).getTime() - new Date(b.at).getTime())
        .map((log, index, array) => {
          if (index === 0) {
            log.speed = 0;
          } else {
            const prevLog = array[index - 1];
            const prevTime = new Date(prevLog.at).getTime();
            const currentTime = new Date(log.at).getTime();
            const timeDiff = (currentTime - prevTime) / 1000; // 转换为秒
            
            if (timeDiff === 0) {
              log.speed = 0;
            } else {
              const distance = this.calculateDistance(
                prevLog.latitude, prevLog.longitude,
                log.latitude, log.longitude
              );
              log.speed = Number(((distance / timeDiff) * 3.6).toFixed(1)); // 转换为km/h并保留一位小数
            }
          }
          return log;
        });
      
      this.currentLogIndex = 0;
      this.updateCurrentLog();
      this.drawTrajectory();
    },
    startPlayback() {
      if (this.playbackTimer) {
        clearInterval(this.playbackTimer);
      }

      this.playbackTimer = setInterval(() => {
        if (this.currentLogIndex >= this.sortedLocationLogs.length - 1) {
          this.currentLogIndex = 0;
        } else {
          this.currentLogIndex++;
        }
        this.updateCurrentLog();
      }, 1000 / this.playbackSpeed);
    },
    pausePlayback() {
      if (this.playbackTimer) {
        clearInterval(this.playbackTimer);
        this.playbackTimer = null;
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100%;

  #container {
    width: 100%;
    height: 100%;
  }

  .map-tools {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100;
  }

  .boundary-tools {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 100;
    width: 200px;

    .tool-buttons {
      margin-top: 10px;
      text-align: left;
    }
  }

  .playback-panel {
    position: absolute;
    top: 60px;
    right: 15px;
    transform: none;
    z-index: 100;
    width: 400px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .device-info {
      padding: 8px;
      margin-bottom: 15px;
      background-color: #f5f7fa;
      border-radius: 4px;

      .info-item {
        font-size: 12px;
        line-height: 1.4;

        .label {
          color: #606266;
        }

        .value {
          color: #303133;
          font-weight: 500;
        }
      }
    }

    .playback-controls {
      .el-slider {
        margin-bottom: 15px;
      }

      .control-buttons {
        display: flex;
        justify-content: center;
        gap: 10px;

        .el-button {
          padding: 7px 12px;
        }
      }
    }
  }
}

</style>

<style lang="scss">
@import "@/views/bst/areaSub/components/AreaMap.scss";
</style>
