/**
 * 无人机轨迹回放系统
 * 纯前端实现，基于Cesium
 */

class TrajectoryPlayback {
    constructor(config = {}) {
        this.viewer = null;
        this.trajectoryData = null;
        this.currentIndex = 0;
        this.isPlaying = false;
        this.playbackSpeed = 1000; // 默认1秒间隔
        this.playInterval = null;
        this.droneEntity = null;
        this.cameraDirection = null; // 相机中心视角方向箭头
        this.cameraFrustum = null; // 相机视锥
        this.trajectoryPolyline = null;
        this.trajectoryPoints = null; // 轨迹点球形标记
        
        // 轨迹配置项
        this.config = {
            trajectoryJsonPath: './flight_1581F6Q8D241J00CGT7R_20250804_115151/trajectory_20250804_115151.json',
            videoFramesDirectory: './flight_1581F6Q8D241J00CGT7R_20250804_115151/video_frames/',
            ...config
        };
        
        this.init();
    }

    /**
     * 初始化系统
     */
    async init() {
        try {
            console.log('开始初始化轨迹回放系统...');
            this.initCesium();
            console.log('Cesium初始化完成');
            await this.loadTrajectoryData();
            console.log('轨迹数据加载完成');
            this.setupEventListeners();
            console.log('事件监听器设置完成');
            this.hideLoading();
            this.updateStatus('📊 轨迹数据加载完成，共 ' + this.trajectoryData.length + ' 个轨迹点');
            console.log('系统初始化完成');
        } catch (error) {
            console.error('初始化失败:', error);
            this.updateStatus('❌ 初始化失败: ' + error.message);
            this.hideLoading();
        }
    }

