<template>
  <!-- 气象监测站弹窗 -->
  <WeatherStationPopup 
    :visible="weatherStationVisible" 
    @close="weatherStationVisible = false" 
  />
  
  <!-- 车辆详情弹窗 -->
  <VehicleDetailPopup 
    :visible="vehicleDetailVisible" 
    :detail="vehicleDetail"
    :popup-style="detailPopupStyle"
    @close="vehicleDetailVisible = false" 
  />

  <!-- 告警/预警提示框 -->
  <!-- <AlertNotificationSystem 
    :alert-message="alertMessage"
    :alert-type="alertType"
    @show="handleAlertShow"
  />
   -->
  <!-- 车辆动画系统 -->
  <VehicleAnimationSystem 
    ref="animationSystem"
    :map="map"
    :vehicle-source="vehicleSource"
    :vehicles="vehicles"
    :get-vehicle-style="styleManager?.value?.getVehicleStyle || defaultGetVehicleStyle"
  />
  
  <!-- 车辆标签系统 -->
  <VehicleLabelSystem 
    ref="labelSystem"
    :map="map"
    :vehicles="vehicles"
  />
  
  <!-- 车辆样式管理器 -->
  <VehicleStyleManager 
    ref="styleManager"
    :vehicles="vehicles"
  />
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, onActivated, onDeactivated } from 'vue';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import { Style, Icon, Stroke, Fill, Circle, Text } from 'ol/style';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { LineString } from 'ol/geom';
import { transform } from 'ol/proj';
import WebSocketService, { createWebSocket, resetWebSocketInstance } from '../../../utils/websocket.js';

// 导入子组件
import VehicleAnimationSystem from './VehicleAnimationSystem.vue';
import VehicleLabelSystem from './VehicleLabelSystem.vue';
import VehicleDetailPopup from './VehicleDetailPopup.vue';
import WeatherStationPopup from './WeatherStationPopup.vue';
// import AlertNotificationSystem from './AlertNotificationSystem.vue';
import VehicleStyleManager from './VehicleStyleManager.vue';

// 导入默认图标
import carIcon from '../../../assets/images/noPeopleCar.png';
import aircraftIcon from '../../../assets/images/Aircraft.png'; // 航空器使用Aircraft.png图标
// 不再使用不同状态的航空器图标
// import aircraftInIcon from '../../../assets/images/Aircraft1.png'; // 滑入航空器使用黄色图标
// import aircraftOutIcon from '../../../assets/images/Aircraft.png'; // 滑出航空器使用蓝色图标

// 预加载图标资源，确保图标立即可用
const carIconImg = new Image();
carIconImg.src = carIcon;
const aircraftIconImg = new Image();
aircraftIconImg.src = aircraftIcon;
// 不再预加载不同状态的航空器图标
// const aircraftInIconImg = new Image();
// aircraftInIconImg.src = aircraftInIcon;
// const aircraftOutIconImg = new Image();
// aircraftOutIconImg.src = aircraftOutIcon;

// 为SockJS提供polyfill
if (typeof window !== 'undefined' && !window.global) {
  window.global = window;
}

// 定义props接收地图实例
const props = defineProps({
  map: Object
});

// 子组件引用
const animationSystem = ref(null);
const labelSystem = ref(null);
const styleManager = ref(null);

// 气象监测站数据
const weatherStationVisible = ref(true);

// 车辆详情数据
const vehicleDetailVisible = ref(false);
const vehicleDetail = ref({
  id: 'QN001',
  type: '驱鸟车',
  status: '任务中',
  startTime: '11-19 11:30',
  currentLocation: 'A区T3点',
  startLocation: 'T1航站楼',
  endLocation: 'T3航站楼',
  totalDistance: '1.3km',
  battery: '60%',
  manager: '张三',
  phone: '18661910988'
});

// 弹窗位置样式
const detailPopupStyle = ref({
  left: '0px',
  top: '0px'
});

// WebSocket连接状态
const wsConnected = ref(false);
let wsService = null;
let reconnectTimer = null;

// 车辆数据存储
const vehicles = ref({});
let vehicleLayer = null;
let vehicleSource = null;

// 车辆超速状态超时计时器存储
const speedViolationTimers = {};

// 飞机路线数据存储
const aircraftRoutes = ref({});  // 存储飞机路线数据，键为flightNo
let aircraftRouteLayer = null;   // 飞机路线图层
let aircraftRouteSource = null;  // 飞机路线数据源

// 动态收集所有车辆/航空器类别
const vehicleCategories = ref({
  'AIRCRAFT_IN': { visible: true, showLabel: true, name: '滑入航空器' },
  'AIRCRAFT_OUT': { visible: true, showLabel: true, name: '滑出航空器' },
  'AIRCRAFT': { visible: true, showLabel: true, name: '其他航空器' },
  'UNMANNED_VEHICLE': { visible: true, showLabel: true, name: '无人车' },
  'AIRPORT_VEHICLE': { visible: true, showLabel: true, name: '特勤车' },
  'SHUTTLE_VEHICLE': { visible: true, showLabel: true, name: '摆渡车' }
});

// 告警/预警状态
const alertMessage = ref('');
const alertType = ref('');
let alertTimer = null;

// 违规状态计时器
const violationStatusTimers = ref({});

// 处理告警显示
function handleAlertShow({ message, type, duration = 5000 }) {
  if (alertTimer) {
    clearTimeout(alertTimer);
  }
  
  alertMessage.value = message;
  alertType.value = type;
  
  alertTimer = setTimeout(() => {
    alertMessage.value = '';
    alertType.value = '';
  }, duration);
}

// 显示告警/预警消息
function showAlert(message, type, duration = 5000) {
  handleAlertShow({ message, type, duration });
}

// 创建车辆图层
function createVehicleLayer() {
  if (!props.map) return;
  
  vehicleSource = new VectorSource();
  
  vehicleLayer = new VectorLayer({
    source: vehicleSource,
    zIndex: 20,
  });
  
  props.map.addLayer(vehicleLayer);
  
  setupMapListeners();
  
  props.map.on('click', handleMapClick);
}