    /**
     * 初始化Cesium地图
     */
    initCesium() {
        this.viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(),
            shadows: true,
            timeline: false,
            animation: false,
            sceneModePicker: false,
            baseLayerPicker: false,
            geocoder: false,
            homeButton: false,
            infoBox: false,
            navigationHelpButton: false,
            selectionIndicator: false
            // 使用Cesium默认影像提供者
        });

        // 设置初始视角到西安
        this.viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(108.9398, 34.3416, 5000),
            orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-45),
                roll: 0.0
            }
        });

        // 将viewer暴露到全局作用域
        window.viewer = this.viewer;
    }

    /**
     * 加载轨迹数据
     */
    async loadTrajectoryData() {
        try {
            // 使用配置的轨迹JSON路径
            const response = await fetch(this.config.trajectoryJsonPath);
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            
            const data = await response.json();
            this.trajectoryData = data.trajectory_points;
            
            if (!this.trajectoryData || this.trajectoryData.length === 0) {
                throw new Error('轨迹数据为空');
            }

            console.log(`成功加载 ${this.trajectoryData.length} 个轨迹点`);
            console.log('轨迹配置:', this.config);
            
            // 创建轨迹线
            this.createTrajectoryLine();
            
            // 创建无人机实体
            this.createDroneEntity();
            
            // 初始化到第一个位置
            this.updateToFrame(0);
            
            // 设置相机跟随第一个轨迹点
            this.focusOnTrajectory();
            
        } catch (error) {
            console.error('加载轨迹数据失败:', error);
            throw error;
        }
    }

    /**
     * 创建轨迹线
     */
    createTrajectoryLine() {
        const positions = this.trajectoryData.map(point => {
            return Cesium.Cartesian3.fromDegrees(
                point.position.longitude,
                point.position.latitude,
                point.position.altitude
            );
        });

        // 创建红色虚线轨迹
        this.trajectoryPolyline = this.viewer.entities.add({
            name: '飞行轨迹',
            polyline: {
                positions: positions,
                width: 3,
                material: new Cesium.PolylineDashMaterialProperty({
                    color: Cesium.Color.RED,
                    dashLength: 16.0,
                    dashPattern: 255
                }),
                clampToGround: false,
                show: true
            }
        });

        // 为每个轨迹点添加红色球形标记
        this.trajectoryPoints = [];
        this.trajectoryData.forEach((point, index) => {
            const pointEntity = this.viewer.entities.add({
                name: `轨迹点_${index}`,
                position: Cesium.Cartesian3.fromDegrees(
                    point.position.longitude,
                    point.position.latitude,
                    point.position.altitude
                ),
                point: {
                    pixelSize: 8,
                    color: Cesium.Color.RED,
                    outlineColor: Cesium.Color.DARKRED,
                    outlineWidth: 1,
                    heightReference: Cesium.HeightReference.NONE,
                    show: true
                }
            });
            this.trajectoryPoints.push(pointEntity);
        });
    }

    /**
     * 创建无人机实体 - 使用黄色圆形点表示，并添加云台姿态箭头
     */
    createDroneEntity() {
        this.droneEntity = this.viewer.entities.add({
            name: '无人机',
            position: Cesium.Cartesian3.fromDegrees(0, 0, 0),
            point: {
                pixelSize: 15,
                color: Cesium.Color.YELLOW,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 2,
                heightReference: Cesium.HeightReference.NONE,
                show: true
            }
        });

        // 创建相机中心视角方向箭头
        this.createCameraDirection();
        this.createCameraFrustum();
    }

    /**
     * 创建相机中心视角方向箭头
     */
    createCameraDirection() {
        const arrowLength = 15.0; // 箭头长度
        const arrowWidth = 3.0;   // 箭头线宽

        // 创建红色箭头表示相机中心视角方向
        this.cameraDirection = this.viewer.entities.add({
            name: '相机视角方向',
            polyline: {
                positions: [
                    Cesium.Cartesian3.fromDegrees(0, 0, 0),
                    Cesium.Cartesian3.fromDegrees(0, 0, 0)
                ],
                width: arrowWidth,
                material: Cesium.Color.RED,
                clampToGround: false,
                show: true
            }
        });
    }

    /**
     * 创建相机视锥
     */
    createCameraFrustum() {
        // 相机实际参数
        // 水平FOV: 90度, 垂直FOV: 60度
        // 图像尺寸: 1280 × 720 像素
        const fovHorizontal = Cesium.Math.toRadians(84); // 水平视野角度90度
        const fovVertical = Cesium.Math.toRadians(53);    // 垂直视野角度60度
        const imageWidth = 1280;        // 图像宽度
        const imageHeight = 720;        // 图像高度
        const aspectRatio = imageWidth / imageHeight; // 宽高比 = 1280/720 ≈ 1.778

        // 创建视锥线框
        this.cameraFrustum = {
            lines: this.viewer.entities.add({
                name: '相机视锥线框',
                polyline: {
                    positions: [],
                    width: 1.5,
                    material: Cesium.Color.YELLOW.withAlpha(0.8),
                    clampToGround: false,
                    show: true
                }
            }),
            surface: this.viewer.entities.add({
                name: '相机视锥表面',
                polygon: {
                    hierarchy: new Cesium.PolygonHierarchy([]),
                    material: Cesium.Color.WHITE, // 初始为白色，后续会替换为视频帧
                    outline: false,
                    fill: true,
                    show: true,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                    height: 0,
                    extrudedHeight: 0
                }
            }),
            fovHorizontal: fovHorizontal,    // 水平FOV
            fovVertical: fovVertical,        // 垂直FOV
            aspectRatio: aspectRatio,        // 宽高比
            imageWidth: imageWidth,          // 图像宽度
            imageHeight: imageHeight,        // 图像高度
            currentVideoFrame: null // 存储当前视频帧路径
        };
    }

    /**
     * 设置事件监听器
     */
    setupEventListeners() {
        // 键盘快捷键
        document.addEventListener('keydown', (event) => {
            switch (event.code) {
                case 'Space':
                    event.preventDefault();
                    this.togglePlayback();
                    break;
                case 'ArrowLeft':
                    event.preventDefault();
                    this.previousFrame();
                    break;
                case 'ArrowRight':
                    event.preventDefault();
                    this.nextFrame();
                    break;
                case 'Home':
                    event.preventDefault();
                    this.seekToFrame(0);
                    break;
                case 'End':
                    event.preventDefault();
                    this.seekToFrame(this.trajectoryData.length - 1);
                    break;
            }
        });

        // 进度条拖拽
        this.setupProgressBarDrag();
    }

    /**
     * 设置进度条拖拽功能
     */
    setupProgressBarDrag() {
        const progressBar = document.getElementById('progressBar');
        const progressHandle = document.getElementById('progressHandle');
        let isDragging = false;

        progressHandle.addEventListener('mousedown', (event) => {
            isDragging = true;
            event.preventDefault();
        });

        document.addEventListener('mousemove', (event) => {
            if (isDragging) {
                const rect = progressBar.getBoundingClientRect();
                const percent = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
                const frameIndex = Math.floor(percent * (this.trajectoryData.length - 1));
                this.seekToFrame(frameIndex);
            }
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });
    }

    /**
     * 切换播放状态
     */
    togglePlayback() {
        if (this.isPlaying) {
            this.pause();
        } else {
            this.play();
        }
    }

    /**
     * 开始播放
     */
    play() {
        if (this.isPlaying) return;
        
        this.isPlaying = true;
        this.updatePlayButton();
        
        this.playInterval = setInterval(() => {
            if (this.currentIndex < this.trajectoryData.length - 1) {
                this.nextFrame();
            } else {
                this.pause(); // 播放完毕自动暂停
            }
        }, this.playbackSpeed);
    }

    /**
     * 暂停播放
     */
    pause() {
        this.isPlaying = false;
        this.updatePlayButton();
        
        if (this.playInterval) {
            clearInterval(this.playInterval);
            this.playInterval = null;
        }
    }

    /**
     * 上一帧
     */
    previousFrame() {
        if (this.currentIndex > 0) {
            this.seekToFrame(this.currentIndex - 1);
        }
    }

    /**
     * 下一帧
     */
    nextFrame() {
        if (this.currentIndex < this.trajectoryData.length - 1) {
            this.seekToFrame(this.currentIndex + 1);
        }
    }

    /**
     * 跳转到指定帧
     */
    seekToFrame(index) {
        if (index < 0 || index >= this.trajectoryData.length) return;
        
        this.currentIndex = index;
        this.updateToFrame(index);
    }

    /**
     * 更新到指定帧
     */
    updateToFrame(index) {
        const point = this.trajectoryData[index];
        if (!point) return;

        // 更新无人机位置
        const position = Cesium.Cartesian3.fromDegrees(
            point.position.longitude,
            point.position.latitude,
            point.position.altitude
        );
        this.droneEntity.position = position;

        // 更新相机中心视角方向
        this.updateCameraDirection(position, point.gimbal_attitude);

        // 更新视锥远平面的视频帧（这会根据图像宽高比自动调整视锥并重新计算几何形状）
        this.updateFrustumVideoTexture(point);

        // 更新UI显示
        this.updateUI(point);
        
        // 更新进度条
        this.updateProgressBar();
    }

    /**
     * 更新相机中心视角方向箭头
     */
    updateCameraDirection(position, gimbalAttitude) {
        if (!this.cameraDirection || !gimbalAttitude) return;

        const arrowLength = 15.0;
        
        // 获取云台的绝对姿态角度（转换为弧度）
        // NED坐标系：X轴指向北(Roll轴)，Y轴指向东(Pitch轴)，Z轴指向下(Yaw轴)
        const yaw = Cesium.Math.toRadians(gimbalAttitude.yaw || 0);     // 绕Z轴旋转（向下轴）
        const pitch = Cesium.Math.toRadians(gimbalAttitude.pitch || 0); // 绕Y轴旋转（向东轴）
        const roll = Cesium.Math.toRadians(gimbalAttitude.roll || 0);   // 绕X轴旋转（向北轴）

        // 在NED坐标系中，相机初始朝向为X轴正方向（向北）
        // 当pitch=-90度时，相机应该垂直向下（Z轴正方向）
        const nedForward = new Cesium.Cartesian3(arrowLength, 0, 0); // NED坐标系中的初始朝向（向北）

        // 创建NED坐标系的旋转矩阵：
        // 1. 先绕X轴旋转roll角（横滚）
        // 2. 再绕Y轴旋转pitch角（俯仰）
        // 3. 最后绕Z轴旋转yaw角（偏航）
        const rollMatrix = Cesium.Matrix3.fromRotationX(roll);
        const pitchMatrix = Cesium.Matrix3.fromRotationY(pitch);
        const yawMatrix = Cesium.Matrix3.fromRotationZ(yaw);

        // 组合旋转矩阵：按照Roll->Pitch->Yaw的顺序
        let rotationMatrix = Cesium.Matrix3.multiply(pitchMatrix, rollMatrix, new Cesium.Matrix3());
        rotationMatrix = Cesium.Matrix3.multiply(yawMatrix, rotationMatrix, rotationMatrix);

        // 应用旋转变换到相机朝向向量
        const rotatedNEDForward = Cesium.Matrix3.multiplyByVector(rotationMatrix, nedForward, new Cesium.Cartesian3());

        // 将NED坐标系转换为ENU坐标系（Cesium使用的坐标系）
        // NED -> ENU: X(北) -> Y(北), Y(东) -> X(东), Z(下) -> -Z(上)
        const enuForward = new Cesium.Cartesian3(
            rotatedNEDForward.y,  // NED的Y(东) -> ENU的X(东)
            rotatedNEDForward.x,  // NED的X(北) -> ENU的Y(北)
            -rotatedNEDForward.z  // NED的Z(下) -> ENU的-Z(上)
        );

        // 转换到地球固定坐标系
        const transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
        const worldDirection = Cesium.Matrix4.multiplyByPointAsVector(transform, enuForward, new Cesium.Cartesian3());

        // 计算箭头终点位置
        const endPosition = Cesium.Cartesian3.add(position, worldDirection, new Cesium.Cartesian3());

        // 更新箭头位置
        this.cameraDirection.polyline.positions = [position, endPosition];
    }

    /**
     * 更新相机视锥 - 计算与地面的实际交点
     */
    updateCameraFrustum(position, gimbalAttitude) {
        if (!this.cameraFrustum || !gimbalAttitude) return;

        // 获取云台的绝对姿态角度（转换为弧度）
        const yaw = Cesium.Math.toRadians(gimbalAttitude.yaw || 0);
        const pitch = Cesium.Math.toRadians(gimbalAttitude.pitch || 0);
        const roll = Cesium.Math.toRadians(gimbalAttitude.roll || 0);

        // 视锥参数
        const { fovHorizontal, fovVertical } = this.cameraFrustum;
        const halfFovH = fovHorizontal / 2;
        const halfFovV = fovVertical / 2;

        // 获取无人机的高度（相对于地面）
        const droneHeight = position.z || 100; // 如果无法获取高度，默认100米

        // 在NED坐标系中定义视锥的四个方向向量（归一化）
        const nedTopLeft = new Cesium.Cartesian3(1, -Math.tan(halfFovH), -Math.tan(halfFovV));
        const nedTopRight = new Cesium.Cartesian3(1, Math.tan(halfFovH), -Math.tan(halfFovV));
        const nedBottomLeft = new Cesium.Cartesian3(1, -Math.tan(halfFovH), Math.tan(halfFovV));
        const nedBottomRight = new Cesium.Cartesian3(1, Math.tan(halfFovH), Math.tan(halfFovV));

        // 归一化方向向量
        Cesium.Cartesian3.normalize(nedTopLeft, nedTopLeft);
        Cesium.Cartesian3.normalize(nedTopRight, nedTopRight);
        Cesium.Cartesian3.normalize(nedBottomLeft, nedBottomLeft);
        Cesium.Cartesian3.normalize(nedBottomRight, nedBottomRight);

        // 创建旋转矩阵
        const rollMatrix = Cesium.Matrix3.fromRotationX(roll);
        const pitchMatrix = Cesium.Matrix3.fromRotationY(pitch);
        const yawMatrix = Cesium.Matrix3.fromRotationZ(yaw);

        let rotationMatrix = Cesium.Matrix3.multiply(pitchMatrix, rollMatrix, new Cesium.Matrix3());
        rotationMatrix = Cesium.Matrix3.multiply(yawMatrix, rotationMatrix, rotationMatrix);

        // 应用旋转到方向向量
        const rotatedTopLeft = Cesium.Matrix3.multiplyByVector(rotationMatrix, nedTopLeft, new Cesium.Cartesian3());
        const rotatedTopRight = Cesium.Matrix3.multiplyByVector(rotationMatrix, nedTopRight, new Cesium.Cartesian3());
        const rotatedBottomLeft = Cesium.Matrix3.multiplyByVector(rotationMatrix, nedBottomLeft, new Cesium.Cartesian3());
        const rotatedBottomRight = Cesium.Matrix3.multiplyByVector(rotationMatrix, nedBottomRight, new Cesium.Cartesian3());

        // 转换到ENU坐标系
        const enuTopLeft = new Cesium.Cartesian3(rotatedTopLeft.y, rotatedTopLeft.x, -rotatedTopLeft.z);
        const enuTopRight = new Cesium.Cartesian3(rotatedTopRight.y, rotatedTopRight.x, -rotatedTopRight.z);
        const enuBottomLeft = new Cesium.Cartesian3(rotatedBottomLeft.y, rotatedBottomLeft.x, -rotatedBottomLeft.z);
        const enuBottomRight = new Cesium.Cartesian3(rotatedBottomRight.y, rotatedBottomRight.x, -rotatedBottomRight.z);

        // 转换到地球固定坐标系
        const transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
        
        const worldTopLeft = Cesium.Matrix4.multiplyByPointAsVector(transform, enuTopLeft, new Cesium.Cartesian3());
        const worldTopRight = Cesium.Matrix4.multiplyByPointAsVector(transform, enuTopRight, new Cesium.Cartesian3());
        const worldBottomLeft = Cesium.Matrix4.multiplyByPointAsVector(transform, enuBottomLeft, new Cesium.Cartesian3());
        const worldBottomRight = Cesium.Matrix4.multiplyByPointAsVector(transform, enuBottomRight, new Cesium.Cartesian3());

        // 计算与地面的交点
        const groundIntersections = this.calculateGroundIntersections(position, [
            worldTopLeft, worldTopRight, worldBottomLeft, worldBottomRight
        ]);

        let groundTopLeft, groundTopRight, groundBottomLeft, groundBottomRight;

        if (groundIntersections.length < 4) {
            console.warn('无法计算完整的地面交点，使用默认30米视锥长度');
            
            // 使用默认30米距离计算视锥点
            const defaultDistance = 30.0;
            
            // 计算30米距离处的视锥点
            groundTopLeft = Cesium.Cartesian3.add(position, 
                Cesium.Cartesian3.multiplyByScalar(worldTopLeft, defaultDistance, new Cesium.Cartesian3()), 
                new Cesium.Cartesian3());
            groundTopRight = Cesium.Cartesian3.add(position, 
                Cesium.Cartesian3.multiplyByScalar(worldTopRight, defaultDistance, new Cesium.Cartesian3()), 
                new Cesium.Cartesian3());
            groundBottomLeft = Cesium.Cartesian3.add(position, 
                Cesium.Cartesian3.multiplyByScalar(worldBottomLeft, defaultDistance, new Cesium.Cartesian3()), 
                new Cesium.Cartesian3());
            groundBottomRight = Cesium.Cartesian3.add(position, 
                Cesium.Cartesian3.multiplyByScalar(worldBottomRight, defaultDistance, new Cesium.Cartesian3()), 
                new Cesium.Cartesian3());
        } else {
            [groundTopLeft, groundTopRight, groundBottomLeft, groundBottomRight] = groundIntersections;
        }

        // 创建视锥线框（从无人机到地面交点）
        var frustumLines = null;
        if(groundIntersections.length < 4){
            frustumLines= [
            // 从相机中心到地面交点的射线
            position, groundTopLeft,
            position, groundTopRight,
            position, groundBottomLeft,
            position, groundBottomRight,
            // // 地面投影四条边
            groundTopLeft, groundTopRight,      // 顶边
            groundTopRight, groundBottomRight,  // 右边
            groundBottomRight, groundBottomLeft, // 底边
            groundBottomLeft, groundTopLeft     // 左边
            ];
        }else{
            frustumLines= [
            // 从相机中心到地面交点的射线
            position, groundTopLeft,
            position, groundTopRight,
            position, groundBottomLeft,
            position, groundBottomRight
            // // 地面投影四条边
            // groundTopLeft, groundTopRight,      // 顶边
            // groundTopRight, groundBottomRight,  // 右边
            // groundBottomRight, groundBottomLeft, // 底边
            // groundBottomLeft, groundTopLeft     // 左边
            ];
        }


        // 更新线框
        this.cameraFrustum.lines.polyline.positions = frustumLines;

        // 创建地面投影表面
        const frustumSurface = [
            groundBottomLeft, groundTopLeft, groundTopRight, groundBottomRight
        ];

        // 更新表面
        this.cameraFrustum.surface.polygon.hierarchy = new Cesium.PolygonHierarchy(frustumSurface);
        
        console.log('更新地面投影视锥，交点数:', groundIntersections.length);
    }

    /**
     * 计算射线与地面的交点
     */
    calculateGroundIntersections(origin, directions) {
        const intersections = [];
        
        for (const direction of directions) {
            // 计算射线与地面（z=0平面在地球表面）的交点
            const intersection = this.rayGroundIntersection(origin, direction);
            if (intersection) {
                intersections.push(intersection);
            }
        }
        
        return intersections;
    }

    /**
     * 射线与地面交点计算
     */
    rayGroundIntersection(origin, direction) {
        try {
            // 创建射线
            const ray = new Cesium.Ray(origin, direction);
            
            // 首先尝试与地球表面（包含地形）的交点
            const terrainIntersection = this.viewer.scene.globe.pick(ray, this.viewer.scene);
            if (terrainIntersection) {
                return terrainIntersection;
            }
            
            // 如果没有找到地形交点，计算与椭球面的交点
            const ellipsoid = this.viewer.scene.globe.ellipsoid;
            const intersections = Cesium.IntersectionTests.rayEllipsoid(ray, ellipsoid);
            
            if (intersections) {
                // 选择第一个交点（进入点）
                const intersectionPoint = Cesium.Ray.getPoint(ray, intersections.start);
                return intersectionPoint;
            }
            
            // 如果仍然没有交点，使用简化的平面交点计算
            // 假设地面高度为0（海平面）
            const groundHeight = 0;
            const originHeight = Cesium.Cartographic.fromCartesian(origin).height;
            
            if (direction.z >= 0) {
                // 如果射线向上，不会与地面相交
                return null;
            }
            
            // 计算射线与平面的交点
            const t = (groundHeight - originHeight) / direction.z;
            if (t < 0) {
                return null; // 交点在射线起点后面
            }
            
            const intersectionPoint = Cesium.Cartesian3.add(
                origin,
                Cesium.Cartesian3.multiplyByScalar(direction, t, new Cesium.Cartesian3()),
                new Cesium.Cartesian3()
            );
            
            return intersectionPoint;
            
        } catch (error) {
            console.warn('计算地面交点失败:', error);
            return null;
        }
    }

    /**
     * 创建根据角度旋转的图片
     */
    createLabeledImage(originalImageSrc, width, height, rotationAngle = 0) {
        return new Promise((resolve, reject) => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            
            // 计算旋转后画布的尺寸
            const cos = Math.abs(Math.cos(rotationAngle));
            const sin = Math.abs(Math.sin(rotationAngle));
            const newWidth = width * cos + height * sin;
            const newHeight = width * sin + height * cos;
            
            canvas.width = newWidth;
            canvas.height = newHeight;
            
            const img = new Image();
            img.onload = () => {
                try {
                    // 将坐标原点移到画布中心
                    ctx.translate(newWidth / 2, newHeight / 2);
                    
                    // 根据传入的角度进行旋转
                    ctx.rotate(rotationAngle);
                    
                    // 绘制旋转后的图片，注意要从负的中心点开始绘制
                    ctx.drawImage(img, -width / 2, -height / 2, width, height);
                    
                    // 转换为Base64数据URL
                    const dataURL = canvas.toDataURL('image/png');
                    resolve(dataURL);
                } catch (error) {
                    reject(error);
                }
            };
            
            img.onerror = () => {
                reject(new Error('图片加载失败'));
            };
            
            img.src = originalImageSrc;
        });
    }

    /**
     * 更新视锥远平面的视频帧纹理
     */
    updateFrustumVideoTexture(point) {
        if (!this.cameraFrustum || !this.cameraFrustum.surface) return;

        // 获取当前无人机位置
        const position = Cesium.Cartesian3.fromDegrees(
            point.position.longitude,
            point.position.latitude,
            point.position.altitude
        );

        // 检查是否有视频帧数据
        if (point.video_frame && point.video_frame !== this.cameraFrustum.currentVideoFrame) {
            // 使用配置的视频帧目录路径
            const imagePath = `${this.config.videoFramesDirectory}${point.video_frame}`;
            
            // 创建临时图像对象来获取真实尺寸
            const img = new Image();
            img.onload = async () => {
                try {
                    // 计算图像的真实宽高比
                    const imageAspectRatio = img.width / img.height;
                    
                    // 更新视锥的宽高比
                    //this.cameraFrustum.aspectRatio = imageAspectRatio;
                    
                    // 获取当前云台的yaw角度作为图片旋转角度
                    const rotationAngle = Cesium.Math.toRadians(point.gimbal_attitude?.yaw || 0);
                    
                    // 创建根据云台yaw角度旋转的图片
                    const labeledImageDataURL = await this.createLabeledImage(imagePath, img.width, img.height, rotationAngle);
                    


                    // 创建图像材质，使用带标签的图片
                    const imageMaterial = new Cesium.ImageMaterialProperty({
                        image: labeledImageDataURL,
                        transparent: false
                    });
                    
                    // 更新远平面材质
                    this.cameraFrustum.surface.polygon.material = imageMaterial;
                    this.cameraFrustum.currentVideoFrame = point.video_frame;
                    
                    // 重新计算视锥几何形状以匹配新的宽高比
                    this.updateCameraFrustum(position, point.gimbal_attitude);
                    
                    console.log(`更新视锥视频帧: ${point.video_frame}, 宽高比: ${imageAspectRatio.toFixed(2)} (${img.width}x${img.height})`);
                    console.log(`图片旋转角度: ${(point.gimbal_attitude?.yaw || 0).toFixed(1)}°`);
                } catch (error) {
                    console.error('加载视频帧失败:', error);
                    // 如果图像加载失败，使用半透明红色作为备用
                    this.cameraFrustum.surface.polygon.material = Cesium.Color.RED.withAlpha(0.3);
                    // 仍需要更新视锥几何形状
                    this.updateCameraFrustum(position, point.gimbal_attitude);
                }
            };
            
            img.onerror = () => {
                console.error('图像加载失败:', imagePath);
                this.cameraFrustum.surface.polygon.material = Cesium.Color.RED.withAlpha(0.3);
                // 仍需要更新视锥几何形状
                this.updateCameraFrustum(position, point.gimbal_attitude);
            };
            
            img.src = imagePath;
        } else if (!point.video_frame) {
            // 如果没有视频帧，使用半透明红色，恢复默认宽高比
            this.cameraFrustum.surface.polygon.material = Cesium.Color.RED.withAlpha(0.3);
            this.cameraFrustum.currentVideoFrame = null;
            this.cameraFrustum.aspectRatio = 1280 / 720; // 恢复相机的实际宽高比
            // 更新视锥几何形状
            this.updateCameraFrustum(position, point.gimbal_attitude);
        } else {
            // 视频帧没有变化，但仍需要更新视锥几何形状（因为姿态可能改变）
            this.updateCameraFrustum(position, point.gimbal_attitude);
        }
    }

    /**
     * 更新UI显示
     */
    updateUI(point) {
        // 更新位置信息
        const latElement = document.getElementById('latitude');
        const lonElement = document.getElementById('longitude');
        const altElement = document.getElementById('altitude');
        
        if (latElement) latElement.textContent = point.position.latitude.toFixed(6) + '°';
        if (lonElement) lonElement.textContent = point.position.longitude.toFixed(6) + '°';
        if (altElement) altElement.textContent = point.position.altitude.toFixed(1) + 'm';

        // 更新姿态信息
        const headingElement = document.getElementById('heading');
        const pitchElement = document.getElementById('pitch');
        const rollElement = document.getElementById('roll');
        
        if (headingElement) headingElement.textContent = (point.attitude.heading || 0).toFixed(1) + '°';
        if (pitchElement) pitchElement.textContent = (point.attitude.pitch || 0).toFixed(1) + '°';
        if (rollElement) rollElement.textContent = (point.attitude.roll || 0).toFixed(1) + '°';

        // 更新云台信息
        const gimbalPitchElement = document.getElementById('gimbalPitch');
        const gimbalYawElement = document.getElementById('gimbalYaw');
        const gimbalRollElement = document.getElementById('gimbalRoll');
        
        if (gimbalPitchElement) gimbalPitchElement.textContent = (point.gimbal_attitude?.pitch || 0).toFixed(1) + '°';
        if (gimbalYawElement) gimbalYawElement.textContent = (point.gimbal_attitude?.yaw || 0).toFixed(1) + '°';
        if (gimbalRollElement) gimbalRollElement.textContent = (point.gimbal_attitude?.roll || 0).toFixed(1) + '°';

        // 更新时间显示
        const timeDisplay = document.getElementById('timeDisplay');
        if (timeDisplay) {
            timeDisplay.textContent = `${this.currentIndex + 1} / ${this.trajectoryData.length}`;
        }

        // 更新视频帧
        this.updateVideoFrame(point);
    }

    /**
     * 更新视频帧显示
     */
    updateVideoFrame(point) {
        const videoFrame = document.getElementById('videoFrame');
        const videoPlaceholder = document.getElementById('videoPlaceholder');

        if (point.video_frame) {
            // 使用配置的视频帧目录路径
            const imagePath = `${this.config.videoFramesDirectory}${point.video_frame}`;
            
            videoFrame.src = imagePath;
            videoFrame.style.display = 'block';
            videoPlaceholder.style.display = 'none';
            
            videoFrame.onerror = () => {
                videoFrame.style.display = 'none';
                videoPlaceholder.style.display = 'block';
                videoPlaceholder.innerHTML = `
                    <div>📹 视频帧加载失败</div>
                    <div style="font-size: 10px; margin-top: 5px;">${point.video_frame}</div>
                `;
            };
        } else {
            videoFrame.style.display = 'none';
            videoPlaceholder.style.display = 'block';
            videoPlaceholder.innerHTML = `
                <div>📹 无视频帧数据</div>
                <div style="font-size: 10px; margin-top: 5px;">时间点: ${point.timestamp}</div>
            `;
        }
    }

    /**
     * 更新播放按钮
     */
    updatePlayButton() {
        const playBtn = document.getElementById('playBtn');
        if (this.isPlaying) {
            playBtn.innerHTML = '⏸';
            playBtn.classList.add('active');
            playBtn.title = '暂停';
        } else {
            playBtn.innerHTML = '▶';
            playBtn.classList.remove('active');
            playBtn.title = '播放';
        }
    }

    /**
     * 更新进度条
     */
    updateProgressBar() {
        if (!this.trajectoryData || this.trajectoryData.length === 0) return;
        
        const progress = this.currentIndex / (this.trajectoryData.length - 1);
        const progressFill = document.getElementById('progressFill');
        const progressHandle = document.getElementById('progressHandle');
        
        progressFill.style.width = (progress * 100) + '%';
        progressHandle.style.left = (progress * 100) + '%';
    }

    /**
     * 改变播放速度
     */
    changePlaybackSpeed() {
        const speedSelect = document.getElementById('speedSelect');
        const speed = parseFloat(speedSelect.value);
        this.playbackSpeed = 1000 / speed; // 转换为间隔时间
        
        // 如果正在播放，重新启动以应用新速度
        if (this.isPlaying) {
            this.pause();
            this.play();
        }
    }

    /**
     * 聚焦到轨迹
     */
    focusOnTrajectory() {
        if (!this.trajectoryData || this.trajectoryData.length === 0) return;
        
        // 计算轨迹边界
        let minLon = 180, maxLon = -180;
        let minLat = 90, maxLat = -90;
        let minAlt = Number.MAX_VALUE, maxAlt = -Number.MAX_VALUE;
        
        this.trajectoryData.forEach(point => {
            minLon = Math.min(minLon, point.position.longitude);
            maxLon = Math.max(maxLon, point.position.longitude);
            minLat = Math.min(minLat, point.position.latitude);
            maxLat = Math.max(maxLat, point.position.latitude);
            minAlt = Math.min(minAlt, point.position.altitude);
            maxAlt = Math.max(maxAlt, point.position.altitude);
        });
        
        // 设置相机视角
        const centerLon = (minLon + maxLon) / 2;
        const centerLat = (minLat + maxLat) / 2;
        const centerAlt = (minAlt + maxAlt) / 2;
        
        this.viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(centerLon, centerLat, centerAlt + 500),
            orientation: {
                heading: 0.0,
                pitch: -0.5,
                roll: 0.0
            }
        });
    }

    /**
     * 进度条点击跳转
     */
    seekToPosition(event) {
        const progressBar = document.getElementById('progressBar');
        const rect = progressBar.getBoundingClientRect();
        const percent = (event.clientX - rect.left) / rect.width;
        const frameIndex = Math.floor(percent * (this.trajectoryData.length - 1));
        this.seekToFrame(frameIndex);
    }

    /**
     * 更新状态显示
     */
    updateStatus(message) {
        const statusDisplay = document.getElementById('statusDisplay');
        if (statusDisplay) {
            statusDisplay.textContent = message;
        }
    }

    /**
     * 隐藏加载提示
     */
    hideLoading() {
        const loadingIndicator = document.getElementById('loadingIndicator');
        if (loadingIndicator) {
            loadingIndicator.style.display = 'none';
        }
    }
}