// 创建飞机路线图层
function createAircraftRouteLayer() {
  if (!props.map) return;
  
  aircraftRouteSource = new VectorSource();
  
  aircraftRouteLayer = new VectorLayer({
    source: aircraftRouteSource,
    zIndex: 15,  // 确保在车辆图层下方
    style: new Style({
      stroke: new Stroke({
        color: '#3388ff',
        width: 3
      })
    })
  });
  
  props.map.addLayer(aircraftRouteLayer);
}

// 处理地图点击事件
function handleMapClick(event) {
  const feature = props.map.forEachFeatureAtPixel(event.pixel, function(feature) {
    return feature;
  });
  
  if (feature) {
    const objectId = feature.getId();
    if (objectId && vehicles.value[objectId]) {
      const vehicle = vehicles.value[objectId];
      
      vehicleDetail.value = {
        id: objectId,
        type: vehicle.type,
        status: '任务中',
        startTime: '11-19 11:30',
        currentLocation: '当前位置',
        startLocation: 'T1航站楼',
        endLocation: 'T3航站楼',
        totalDistance: '1.3km',
        battery: '60%',
        manager: '张三',
        phone: '18661910988'
      };
      
      const pixel = event.pixel;
      const viewportPosition = props.map.getViewport().getBoundingClientRect();
      
      detailPopupStyle.value = {
        left: (viewportPosition.left + pixel[0] + 10) + 'px',
        top: (viewportPosition.top + pixel[1] + 10) + 'px'
      };
      
      vehicleDetailVisible.value = true;
    } else {
      vehicleDetailVisible.value = false;
    }
  } else {
    vehicleDetailVisible.value = false;
  }
}

// 监听地图变化，确保标签位置正确更新
function setupMapListeners() {
  if (!props.map) return;
  
  // 监听地图移动结束事件
  props.map.on('moveend', () => {
    if (labelSystem.value) {
      labelSystem.value.updateAllLabels();
    }
  });
}

// 更新车辆位置
function updateVehiclePosition(vehicleData) {
  if (!vehicleSource || !props.map) return;
  
  const { object_id, object_type, position, heading, speed } = vehicleData;
  
  // 计算正确的旋转角度
  // 在OpenLayers中，0度是向上，顺时针增加
  // 而heading是0度为北，顺时针增加
  // 由于地图旋转了72度，heading=72对应地图上方
  const rotationRad = ((heading - 72) * Math.PI) / 180;
  console.log(`车辆${object_id}的heading值: ${heading}, 旋转角度计算: (${heading} - 72) * π/180 = ${rotationRad} 弧度, ${(heading - 72)}度, 车辆类型: ${object_type}`);
  
  let coordinates;

  coordinates = transform(
    [position.longitude, position.latitude], 
    'EPSG:4326', 
    props.map.getView().getProjection()
  );
 
  let feature = vehicleSource.getFeatureById(object_id);
  
  // 根据object_type正确分类车辆
  let vehicleType = object_type.toUpperCase();
  
  // 判断车辆类型
  const isAircraft = vehicleType === 'AIRCRAFT'; // 航空器使用aircraft.png
  const isUnmannedVehicle = vehicleType === 'UNMANNED_VEHICLE'; // 无人车
  const isSpecialVehicle = vehicleType === 'SPECIAL_VEHICLE'; // 特种车辆
  
  // 确保heading是有效的数值
  const validHeading = heading !== undefined ? Number(heading) : 0;
  
  if (!feature) {
    // 先创建车辆数据对象，确保在创建feature前就有类型信息
    vehicles.value[object_id] = {
      id: object_id,
      type: object_type,
      position: coordinates,
      heading: validHeading,
      speed: speed,
      isAircraft: isAircraft,
      isUnmannedVehicle: isUnmannedVehicle,
      isSpecialVehicle: isSpecialVehicle,
      lastHeading: validHeading // 初始化lastHeading
    };

    feature = new Feature({
      geometry: new Point(coordinates),
      name: `${object_type} ${object_id}`,
      type: object_type,
      speed: speed,
      isAircraft: isAircraft,
      isUnmannedVehicle: isUnmannedVehicle,
      isSpecialVehicle: isSpecialVehicle
    });
    
    feature.setId(object_id);
    
    // 直接根据车辆类型选择正确的图标，不使用默认图标
    let iconStyle;
    if (isAircraft) {
      iconStyle = new Style({
        image: new Icon({
          src: aircraftIcon,
          scale: 1.5,
          anchor: [0.5, 0.5],
          rotation: rotationRad, // 使用计算好的旋转角度
        })
      });
    } else {
      iconStyle = new Style({
        image: new Icon({
          src: carIcon,
          scale: 1.5,
          anchor: [0.5, 0.5],
          rotation: rotationRad, // 使用计算好的旋转角度
        })
      });
    }
    
    feature.setStyle(iconStyle);
    vehicleSource.addFeature(feature);
    
    // 保存feature引用到车辆数据对象
    vehicles.value[object_id].feature = feature;
    
    // 初始化动画数据
    if (animationSystem.value) {
      animationSystem.value.initVehicleAnimation(object_id, coordinates, heading, speed);
    }
    
    // 创建标签
    if (labelSystem.value) {
      labelSystem.value.updateVehicleLabel(object_id, coordinates, speed);
    }
  } else {
    // 更新动画目标
    if (animationSystem.value) {
      animationSystem.value.updateVehicleAnimationTarget(object_id, coordinates, heading, speed);
    }
    
    vehicles.value[object_id] = {
      ...vehicles.value[object_id],
      position: coordinates,
      heading: validHeading,
      speed: speed
    };
    
    // 更新标签位置，确保标签始终跟随图标
    // 但是如果车辆处于超速状态，不在这里更新标签，避免与超速状态标签冲突
    if (labelSystem.value && !vehicles.value[object_id].speedViolation) {
      labelSystem.value.updateVehicleLabel(object_id, coordinates, speed);
    }
    
    // 更新车辆图标样式，确保旋转角度正确应用
    if (feature) {
      let iconSrc = isAircraft ? aircraftIcon : carIcon;
      
      // 移除角度变化阈值，确保每次角度变化都更新图标旋转
      feature.setStyle(new Style({
        image: new Icon({
          src: iconSrc,
          scale: 1.5,
          anchor: [0.5, 0.5],
          rotation: rotationRad, // 使用计算好的旋转角度
        })
      }));
      
      // 更新lastHeading
      vehicles.value[object_id].lastHeading = validHeading;
    }
  }
}

// 连接WebSocket
function connectWebSocket() {
  // 重置WebSocket实例以强制创建新实例
  resetWebSocketInstance();
  
  try {
    // 使用WebSocketService创建连接
    const wsUrl = import.meta.env.VITE_APP_WEBSOCKET_URL;
    console.log(`正在连接WebSocket: ${wsUrl}`);
    
    wsService = createWebSocket(wsUrl, {
      reconnectInterval: 3000,
      maxReconnectAttempts: 5
    });
    
    // 注册事件监听
    wsService.on('open', (event) => {
      console.log('WebSocket连接成功!');
      wsConnected.value = true;
      
      // 连接成功后自动订阅消息
      setTimeout(() => {
        sendSubscribe();
      }, 1000); // 延迟1秒发送订阅，确保连接稳定
    });
    
    wsService.on('message', (data) => {
      handleWsMessage(data);
    });
    
    wsService.on('error', (event) => {
      console.error('WebSocket错误:', event);
      wsConnected.value = false;
    });
    
    wsService.on('close', (event) => {
      console.log(`WebSocket连接关闭: ${event.code} - ${event.reason}`);
      wsConnected.value = false;
    });
    
    wsService.on('reconnect_failed', () => {
      console.error('WebSocket重连失败，已达到最大重试次数');
      wsConnected.value = false;
    });
    
  } catch (error) {
    console.error('创建WebSocket连接失败:', error);
  }
}

// 处理WebSocket消息
function handleWsMessage(message) {
  try {
    const data = JSON.parse(message);
    console.log('收到消息:', data);
    
    // 根据消息类型处理
    switch (data.type) {
      case 'connection':
        console.log(`连接确认: ${data.message}`);
        break;
      
      case 'position_update':
        // 处理车辆位置更新
        console.log(`位置更新: ${data.payload?.object_id} (${data.payload?.object_type})`);
        handlePositionUpdate(data.payload);
        break;
      
      case 'path_conflict_alert':
        // 处理冲突告警和预警
        console.log(`冲突告警/预警: ${data.payload?.object1?.objectName || data.payload?.messageType}`);
        handlePathConflictAlert(data.payload);
        break;
      
      case 'rule_violation':
        // 处理规则违规（超速和越界）
        console.log(`规则违规: ${data.payload?.ruleName || data.payload?.violationType}`);
        handleRuleViolation(data.payload);
        break;
      
      case 'pong':
        console.log('收到心跳响应');
        break;
      
      case 'vehicle_command':
        console.log('收到车辆控制指令:', data.payload);
        break;
      
      case 'aircraftRouteUpdate':
        console.log('收到飞机路由更新:', data.data);
        handleAircraftRouteUpdate(data.data);
        break;
        
      default:
        // 其他类型的消息可以根据需要处理
        console.log(`未知消息类型: ${data.type}`, data);
        break;
    }
  } catch (e) {
    console.error('处理WebSocket消息出错:', e, message);
  }
}

// 处理位置更新消息
function handlePositionUpdate(payload) {
  if (!payload || !payload.object_id) {
    console.error('位置更新消息格式错误:', payload);
    return;
  }
  
  // 清除车辆的告警状态（如果需要）
  clearVehicleAlertStatus(payload);
  
  // 更新车辆位置
  updateVehiclePosition(payload);
}

// 处理飞机路由更新消息
function handleAircraftRouteUpdate(payload) {
  if (!payload || !payload.flightNo || !payload.routeGeometry) {
    console.error('飞机路由更新消息格式错误:', payload);
    return;
  }
  
  const { flightNo, routeType, routeStatus, routeGeometry } = payload;
  
  // 解析LINESTRING格式的routeGeometry
  const coordinates = parseLineStringGeometry(routeGeometry);
  if (!coordinates || coordinates.length === 0) {
    console.error('解析routeGeometry失败:', routeGeometry);
    return;
  }
  
  // 更新或创建路线
  updateAircraftRoute(flightNo, coordinates, routeType, routeStatus);
}

// 解析LINESTRING格式的字符串，提取坐标点
function parseLineStringGeometry(lineString) {
  // 移除LINESTRING前缀和括号
  const coordsString = lineString.replace(/LINESTRING\s*\(|\)/gi, '');
  
  // 分割坐标点
  const coordPairs = coordsString.split(',').map(pair => pair.trim());
  
  // 解析每个坐标点
  return coordPairs.map(pair => {
    const [lon, lat] = pair.split(' ').map(Number);
    return [lon, lat];
  });
}