// 全局变量
let playbackSystem = null;

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    // 默认配置，也可以根据需要传入不同的配置
    const trajectoryConfig = {
        trajectoryJsonPath: './flight_1581F6Q8D241J00CGT7R_20250803_162454/trajectory_20250803_162454.json',
        videoFramesDirectory: './flight_1581F6Q8D241J00CGT7R_20250803_162454/video_frames/'
    };
    
    playbackSystem = new TrajectoryPlayback(trajectoryConfig);
    
    // 示例：如何使用不同的轨迹配置
    // const alternativeConfig = {
    //     trajectoryJsonPath: './flight_another_flight/trajectory_another.json',
    //     videoFramesDirectory: './flight_another_flight/video_frames/'
    // };
    // playbackSystem = new TrajectoryPlayback(alternativeConfig);
});

// 全局函数（供HTML调用）
function togglePlayback() {
    if (playbackSystem) playbackSystem.togglePlayback();
}

function previousFrame() {
    if (playbackSystem) playbackSystem.previousFrame();
}

function nextFrame() {
    if (playbackSystem) playbackSystem.nextFrame();
}

function changePlaybackSpeed() {
    if (playbackSystem) playbackSystem.changePlaybackSpeed();
}

function seekToPosition(event) {
    if (playbackSystem) playbackSystem.seekToPosition(event);
}