// 更新或创建飞机路线
function updateAircraftRoute(flightNo, coordinates, routeType, routeStatus) {
  if (!aircraftRouteSource || !props.map) return;
  
  // 转换坐标系
  const projectedCoords = coordinates.map(coord => 
    transform(coord, 'EPSG:4326', props.map.getView().getProjection())
  );
  
  // 获取起点和终点坐标
  const startPoint = projectedCoords[0];
  const endPoint = projectedCoords[projectedCoords.length - 1];
  
  // 检查是否已存在该航班的路线
  let feature = aircraftRouteSource.getFeatureById(flightNo);
  let startFeature = aircraftRouteSource.getFeatureById(`${flightNo}-start`);
  let endFeature = aircraftRouteSource.getFeatureById(`${flightNo}-end`);
  
  if (!feature) {
    // 创建新的LineString几何体
    const lineGeometry = new LineString(projectedCoords);
    
    // 创建新的Feature
    feature = new Feature({
      geometry: lineGeometry,
      name: `Flight ${flightNo} Route`,
      flightNo: flightNo,
      routeType: routeType,
      routeStatus: routeStatus
    });
    
    // 设置ID和样式
    feature.setId(flightNo);
    feature.setStyle(getRouteStyle(routeType, routeStatus));
    
    // 添加到数据源
    aircraftRouteSource.addFeature(feature);
    
    // 创建起点标记
    createRoutePointMarker(flightNo, 'start', startPoint, routeType);
    
    // 创建终点标记
    createRoutePointMarker(flightNo, 'end', endPoint, routeType);
    
    // 存储路线信息
    aircraftRoutes.value[flightNo] = {
      flightNo: flightNo,
      routeType: routeType,
      routeStatus: routeStatus,
      coordinates: projectedCoords,
      feature: feature
    };
  } else {
    // 更新现有Feature的几何体和属性
    feature.getGeometry().setCoordinates(projectedCoords);
    feature.set('routeType', routeType);
    feature.set('routeStatus', routeStatus);
    
    // 更新样式
    feature.setStyle(getRouteStyle(routeType, routeStatus));
    
    // 更新起点标记位置
    updateRoutePointMarker(flightNo, 'start', startPoint);
    
    // 更新终点标记位置
    updateRoutePointMarker(flightNo, 'end', endPoint);
    
    // 更新存储的路线信息
    aircraftRoutes.value[flightNo] = {
      ...aircraftRoutes.value[flightNo],
      routeType: routeType,
      routeStatus: routeStatus,
      coordinates: projectedCoords
    };
  }
  
  // 如果路线状态为完成，可以考虑在一段时间后移除路线
  if (routeStatus === 'COMPLETE') {
    setTimeout(() => {
      removeAircraftRoute(flightNo);
    }, 60000); // 1分钟后移除
  }
}

// 根据路线类型和状态获取样式
function getRouteStyle(routeType, routeStatus) {
  let color = '#3388ff'; // 默认蓝色
  let width = 3;
  let lineDash = undefined;
  
  // 根据路线类型设置颜色
  if (routeType === 'IN') {
    color = '#292C38'; // 深蓝色表示滑入
  } else if (routeType === 'OUT') {
    color = '#27AE60'; // 蓝色表示滑出
  }
  
  // // 根据路线状态设置线型
  // if (routeStatus === 'PLANNED') {
  //   lineDash = [4, 8]; // 计划中的路线使用虚线
  //   width = 2;
  // } else if (routeStatus === 'ACTIVE') {
  //   width = 4; // 活动中的路线使用粗线
  // } else if (routeStatus === 'COMPLETE') {
  //   width = 2; // 完成的路线使用细线
  //   color = color + '80'; // 添加透明度
  // }
  
  return new Style({
    stroke: new Stroke({
      color: color,
      width: width,
      lineDash: lineDash
    })
  });
}

// 获取点样式（起点或终点）
function getPointStyle(pointType, routeType, flightNo) {
  // 根据路线类型选择颜色
  let color = '#3388ff'; // 默认蓝色
  if (routeType === 'IN') {
    color = '#292C38'; // 深蓝色表示滑入
  } else if (routeType === 'OUT') {
    color = '#27AE60'; // 绿色表示滑出
  }
  
  // 创建圆点样式
  const circleStyle = new Style({
    image: new Circle({
      radius: 6,
      fill: new Fill({
        color: color
      }),
      stroke: new Stroke({
        color: '#ffffff',
        width: 2
      })
    }),
    // 添加文本标签
    text: new Text({
      text: pointType === 'start' ? '起点' : '终点',
      font: 'bold 12px Arial',
      fill: new Fill({
        color: '#ffffff'
      }),
      stroke: new Stroke({
        color: '#000000',
        width: 3
      }),
      offsetX: 0,
      offsetY: pointType === 'start' ? -15 : -15, // 文字位置偏移
      textAlign: 'center',
      textBaseline: 'bottom'
    }),
    zIndex: 10 // 确保点标记显示在线的上方
  });
  
  return circleStyle;
}

// 创建路线点标记（起点或终点）
function createRoutePointMarker(flightNo, pointType, coordinates, routeType) {
  // 创建点几何体
  const pointGeometry = new Point(coordinates);
  
  // 创建Feature
  const pointFeature = new Feature({
    geometry: pointGeometry,
    name: `${flightNo} ${pointType === 'start' ? '起点' : '终点'}`,
    flightNo: flightNo,
    pointType: pointType
  });
  
  // 设置ID
  pointFeature.setId(`${flightNo}-${pointType}`);
  
  // 设置样式
  pointFeature.setStyle(getPointStyle(pointType, routeType, flightNo));
  
  // 添加到数据源
  aircraftRouteSource.addFeature(pointFeature);
  
  return pointFeature;
}

// 更新路线点标记位置
function updateRoutePointMarker(flightNo, pointType, coordinates) {
  const pointFeature = aircraftRouteSource.getFeatureById(`${flightNo}-${pointType}`);
  
  if (pointFeature) {
    // 更新几何体
    pointFeature.getGeometry().setCoordinates(coordinates);
  } else {
    // 如果不存在，创建新的点标记
    const routeType = aircraftRoutes.value[flightNo]?.routeType || 'UNKNOWN';
    createRoutePointMarker(flightNo, pointType, coordinates, routeType);
  }
}

// 移除飞机路线
function removeAircraftRoute(flightNo) {
  if (!aircraftRouteSource) return;
  
  // 移除路线Feature
  const feature = aircraftRouteSource.getFeatureById(flightNo);
  if (feature) {
    aircraftRouteSource.removeFeature(feature);
  }
  
  // 移除起点Feature
  const startFeature = aircraftRouteSource.getFeatureById(`${flightNo}-start`);
  if (startFeature) {
    aircraftRouteSource.removeFeature(startFeature);
  }
  
  // 移除终点Feature
  const endFeature = aircraftRouteSource.getFeatureById(`${flightNo}-end`);
  if (endFeature) {
    aircraftRouteSource.removeFeature(endFeature);
  }
  
  // 从存储中移除
  if (aircraftRoutes.value[flightNo]) {
    delete aircraftRoutes.value[flightNo];
  }
}

// 处理冲突告警和预警
function handlePathConflictAlert(payload) {
  if (!payload) {
    console.error('冲突告警消息格式错误:', payload);
    return;
  }
  
  console.log('收到冲突告警/预警:', payload);
  
  const object1 = payload.object1 || {};
  const object2 = payload.object2 || {};
  const vehicleId = object1.objectName || '未知车辆';
  const otherVehicleId = object2.objectName || '未知车辆';
  const distance = payload.object2Distance || 0;
  const message = payload.message || `与${otherVehicleId}可能发生冲突`;
  
  // 根据messageType区分冲突告警和冲突预警
  if (payload.messageType === 'PATH_CONFLICT_ALERT' || payload.alertType === 'CONFLICT_WARNING') {
    console.log('处理冲突预警:', vehicleId, otherVehicleId);
    const warningMessage = `预警：${message}`;
    showAlert(warningMessage, 'warning', 8000);
    
    // 在地图上标记该车辆的预警状态
    if (vehicles.value[vehicleId]) {
      vehicles.value[vehicleId].warning = true;
      vehicles.value[vehicleId].alarm = false;
      vehicles.value[vehicleId].critical = false;
      vehicles.value[vehicleId].info = false;
      
      // 如果车辆已有位置信息，更新标签显示
      if (vehicles.value[vehicleId].position) {
        labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
          description: message,
          isWarning: true
        });
      }
    }
  } else if (payload.alertType === 'CONFLICT_ALERT') {
    console.log('处理冲突告警:', vehicleId, otherVehicleId);
    const alertMessage = `⚠️ 告警：${message}`;
    showAlert(alertMessage, 'alarm', 10000);
    
    // 在地图上标记该车辆的告警状态
    if (vehicles.value[vehicleId]) {
      vehicles.value[vehicleId].alarm = true;
      vehicles.value[vehicleId].warning = false;
      vehicles.value[vehicleId].critical = false;
      vehicles.value[vehicleId].info = false;
      
      // 更新车辆图标为告警图标
      if (vehicles.value[vehicleId].feature && styleManager.value) {
        vehicles.value[vehicleId].feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicles.value[vehicleId].speed, vehicles.value[vehicleId].heading));
      }
      
      // 更新标签显示
      if (vehicles.value[vehicleId].position && labelSystem.value) {
        labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
          description: message,
          isAlarm: true
        });
      }
    }
  } else {
    console.log(`未知的冲突消息类型: ${payload.messageType || payload.alertType}`);
  }
}

// 处理规则违规（超速和越界）
function handleRuleViolation(payload) {
  if (!payload) {
    console.error('规则违规消息格式错误:', payload);
    return;
  }
  
  console.log('收到规则违规:', payload);
  
  const vehicleId = payload.object_id || payload.vehicleId || payload.vehicleLicense || '未知车辆';
  const description = payload.description || '';
  const limitValue = payload.limitValue;
  const actualValue = payload.actualValue;
  const ruleName = payload.ruleName || '交通规则';
  const violationType = payload.violationType || '';
  
  // 根据violationType区分超速和越界
  switch (violationType.toUpperCase()) {
 
    case 'SPEED':
      // 超速违规
      handleSpeedViolation(vehicleId, payload);
      break;
    case 'ACCESS':
      // 越界处理
      handleUnauthorizedEntry(vehicleId, payload);
      break;
      
    default:
      console.log(`未知的规则违规类型: ${violationType}`);
      // 默认按越界处理
      handleUnauthorizedEntry(vehicleId, payload);
  }
}

// 处理超速违规
function handleSpeedViolation(vehicleId, payload) {
  const actualValue = payload.actualValue;
  const limitValue = payload.limitValue;
  const description = payload.description || '超速违规';
  const ruleName = payload.ruleName || '速度限制';
  
  console.log(`检测到超速违规: ${vehicleId}, 实际速度: ${actualValue}, 限速: ${limitValue}`);
  
  // 显示超速告警提示
  showAlert(`⚠️ 超速告警：${vehicleId} ${description}`, 'warning', 8000);
  
  // 在地图上标记该车辆的超速状态
  if (vehicles.value[vehicleId]) {
    // 避免重复设置超速状态导致闪烁
    const alreadyInSpeedViolation = vehicles.value[vehicleId].speedViolation;
    
    // 强制设置超速状态，确保图标正确显示
    vehicles.value[vehicleId].info = false;
    vehicles.value[vehicleId].alarm = false;
    vehicles.value[vehicleId].warning = false; // 清除warning状态，使用speedViolation状态
    vehicles.value[vehicleId].critical = false;
    vehicles.value[vehicleId].speedViolation = true; // 标记为超速状态
    vehicles.value[vehicleId].limitValue = limitValue;
    vehicles.value[vehicleId].actualValue = actualValue;
    vehicles.value[vehicleId].description = description;
    vehicles.value[vehicleId].ruleName = ruleName;
    vehicles.value[vehicleId].lastSpeedViolationTime = Date.now(); // 记录最后一次超速时间
    
    // 设置状态锁定，确保一段时间内不会改变状态
    if (!vehicles.value[vehicleId].statusLock) {
      vehicles.value[vehicleId].statusLock = {
        active: false,
        type: null,
        until: 0
      };
    }
    
    // 锁定超速状态20秒，确保图标不会来回切换
    vehicles.value[vehicleId].statusLock = {
      active: true,
      type: 'speedViolation',
      until: Date.now() + 20000 // 20秒锁定
    };
    
    // 清除任何可能存在的缓存图标，确保使用警告图标
    vehicles.value[vehicleId].cachedIconSrc = null;
    
    // 更新车辆图标为超速警告图标（只在首次设置或状态改变时更新）
    if (!alreadyInSpeedViolation) {
      if (vehicles.value[vehicleId].feature && styleManager.value) {
        vehicles.value[vehicleId].feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicles.value[vehicleId].speed, vehicles.value[vehicleId].heading));
        vehicles.value[vehicleId].lastIconUpdateTime = Date.now();
      }
    }
    
    // 更新标签显示为超速状态（只显示超速相关信息）
    if (vehicles.value[vehicleId].position && labelSystem.value) {
      // 先移除可能存在的旧标签，避免重复显示
      labelSystem.value.removeVehicleLabel(vehicleId);
      
      // 然后创建新的超速状态标签
      labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, actualValue || vehicles.value[vehicleId].speed, {
        description: description || `超速违规`,
        limitValue: limitValue,
        actualValue: actualValue,
        ruleName: ruleName,
        isSpeedViolation: true // 标记为超速状态，避免显示默认信息
      });
    }
    
    // 设置或重置超速状态自动清除计时器
    if (speedViolationTimers[vehicleId]) {
      clearTimeout(speedViolationTimers[vehicleId]);
    }
    
    // 设置新的超时计时器，如果在一定时间内（如20秒）没有再次接收到超速消息，则自动清除超速状态
    speedViolationTimers[vehicleId] = setTimeout(() => {
      // 确保车辆仍然存在
      if (vehicles.value[vehicleId]) {





        
        console.log(`超速状态超时: ${vehicleId}, 自动清除超速状态`);
        
        // 检查是否可以清除状态锁定
        if (!vehicles.value[vehicleId].statusLock ||
            !vehicles.value[vehicleId].statusLock.active ||
            Date.now() > vehicles.value[vehicleId].statusLock.until) {
          
          // 清除超速状态
          clearSpeedViolationStatus(vehicleId);
          
          // 清除计时器引用
          delete speedViolationTimers[vehicleId];
        } else {
          // 状态仍然锁定，延迟清除
          console.log(`车辆${vehicleId}状态仍然锁定，延迟清除超速状态`);
          
          // 重新设置计时器，等待锁定结束
          speedViolationTimers[vehicleId] = setTimeout(() => {
            clearSpeedViolationStatus(vehicleId);
            delete speedViolationTimers[vehicleId];
          }, vehicles.value[vehicleId].statusLock.until - Date.now());
        }
      }
    }, 20000); // 20秒超时，确保状态稳定
  }
}

// 处理越界告警
function handleUnauthorizedEntry(vehicleId, payload) {
  const description = payload.description || '越界告警';
  const alertLevel = payload.alertLevel || 'CRITICAL';
  const ruleName = payload.ruleName || '区域控制';
  
  console.log(`检测到越界告警: ${vehicleId}, ${description}, 规则: ${ruleName}`);
  
  // 显示越界告警提示
  showAlert(`⚠️ 越界告警：${vehicleId} ${description}`, 'critical', 10000);
  
  // 在地图上标记该车辆的越界状态
  if (vehicles.value[vehicleId]) {
    vehicles.value[vehicleId].critical = true;
    vehicles.value[vehicleId].alarm = false;
    vehicles.value[vehicleId].warning = false;
    vehicles.value[vehicleId].info = false;
    vehicles.value[vehicleId].speedViolation = false;
    vehicles.value[vehicleId].description = description;
    vehicles.value[vehicleId].ruleName = ruleName;
    
    // 更新车辆图标为越界警告图标
    if (vehicles.value[vehicleId].feature && styleManager.value) {
      vehicles.value[vehicleId].feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicles.value[vehicleId].speed, vehicles.value[vehicleId].heading));
    }
    
    // 更新标签显示
    if (vehicles.value[vehicleId].position && labelSystem.value) {
      labelSystem.value.updateVehicleLabel(vehicleId, vehicles.value[vehicleId].position, vehicles.value[vehicleId].speed, {
        description: description,
        ruleName: ruleName,
        isUnauthorizedEntry: true
      });
    }
  }
}

// 清除车辆超速状态的专门函数
function clearSpeedViolationStatus(vehicleId) {
  const vehicle = vehicles.value[vehicleId];
  if (!vehicle) return;

  console.log(`开始清除车辆${vehicleId}的超速状态`);

  // 检查是否可以清除状态锁定
  if (vehicle.statusLock && vehicle.statusLock.active && Date.now() < vehicle.statusLock.until) {
    console.log(`车辆${vehicleId}状态锁定中，暂不清除超速状态`);
    return;
  }

  // 清除所有告警状态
  vehicle.info = false;
  vehicle.alarm = false;
  vehicle.warning = false;
  vehicle.critical = false;
  vehicle.speedViolation = false;
  vehicle.limitValue = undefined;
  vehicle.actualValue = undefined;
  vehicle.description = undefined;
  vehicle.ruleName = undefined;

  // 清除状态锁定
  if (vehicle.statusLock) {
    vehicle.statusLock.active = false;
    vehicle.statusLock.type = null;
    vehicle.statusLock.until = 0;
  }

  // 清除缓存的图标，确保使用默认图标
  vehicle.cachedIconSrc = null;
  vehicle.lastIconUpdateTime = Date.now();

  // 更新车辆图标为默认图标
  if (vehicle.feature && styleManager.value) {
    vehicle.feature.setStyle(styleManager.value.getVehicleStyle(vehicleId, vehicle.speed, vehicle.heading));
  }

  // 更新标签显示为正常状态（只显示车辆ID，不显示0.00km/h）
  if (vehicle.position && labelSystem.value) {
    // 先移除可能存在的旧标签，避免重复显示
    labelSystem.value.removeVehicleLabel(vehicleId);
    
    // 创建新的标准标签
    labelSystem.value.updateVehicleLabel(vehicleId, vehicle.position, vehicle.speed > 0.1 ? vehicle.speed : 0);
  }

  console.log(`已成功清除车辆${vehicleId}的超速状态`);
}

// 清除车辆告警状态（如果需要）
function clearVehicleAlertStatus(vehicleData) {
  const { object_id, speed } = vehicleData;
  
  // 检查该车辆是否已存在且有告警状态
  const existingVehicle = vehicles.value[object_id];
  if (!existingVehicle) return;
  
  // 检查是否有状态锁定
  if (existingVehicle.statusLock && 
      existingVehicle.statusLock.active && 
      Date.now() < existingVehicle.statusLock.until) {
    // 状态锁定中，不清除状态
    return;
  }
  
  // 检查是否有超速状态 - 更严格的清除条件，避免图标来回切换
  if (existingVehicle.speedViolation && existingVehicle.limitValue) {
    // 如果当前速度低于限速值，清除超速状态
    if (speed < existingVehicle.limitValue) {
      // 添加更大的缓冲区，避免在临界值附近频繁切换状态
      // 只有当速度低于限速值的70%时才清除超速状态，确保状态稳定
      const speedBuffer = existingVehicle.limitValue * 0.7;

      if (speed < speedBuffer) {
        console.log(`检测到车辆${object_id}速度降低到${speed.toFixed(1)}km/h，低于限速${existingVehicle.limitValue}km/h的70%，考虑清除超速状态`);

        // 检查是否应该清除超速状态
        // 如果最后一次超速时间在15秒内，不清除状态以避免闪烁
        const now = Date.now();
        if (!existingVehicle.lastSpeedViolationTime || now - existingVehicle.lastSpeedViolationTime > 15000) {
          // 检查状态锁定
          if (!existingVehicle.statusLock ||
              !existingVehicle.statusLock.active ||
              now > existingVehicle.statusLock.until) {
            // 清除超速状态
            clearSpeedViolationStatus(object_id);
            console.log(`已清除${object_id}的超速状态，恢复为普通状态`);
          } else {
            console.log(`车辆${object_id}状态锁定中，暂不清除超速状态`);
          }
        } else {
          console.log(`车辆${object_id}刚刚处于超速状态，暂不清除状态以避免闪烁`);
        }
      }
    }
  }
  

}

// 发送心跳
function sendPing() {
  if (wsService) {
    wsService.send('ping');
    console.log('发送心跳: ping');
  }
}

// 订阅消息
function sendSubscribe() {
  if (wsService) {
    const message = JSON.stringify({
      type: 'subscribe',
      topics: ['position_update', 'collision_warning', 'rule_violation'],
      timestamp: Date.now()
    });
    wsService.send(message);
    console.log('发送订阅请求');
  }
}

// 清理资源
function cleanup() {
  // 断开WebSocket连接
  if (wsService) {
    wsService.close();
    wsService = null;
  }
  
  if (reconnectTimer) {
    clearTimeout(reconnectTimer);
    reconnectTimer = null;
  }
  
  // 清理所有超速状态计时器
  Object.keys(speedViolationTimers).forEach(vehicleId => {
    clearTimeout(speedViolationTimers[vehicleId]);
    delete speedViolationTimers[vehicleId];
  });
  
  // 移除图层
  if (vehicleLayer && props.map) {
    props.map.removeLayer(vehicleLayer);
    vehicleLayer = null;
  }
  
  // 移除飞机路线图层
  if (aircraftRouteLayer && props.map) {
    props.map.removeLayer(aircraftRouteLayer);
    aircraftRouteLayer = null;
  }
  
  // 清空飞机路线数据
  aircraftRoutes.value = {};
  
  // 移除标签
  if (props.map && labelSystem.value) {
    Object.values(vehicles.value).forEach(vehicle => {
      if (vehicle.overlay) {
        console.log(`移除标签: ${vehicle.id}`);
        labelSystem.value.removeVehicleLabel(vehicle.id);
      }
    });
  }
  
  // 清空车辆数据
  vehicles.value = {};
}

// 组件挂载时初始化
onMounted(() => {
  // 创建图层并连接WebSocket
  if (props.map) {
    createVehicleLayer();
    createAircraftRouteLayer(); // 创建飞机路线图层
  }
  
  // 连接WebSocket
  connectWebSocket();
  
  // 设置定时发送心跳
  const pingInterval = setInterval(() => {
    if (wsService && wsConnected.value) {
      sendPing();
    }
  }, 30000); // 每30秒发送一次心跳
  
  // 组件卸载时清理资源
  onUnmounted(() => {
    clearInterval(pingInterval);
    if (reconnectTimer) {
      clearTimeout(reconnectTimer);
      reconnectTimer = null;
    }
    cleanup();
  });
});

// 组件被激活时（切换回该路由时）
onActivated(() => {
  console.log('VehicleMovementControl组件被激活');
  // 如果WebSocket未连接，重新连接
  if (!wsConnected.value && !wsService) {
    console.log('组件激活，WebSocket未连接，正在重新连接...');
    // 延迟一点时间再连接，确保DOM已完全渲染
    reconnectTimer = setTimeout(() => {
      connectWebSocket();
    }, 500);
  } else {
    console.log('组件激活，WebSocket已连接');
  }
});

// 组件被停用时（切换到其他路由时）
onDeactivated(() => {
  console.log('VehicleMovementControl组件被停用');
  // 可以选择在这里关闭WebSocket，也可以保持连接
  // 如果希望在组件隐藏时断开连接，可以取消下面的注释
  /*
  if (wsService) {
    console.log('组件停用，关闭WebSocket连接');
    wsService.close();
    wsService = null;
    wsConnected.value = false;
  }
  */
});

// 监听地图实例变化
watch(() => props.map, (newMap) => {
  if (newMap) {
    createVehicleLayer();
    createAircraftRouteLayer(); // 创建飞机路线图层
  }
});

// 向外暴露方法
defineExpose({
  updateVehiclePosition,
  wsConnected,
  sendPing,
  sendSubscribe,
  vehicleCategories,
  weatherStationVisible,
  vehicleDetailVisible,
  vehicleDetail,
  toggleWeatherStationVisibility() {
    weatherStationVisible.value = !weatherStationVisible.value;
  },
  toggleVehicleDetailVisibility() {
    vehicleDetailVisible.value = !vehicleDetailVisible.value;
  },
  updateVehicleDetail(data) {
    if (data) {
      vehicleDetail.value = {...vehicleDetail.value, ...data};
      vehicleDetailVisible.value = true;
    }
  },
  showVehicleDetail(vehicleId, pixelPosition) {
    if (vehicles.value[vehicleId]) {
      // 更新车辆详情
      vehicleDetail.value = {
        id: vehicleId,
        type: vehicles.value[vehicleId].type,
        status: '任务中',
        startTime: '11-19 11:30',
        currentLocation: '当前位置',
        startLocation: 'T1航站楼',
        endLocation: 'T3航站楼',
        totalDistance: '1.3km',
        battery: '60%',
        manager: '张三',
        phone: '18661910988'
      };
      
      // 设置弹窗位置
      if (pixelPosition) {
        const viewportPosition = props.map.getViewport().getBoundingClientRect();
        detailPopupStyle.value = {
          left: (viewportPosition.left + pixelPosition[0] + 10) + 'px',
          top: (viewportPosition.top + pixelPosition[1] + 10) + 'px'
        };
      }
      
      // 显示详情弹窗
      vehicleDetailVisible.value = true;
    }
  },
  setCategoryVisibility(type, { visible, showLabel }) {
    if (vehicleCategories.value[type]) {
      // 更新分类设置
      vehicleCategories.value[type].visible = visible;
      vehicleCategories.value[type].showLabel = showLabel;
      
      // 立即应用更改 - 更新所有属于此类别的车辆
      Object.values(vehicles.value).forEach(vehicle => {
        let vehicleTypeKey = vehicle.type;
        
        // 根据车辆特征确定类别
        if (vehicle.isAircraftIn) vehicleTypeKey = 'AIRCRAFT_IN';
        else if (vehicle.isAircraftOut) vehicleTypeKey = 'AIRCRAFT_OUT';
        else if (vehicle.isUnmannedVehicle) vehicleTypeKey = 'UNMANNED_VEHICLE';
        else if (vehicle.isSpecialVehicle) vehicleTypeKey = 'AIRPORT_VEHICLE';
        else if (vehicle.isShuttleVehicle) vehicleTypeKey = 'SHUTTLE_VEHICLE';
        
        // 如果车辆属于当前修改的类别
        if (vehicleTypeKey === type) {
          // 更新图标可见性 - 如果不可见，则完全移除图标样式
          if (vehicle.feature) {
            if (visible) {
              // 显示图标 - 确保styleManager.value存在
              if (styleManager.value) {
                vehicle.feature.setStyle(styleManager.value.getVehicleStyle(vehicle.id, vehicle.speed, vehicle.heading));
              } else {
                // 提供一个默认样式，根据车辆类型选择图标
                vehicle.feature.setStyle(defaultGetVehicleStyle(vehicle.id, vehicle.speed, vehicle.heading));
              }
            } else {
              // 完全隐藏图标，使用空样式而非null
              vehicle.feature.setStyle(new Style({}));
            }
          }
          
          // 单独控制文本标签可见性，与图标显示状态无关
          if (labelSystem.value) {
            labelSystem.value.setLabelVisibility(vehicle.id, showLabel);
          }
        }
      });
    }
  },
  reconnectWebSocket() {
    console.log('手动重连WebSocket');
    connectWebSocket();
  },
  
  // 添加平滑动画相关方法
  startVehicleSmoothing() {
    if (animationSystem.value) {
      animationSystem.value.startAnimationLoop();
    }
  },
  
  stopVehicleSmoothing() {
    if (animationSystem.value) {
      animationSystem.value.stopAnimationLoop();
    }
  },
  
  resetVehicleAnimations() {
    if (animationSystem.value) {
      animationSystem.value.resetAnimations();
    }
  },
  
  // 飞机路线相关方法
  getAircraftRoutes() {
    return aircraftRoutes.value;
  },
  
  showAircraftRoute(flightNo) {
    const route = aircraftRoutes.value[flightNo];
    if (route && route.feature) {
      // 定位到路线
      const extent = route.feature.getGeometry().getExtent();
      props.map.getView().fit(extent, {
        padding: [50, 50, 50, 50],
        duration: 1000
      });
    }
  },
  
  setAircraftRouteVisibility(visible) {
    if (aircraftRouteLayer) {
      aircraftRouteLayer.setVisible(visible);
    }
  },

  // 飞机路线点标记相关方法
  createRoutePointMarker(flightNo, pointType, coordinates, routeType) {
    return createRoutePointMarker(flightNo, pointType, coordinates, routeType);
  },

  updateRoutePointMarker(flightNo, pointType, coordinates) {
    return updateRoutePointMarker(flightNo, pointType, coordinates);
  },

  removeAircraftRoute(flightNo) {
    return removeAircraftRoute(flightNo);
  }
});

// 添加一个默认的getVehicleStyle函数
function defaultGetVehicleStyle(id, _speed, heading) {
  // 检查车辆类型
  const vehicle = vehicles.value[id];
  if (!vehicle) return createDefaultStyle(carIcon, heading);
  
  // 只根据车辆类型选择图标，不根据事件状态改变
  if (vehicle.isAircraft) {
    // 航空器使用Aircraft.png图标
    return createDefaultStyle(aircraftIcon, heading);
  } else {
    // 其他所有车辆使用noPeopleCar.png图标
    return createDefaultStyle(carIcon, heading);
  }
}

// 创建默认样式的辅助函数
function createDefaultStyle(iconSrc, heading) {
  // 确保heading是有效的数值并正确转换为弧度
  const validHeading = heading !== undefined ? Number(heading) : 0;
  
  // 计算正确的旋转角度
  // 在OpenLayers中，0度是向上，顺时针增加
  // 而heading是0度为北，顺时针增加
  // 由于地图旋转了72度，heading=72对应地图上方
  const rotationRad = ((validHeading - 72) * Math.PI) / 180;
  // console.log(`createDefaultStyle: heading=${validHeading}, 旋转角度计算: (${validHeading} - 72) * π/180 = ${rotationRad} 弧度, ${(validHeading - 72)}度`);
  
  return new Style({
    image: new Icon({
      src: iconSrc, // 使用传入的图标源
      scale: 1.5,
      anchor: [0.5, 0.5],
      rotation: rotationRad, // 应用计算后的旋转角度
    })
  });
}
</script> 