let map = null; // 地图实例
let treeData = []; // 组织机构树数据
let nodeId = ""; // 当前选中的节点ID
let cablewayList = []; // 索道列表
let towerList = []; // 塔列表
let crossingList = []; // 跨越列表
let crossingListNew = []; // 跨越列表
let highwayList = []; // 公路列表
let aThousandFieldsList = []; // 牵张场地
let intLng = 116.254; // 初始经度
let intLat = 39.965; // 初始纬度
let isMap = true; // 是否是地图模式
let projectOverview = ""; // 工程概况
let projectTitle = ""; // 项目名称
let centerTitle = ""; // 中间标题
// 图例数据
const legendData = [
    {
        name: "协调完成",
        value: 0,
        // icon: "../../img/digitalSignage/icon_three.png",
        icon: "../../img/digitalSignage/icon_three_new.png",
    },
    {
        name: "基础开挖",
        value: 0,
        // icon: "../../img/digitalSignage/icon_two.png",
        icon: "../../img/digitalSignage/icon_two_new.png",
    },
    {
        name: "基础开挖完成",
        value: 0,
        // icon: "../../img/digitalSignage/icon_five.png",
        icon: "../../img/digitalSignage/icon_five_new.png",
    },
    {
        name: "基础浇筑",
        value: 0,
        // icon: "../../img/digitalSignage/icon_seven.png",
        icon: "../../img/digitalSignage/icon_seven_new.png",
    },
    {
        name: "基础浇筑完成",
        value: 0,
        // icon: "../../img/digitalSignage/icon_four.png",
        icon: "../../img/digitalSignage/icon_four_new.png",
    },
    {
        name: "铁塔组立",
        value: 0,
        // icon: "../../img/digitalSignage/icon_six.png",
        icon: "../../img/digitalSignage/zt_orange.png",
    },
    {
        name: "铁塔组立完成",
        value: 0,
        icon: "../../img/digitalSignage/zt_red.png",
    },
    {
        name: "架线施工",
        value: 0,
        icon: "../../img/digitalSignage/line_y.png",
    },
    // {
    //     name: "架线施工完成",
    //     value: 0,
    //     icon: "../../img/digitalSignage/zt_purple.png",
    // },
    {
        name: "架线施工完成",
        value: 0,
        icon: "../../img/digitalSignage/line_r.png",
    },
    {
        name: "附件安装完成",
        value: 0,
        icon: "../../img/digitalSignage/zt_green.png",
    },
    {
        name: "未  开  始",
        value: 0,
        icon: "../../img/digitalSignage/icon_one_new.png",
    },
    {
        name: "索道运输",
        value: 0,
        icon: "../../img/digitalSignage/sd.png",
    },
    // {
    //     name: "项  目  部",
    //     value: 0,
    //     icon: "../../img/digitalSignage/project.png",
    // },
];

// 地图配置项
const config = {
    polyline: {
        strokeWeight: 3, // 线条宽度
        strokeOpacity: 0.9, // 透明度
        strokeStyle: "dashed", // solid(实线)或dashed(虚线)
        enableEditing: false, // 是否可编辑
        enableClicking: true, // 是否可点击
    },
};

// 获取位置信息
function getLocationInfo(id) {
    const params = {
        encryptedData: encryptCBC(JSON.stringify({ id })),
    };
    ajaxRequest(
        dataUrl + "/backstage/digitalSignage/getTowersInfo",
        "POST",
        params,
        true,
        function () {},
        function (result) {
            console.log(result, "获取位置信息---");
            const { data } = result;

            crossingList = [];
            crossingListNew = [];
            cablewayList = [];
            towerList = [];

            if (data.cablewaTransVos.length > 0) {
                cablewayList = data.cablewaTransVos;
            } else {
                cablewayList = [];
            }
            if (data.towerInfoVos.length > 0) {
                towerList = data.towerInfoVos;
            } else {
                towerList = [];
            }
            if (data.spanInfoVos.length > 0) {
                crossingList = data.spanInfoVos;
            } else {
                crossingList = [];
                crossingListNew = [];
            }

            if (data.highwayList.length > 0) {
                highwayList = data.highwayList;
            } else {
                highwayList = [];
            }

            if (data.aThousandFieldsList.length > 0) {
                aThousandFieldsList = data.aThousandFieldsList;
            } else {
                aThousandFieldsList = [];
            }

            // 处理一下交叉信息
            if (crossingList && crossingList.length > 0) {
                crossingList.forEach((item) => {
                    if (item.lonAndLat && item.lonAndLat.indexOf(",") > -1) {
                        const lonAndLatList = item.lonAndLat.split(",");
                        lonAndLatList.forEach((lonAndLat, index) => {
                            const lonAndLatItem = lonAndLat.split("@");
                            crossingListNew.push({
                                baiduLon: lonAndLatItem[0],
                                baiduLat: lonAndLatItem[1],
                                ...item,
                            });
                        });
                    }
                });
            }
            initMap();
        },
        function (xhr) {
            error(xhr);
        }
    );
}

// 百度地图初始化
function initMap() {
    if (map) {
        map.clearOverlays();
        clearAllOverlays();
        map = null;
    }
    map = new BMapGL.Map("map-box");
    // 以第一个点为中心初始化地图
    map.centerAndZoom(new BMapGL.Point(intLng, intLat), 15, function () {
        map.setRotation(30);
    });

    map.setTilt(60); //设置地图的倾斜角度

    map.enableScrollWheelZoom(true); // 启用滚轮缩放

    var navigationControl = new BMapGL.NavigationControl3D();
    map.addControl(navigationControl);

    // 每次初始化的时候清除所有标点以及线
    map.clearOverlays();
    // map.clearLines();
    var styleJson = [
        // 隐藏道路
        {
            featureType: "highway",
            elementType: "all",
            stylers: { visibility: "off" },
        },
        {
            featureType: "arterial",
            elementType: "all",
            stylers: { visibility: "off" },
        },
        {
            featureType: "local",
            elementType: "all",
            stylers: { visibility: "off" },
        },
        {
            featureType: "railway",
            elementType: "all",
            stylers: { visibility: "off" },
        },

        // 保留背景、水域、绿地等（避免地图变空白）
        {
            featureType: "background",
            elementType: "all",
            stylers: { visibility: "on" },
        },
        {
            featureType: "water",
            elementType: "all",
            stylers: { visibility: "on" },
        },
        {
            featureType: "green",
            elementType: "all",
            stylers: { visibility: "on" },
        },

        // 保留标点和文字（避免自定义点被隐藏）
        {
            featureType: "point",
            elementType: "all",
            stylers: { visibility: "on" },
        },
        {
            featureType: "label",
            elementType: "all",
            stylers: { visibility: "on" },
        },
    ];

    if (isMap) {
        // map.setMapType(BMAP_EARTH_MAP); // 地球模式
        map.setMapType(BMAP_SATELLITE_MAP); // 地球模式
        // map.setDisplayOptions({
        //     poiText: false, // 隐藏POI文字
        //     poiIcon: false, // 隐藏POI图标
        //     building: false, // 隐藏建筑物
        // });
    } else {
        map.setMapType(BMAP_NORMAL_MAP); // 普通模式

        // 增加不是纯白的背景色
        map.setMapStyleV2({
            styleJson: [
                {
                    featureType: "background",
                    elementType: "all",
                    stylers: { color: "#f5f5f5" },
                },
            ],
        });
    }

    if (isMap) {
        map.setMapStyleV2({
            styleJson,
        });
    }

    setTimeout(() => {
        addAllMapPoints();
        addMapLine();
        addMapAThousandFields();
    }, 1000);
}

// 添加标点
function addAllMapPoints() {
    map.clearOverlays();
    // 清除地图上所有现有的标记
    // const bounds = [];
    const bounds = [];
    // 使用对象记录已添加的点，避免重复
    const addedPoints = {};
    const iconTypeList = {
        // 1: "../../img/digitalSignage/icon_three.png",
        1: "../../img/digitalSignage/icon_three_new.png",
        // 2: "../../img/digitalSignage/icon_two.png",
        2: "../../img/digitalSignage/icon_two_new.png",
        // 3: "../../img/digitalSignage/icon_five.png",
        3: "../../img/digitalSignage/icon_five_new.png",
        // 4: "../../img/digitalSignage/icon_seven.png",
        // 4: "../../img/digitalSignage/icon_purple.png",
        4: "../../img/digitalSignage/icon_seven_new.png",
        // 5: "../../img/digitalSignage/icon_four.png",
        5: "../../img/digitalSignage/icon_four_new.png",
        // 6: "../../img/digitalSignage/icon_six.png",
        6: "../../img/digitalSignage/zt_orange.png",
        7: "../../img/digitalSignage/zt_red.png",
        8: "../../img/digitalSignage/zt_red.png", // 新增的工序
        9: "../../img/digitalSignage/zt_red.png",
        10: "../../img/digitalSignage/zt_green.png",
        // 0: "../../img/digitalSignage/icon_one.png",
        0: "../../img/digitalSignage/icon_one_new.png",
        12: "../../img/digitalSignage/sd.png",
        20: "../../img/digitalSignage/project.png",
        // 21: "../../img/digitalSignage/zt_white.png",
        21: "../../img/digitalSignage/zt_gary.png",
    };

    // 绘制索道标点

    const getPointKey = (lon, lat) => {
        return `${parseFloat(lon).toFixed(6)},${parseFloat(lat).toFixed(6)}`;
    };
    if (cablewayList && cablewayList.length > 0) {
        cablewayList.forEach((pointData, index) => {
            // const pointKey = `117.132663,31.877325`;
            // const pointKey = getPointKey(
            //     pointData.baiduLon,
            //     pointData.baiduLat
            // );

            // // // 如果该坐标点已经添加过标记，则跳过
            // if (addedPoints[pointKey]) {
            //     console.warn(`重复的点坐标被跳过: ${pointKey}`);
            //     return;
            // }

            // addedPoints[pointKey] = true;

            if (
                pointData.cablewaTransPointVoList &&
                pointData.cablewaTransPointVoList.length > 0
            ) {
                const point = new BMapGL.Point(
                    pointData.cablewaTransPointVoList[0].lng,
                    pointData.cablewaTransPointVoList[0].lat
                );
                // const point = new BMapGL.Point(117.132663, 31.877325);
                bounds.push(point);

                // 检查图标是否存在，不存在则使用默认图标
                const iconUrl = iconTypeList[12]; // 默认使用第一个图标
                const myIcon = new BMapGL.Icon(
                    iconUrl,
                    new BMapGL.Size(20, 20),
                    {
                        anchor: new BMapGL.Size(10, 20), // 修正锚点位置为中心底部
                        imageSize: new BMapGL.Size(20, 20), // 与实际图片尺寸一致
                    }
                );

                const marker = new BMapGL.Marker(point, { icon: myIcon });

                // 添加信息窗口

                let infoContent = "";

                // 索道
                infoContent = `
             <div class="map-container">
                 <h4>
                    索道运输
                 </h4>
                 <div class="map-container-item-ropeway">
                     <span>索道位置</span>
                     <span>${pointData.towerName}</span>
                 </div>
                 <div class="map-container-item-ropeway">
                     <span>索道长度</span>
                     <span>${pointData.cablewayLength} KM</span>
                 </div>
                 <div class="map-container-item-ropeway">
                     <span>最大载重</span>
                     <span>${pointData.maxHeight} kg</span>
                 </div>
                 <div class="map-container-item-ropeway">
                     <span>安全距离</span>
                     <span>${pointData.safetyDistance} m</span>
                 </div>
                 <div class="map-container-item-ropeway">
                     <span>最大坡度</span>
                     <span>${pointData.maxSlope} °</span>
                 </div>
                 <div class="map-container-item-ropeway">
                     <span>索道宽度</span>
                     <span>${pointData.cablewayWidth} m</span>
                 </div>
             </div>`;

                // 创建信息窗口，禁用默认样式
                const infoWindow = new BMapGL.InfoWindow(infoContent, {
                    width: 0, // 宽度设为0，让内容决定宽度
                    height: 0, // 高度设为0，让内容决定高度
                    offset: new BMapGL.Size(0, -20), // 调整偏移量
                    enableAutoPan: true, // 自动平移地图
                    enableCloseOnClick: true, // 点击地图不关闭
                });

                marker.addEventListener("click", function () {
                    this.openInfoWindow(infoWindow);

                    // 移除百度地图默认添加的三角箭头
                    setTimeout(() => {
                        const infoWindowElements =
                            document.getElementsByClassName("BMap_bubble_pop");
                        if (infoWindowElements.length > 0) {
                            const popup = infoWindowElements[0];
                            // 移除箭头元素
                            const arrows =
                                popup.getElementsByClassName(
                                    "BMap_bubble_arrow"
                                );
                            while (arrows[0]) {
                                arrows[0].parentNode.removeChild(arrows[0]);
                            }
                            // 移除百度地图添加的额外样式
                            popup.style.background = "none";
                            popup.style.border = "none";
                            popup.style.boxShadow = "none";
                        }
                    }, 50);
                });

                map.addOverlay(marker);
            }
        });
    }

    // 绘制项目部
    if (intLng && intLat) {
        const pointKey = getPointKey(intLng, intLat);
        // // 如果该坐标点已经添加过标记，则跳过
        if (addedPoints[pointKey]) {
            console.warn(`重复的点坐标被跳过: ${pointKey}`);
            return;
        }
        addedPoints[pointKey] = true;
        const point = new BMapGL.Point(intLng, intLat);
        bounds.push(point);
        const iconUrl = iconTypeList[20];
        const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(20, 20), {
            anchor: new BMapGL.Size(10, 20), // 修正锚点位置为中心底部
            imageSize: new BMapGL.Size(20, 20), // 与实际图片尺寸一致
        });

        const marker = new BMapGL.Marker(point, { icon: myIcon });

        // 索道
        infoContent = `
         <div class="map-container">
                 <h4>
                     ${projectTitle}
                 </h4>
         </div>`;

        // 创建信息窗口，禁用默认样式
        const infoWindow = new BMapGL.InfoWindow(infoContent, {
            width: 0, // 宽度设为0，让内容决定宽度
            height: 0, // 高度设为0，让内容决定高度
            offset: new BMapGL.Size(0, -20), // 调整偏移量
            enableAutoPan: true, // 自动平移地图
            enableCloseOnClick: true, // 点击地图不关闭
        });

        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow);

            // 移除百度地图默认添加的三角箭头
            setTimeout(() => {
                const infoWindowElements =
                    document.getElementsByClassName("BMap_bubble_pop");
                if (infoWindowElements.length > 0) {
                    const popup = infoWindowElements[0];
                    // 移除箭头元素
                    const arrows =
                        popup.getElementsByClassName("BMap_bubble_arrow");
                    while (arrows[0]) {
                        arrows[0].parentNode.removeChild(arrows[0]);
                    }
                    // 移除百度地图添加的额外样式
                    popup.style.background = "none";
                    popup.style.border = "none";
                    popup.style.boxShadow = "none";
                }
            }, 50);
        });

        map.addOverlay(marker);
    }

    // 绘制杆塔
    if (towerList && towerList.length > 0) {
        // 存储所有覆盖物
        const overlays = [];

        // 进度状态对应的矩形颜色
        const progressColors = {
            0: "rgba(255, 0, 0, 0.3)", // 未开始 - 红色
            3: "rgba(255, 165, 0, 0.3)", // 进行中 - 橙色
            1: "rgba(0, 255, 0, 0.3)", // 已完成 - 绿色
            // 可以根据需要添加更多状态
        };

        towerList.forEach((pointData, index) => {
            const pointKey = getPointKey(
                pointData.baiduLon,
                pointData.baiduLat
            );

            // // 如果该坐标点已经添加过标记，则跳过
            if (addedPoints[pointKey]) {
                console.warn(`重复的点坐标被跳过: ${pointKey}`);
                return;
            }
            addedPoints[pointKey] = true;

            const point = new BMapGL.Point(
                pointData.baiduLon,
                pointData.baiduLat
            );
            bounds.push(point);

            // 1. 创建主标记点
            const iconUrl = iconTypeList[parseInt(pointData.towerProgress)];

            let X = 20;
            let Y = 20;
            let anchorX = 10;
            let anchorY = 20;
            // if ([1, 2, 3, 4, 5, 6, 0].includes(pointData.towerProgress)) {
            //     X = 14;
            //     Y = 33.75;
            //     anchorX = 7.5;
            //     anchorY = 30;
            // }
            const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(X, Y), {
                anchor: new BMapGL.Size(anchorX, anchorY),
                imageSize: new BMapGL.Size(X, Y),
            });

            const marker = new BMapGL.Marker(point, { icon: myIcon });
            map.addOverlay(marker);
            overlays.push(marker);

            if (pointData.towerProgress == 100) {
                const towerPouringVos = pointData.towerPouringVos;

                // 矩形大小（经纬度差值）
                const rectangleSize = 0.0015; // 可根据需要调整

                // 计算矩形四个顶点坐标
                const rectanglePoints = [
                    new BMapGL.Point(
                        point.lng - rectangleSize,
                        point.lat - rectangleSize
                    ), // 西南(A)
                    new BMapGL.Point(
                        point.lng - rectangleSize,
                        point.lat + rectangleSize
                    ), // 西北(B)
                    new BMapGL.Point(
                        point.lng + rectangleSize,
                        point.lat + rectangleSize
                    ), // 东北(C)
                    new BMapGL.Point(
                        point.lng + rectangleSize,
                        point.lat - rectangleSize
                    ), // 东南(D)
                ];

                // 1. 绘制完整矩形背景
                const backgroundRect = new BMapGL.Polygon(rectanglePoints, {
                    strokeColor: "#333", // 边框颜色
                    strokeWeight: 1, // 边框粗细
                    strokeOpacity: 0.8, // 边框透明度
                    fillColor: "rgba(200, 200, 200, 0.2)", // 背景色
                    fillOpacity: 0.4, // 背景透明度
                });
                map.addOverlay(backgroundRect);
                overlays.push(backgroundRect);

                // 2. 在四个顶点添加彩色小圆点
                towerPouringVos.forEach((e, index) => {
                    const cornerColor =
                        progressColors[e.finishStatus] || "#888"; // 默认灰色

                    // 创建圆形覆盖物
                    const circle = new BMapGL.Circle(
                        rectanglePoints[index],
                        20,
                        {
                            // 5米半径
                            strokeColor: cornerColor,
                            strokeWeight: 2,
                            strokeOpacity: 0.8,
                            fillColor: cornerColor,
                            fillOpacity: 1,
                            // 设置zIndex使圆点显示在最上层
                            enableEditing: false,
                            enableMassClear: false,
                        }
                    );
                    map.addOverlay(circle);
                    overlays.push(circle);
                });
            }

            if (pointData.towerProgress == 100) {
                // 矩形大小（经纬度差值）
                const rectangleSize = 0.0015; // 可根据需要调整
                // 计算矩形四个顶点坐标
                const rectanglePoints = [
                    new BMapGL.Point(
                        point.lng - rectangleSize,
                        point.lat - rectangleSize
                    ), // 西南(A)
                    new BMapGL.Point(
                        point.lng - rectangleSize,
                        point.lat + rectangleSize
                    ), // 西北(B)
                    new BMapGL.Point(
                        point.lng + rectangleSize,
                        point.lat + rectangleSize
                    ), // 东北(C)
                    new BMapGL.Point(
                        point.lng + rectangleSize,
                        point.lat - rectangleSize
                    ), // 东南(D)
                ];

                // 1. 绘制完整矩形背景
                const backgroundRect = new BMapGL.Polygon(rectanglePoints, {
                    strokeColor: "#333", // 边框颜色
                    strokeWeight: 1, // 边框粗细
                    strokeOpacity: 0.8, // 边框透明度
                    fillColor: "rgba(200, 200, 200, 0.2)", // 背景色
                    fillOpacity: 0.4, // 背景透明度
                });
                map.addOverlay(backgroundRect);
                overlays.push(backgroundRect);

                // 2. 在四个顶点添加彩色小圆点
                const cornerColor = progressColors[1] || "#888"; // 默认灰色

                // 创建圆形覆盖物

                rectanglePoints.forEach((e) => {
                    const circle = new BMapGL.Circle(e, 20, {
                        // 5米半径
                        strokeColor: cornerColor,
                        strokeWeight: 2,
                        strokeOpacity: 0.8,
                        fillColor: cornerColor,
                        fillOpacity: 1,
                        // 设置zIndex使圆点显示在最上层
                        enableEditing: false,
                        enableMassClear: false,
                    });
                    map.addOverlay(circle);
                    overlays.push(circle);
                });
            }

            // 3. 添加信息窗口
            let infoContent = `
            <div class="map-container">
                <h4>${pointData.towerName}</h4>
                <div class="map-container-item">
                    <span>协调完成</span>
                    <span>${pointData.time1 || "/"}</span>
                </div>
                <div class="map-container-item">
                    <span>基础开挖</span>
                    <span>${pointData.time2 || "/"}</span>
                </div>
                <div class="map-container-item">
                    <span>基础开挖完成</span>
                    <span>${pointData.time3 || "/"}</span>
                </div>
                <div class="map-container-item">
                    <span>基础浇筑</span>
                    <span>${pointData.time4 || "/"}</span>
                </div>
                <div class="map-container-item">
                    <span>基础浇筑完成</span>
                    <span>${pointData.time5 || "/"}</span>
                </div>
                <div class="map-container-item">
                    <span>铁塔组立</span>
                    <span>${pointData.time6 || "/"}</span>
                </div>
                <div class="map-container-item">
                    <span>铁塔组立完成</span>
                    <span>${pointData.time7 || "/"}</span>
                </div>
                <div class="map-container-item">
                    <span>架线施工</span>
                    <span>${pointData.time8 || "/"}</span>
                </div>
                <div class="map-container-item">
                    <span>架线施工完成</span>
                    <span>${pointData.time9 || "/"}</span>
                </div>
                <div class="map-container-item">
                    <span>附件安装完成</span>
                    <span>${pointData.time10 || "/"}</span>
                </div>
            </div>`;

            const infoWindow = new BMapGL.InfoWindow(infoContent, {
                width: 0,
                height: 0,
                offset: new BMapGL.Size(0, -20),
                enableAutoPan: true,
                enableCloseOnClick: true,
            });

            marker.addEventListener("click", function () {
                this.openInfoWindow(infoWindow);
                setTimeout(() => {
                    const infoWindowElements =
                        document.getElementsByClassName("BMap_bubble_pop");
                    if (infoWindowElements.length > 0) {
                        const popup = infoWindowElements[0];
                        const arrows =
                            popup.getElementsByClassName("BMap_bubble_arrow");
                        while (arrows[0]) {
                            arrows[0].parentNode.removeChild(arrows[0]);
                        }
                        popup.style.background = "none";
                        popup.style.border = "none";
                        popup.style.boxShadow = "none";
                    }
                }, 50);
            });

            // 4. 添加标签
            let offset = new BMapGL.Size(-8, -18);
            if (index % 2 == 0) {
                offset = new BMapGL.Size(-12, -58);
            } else {
                offset = new BMapGL.Size(-12, 24);
            }
            const label = new BMapGL.Label(pointData.towerName, {
                position: point,
                offset: offset,
            });
            map.addOverlay(label);
            overlays.push(label);
            label.setStyle({
                color: "#fff",
                fontSize: "8px",
                backgroundColor: "rgba(0, 0, 0, 0.5)",
                border: "none",
                padding: "0 1px",
                // border: "1px solid #ccc",
                boxShadow: "0 0 2px 0 rgba(0, 0, 0, 0.5)",
                // borderRadius: "4px",
            });
        });

        // 添加清除覆盖物的方法（如果需要）
        function clearOverlays() {
            overlays.forEach((overlay) => map.removeOverlay(overlay));
        }
    }

    // 绘制交叉跨越
    if (crossingListNew.length > 0) {
        crossingListNew.forEach((pointData, index) => {
            const pointKey = getPointKey(
                pointData.baiduLon,
                pointData.baiduLat
            );

            // // 如果该坐标点已经添加过标记，则跳过
            if (addedPoints[pointKey]) {
                console.warn(`重复的点坐标被跳过: ${pointKey}`);
                return;
            }
            addedPoints[pointKey] = true;
            const point = new BMapGL.Point(
                pointData.baiduLon,
                pointData.baiduLat
            );
            bounds.push(point);

            // 检查图标是否存在，不存在则使用默认图标
            const iconUrl = iconTypeList[21]; // 默认使用第一个图标
            const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(20, 20), {
                anchor: new BMapGL.Size(10, 20), // 修正锚点位置为中心底部
                imageSize: new BMapGL.Size(20, 20), // 与实际图片尺寸一致
            });

            const marker = new BMapGL.Marker(point, { icon: myIcon });

            // 添加信息窗口
            let infoContent = "";

            // 交叉信息
            infoContent = `
                    <div class="map-container-cross">
                        <div class="map-container-1 map-container">
                            <h4>
                                ${pointData.towerInfoVo.towerName}
                            </h4>
                             <div class="map-container-item">
                                <span>协调完成</span>
                                <span>${
                                    pointData.towerInfoVo.time1 || "/"
                                }</span>
                            </div>
                            <div class="map-container-item">
                                <span>基础开挖</span>
                                <span>
                                ${pointData.towerInfoVo.time2 || "/"}
                                </span>
                            </div>
                            <div class="map-container-item">
                                <span>基础开挖完成</span>
                                <span>
                                ${pointData.towerInfoVo.time3 || "/"}
                                </span>
                            </div>
                            <div class="map-container-item">
                                <span>基础浇筑</span>
                                <span>
                                ${pointData.towerInfoVo.time4 || "/"}
                                </span>
                            </div>
                            <div class="map-container-item">
                                <span>基础浇筑完成</span>
                                <span>
                                ${pointData.towerInfoVo.time5 || "/"}
                                </span>
                            </div>
                            <div class="map-container-item">
                                <span>铁塔组立</span>
                                <span>
                                ${pointData.towerInfoVo.time6 || "/"}
                                </span>
                            </div>
                            <div class="map-container-item">
                                <span>铁塔组立完成</span>
                                <span>
                                ${pointData.towerInfoVo.time7 || "/"}
                                </span>
                            </div> 
                            <div class="map-container-item">
                                <span>架线施工</span>
                                <span>
                                ${pointData.towerInfoVo.time8 || "/"}
                                </span>
                            </div>
                            <div class="map-container-item">
                                <span>架线施工完成</span>
                                <span>
                                ${pointData.towerInfoVo.time9 || "/"}
                                </span>
                            </div>
                            <div class="map-container-item">
                                <span>附件安装完成</span>
                                <span>
                                ${pointData.towerInfoVo.time10 || "/"}
                                </span>
                            </div>
                        </div>
                        <div  class="map-container-2 map-container">
                            <h4>
                                交叉跨越信息 ( ${pointData.spanTowerName} )
                            </h4>
                            <div class="map-container-item-ropeway">
                                <span>上层线路</span>
                                <span>${pointData.upperLine}</span>
                            </div>
                            <div class="map-container-item-ropeway">
                                <span>下层线路</span>
                                <span>${pointData.lowerLine}</span>
                            </div>
                            <div class="map-container-item-ropeway">
                                <span>交叉角度</span>
                                <span>${pointData.intersectionAngle} °</span>
                            </div>
                            <div class="map-container-item-ropeway">
                                <span>垂直距离</span>
                                <span>${pointData.verticalDistance} m</span>
                            </div>
                            <div class="map-container-item-ropeway">
                                <span>安全裕度</span>
                                <span>${pointData.safetyMargin} °</span>
                            </div>
                        </div>
                    </div>`;

            // 创建信息窗口，禁用默认样式
            const infoWindow = new BMapGL.InfoWindow(infoContent, {
                width: 0, // 宽度设为0，让内容决定宽度
                height: 0, // 高度设为0，让内容决定高度
                offset: new BMapGL.Size(0, -20), // 调整偏移量
                enableAutoPan: true, // 自动平移地图
                enableCloseOnClick: true, // 点击地图不关闭
            });

            marker.addEventListener("click", function () {
                this.openInfoWindow(infoWindow);

                // 移除百度地图默认添加的三角箭头
                setTimeout(() => {
                    const infoWindowElements =
                        document.getElementsByClassName("BMap_bubble_pop");
                    if (infoWindowElements.length > 0) {
                        const popup = infoWindowElements[0];
                        // 移除箭头元素
                        const arrows =
                            popup.getElementsByClassName("BMap_bubble_arrow");
                        while (arrows[0]) {
                            arrows[0].parentNode.removeChild(arrows[0]);
                        }
                        // 移除百度地图添加的额外样式
                        popup.style.background = "none";
                        popup.style.border = "none";
                        popup.style.boxShadow = "none";
                    }
                }, 50);
            });

            map.addOverlay(marker);
        });
    }

    // 调整视野使所有点可见

    if (bounds.length > 0) {
        map.setViewport(calculateBounds(bounds), {
            zoomFactor: 0.5, // 可选：缩放系数（0-1，值越小视野越大）
        });
    }
}

function clearAllOverlays() {
    map.clearOverlays();
    // 清除可能遗留的自定义覆盖物
    const customOverlays = document.querySelectorAll(".BMap_customOverlay");
    customOverlays.forEach((overlay) => overlay.remove());
}

function calculateBounds(points) {
    console.log(points, "points999");
    var lngs = points.map((p) => p.lng);
    var lats = points.map((p) => p.lat);
    var minLng = Math.min(...lngs);
    var maxLng = Math.max(...lngs);
    var minLat = Math.min(...lats);
    var maxLat = Math.max(...lats);
    return new BMapGL.Bounds(
        new BMapGL.Point(minLng, minLat),
        new BMapGL.Point(maxLng, maxLat)
    );
}

// 添加标点折线（智能绘制虚实线）
function addMapLine() {
    // 存储所有线段
    const segments = [];
    // 绘制杆塔线
    if (towerList.length > 0) {
        for (let i = 0; i < towerList.length - 1; i++) {
            const startPoint = towerList[i];
            const endPoint = towerList[i + 1];

            let lineColor = "";
            let lineStyle = "";
            if (
                // (startPoint.towerProgress === 8 &&
                //     endPoint.towerProgress === 9) ||
                // (startPoint.towerProgress === 8 &&
                //     endPoint.towerProgress === 8) ||
                // (startPoint.towerProgress === 9 && endPoint.towerProgress === 8)

                startPoint.towerProgress === 8 &&
                endPoint.towerProgress === 8
            ) {
                lineColor = "#FFFF00";
                lineStyle = "solid";
            } else if (
                endPoint.existSpan === 1 &&
                startPoint.existSpan === 1 &&
                startPoint.towerProgress != 9 &&
                endPoint.towerProgress != 9 &&
                startPoint.towerProgress != 8 &&
                endPoint.towerProgress != 8 &&
                startPoint.towerProgress != 10 &&
                endPoint.towerProgress != 10
            ) {
                lineColor = "#d81e06";
                lineStyle = "dashed";
            } else if (
                (startPoint.towerProgress === 9 &&
                    endPoint.towerProgress === 9) ||
                (startPoint.towerProgress === 10 &&
                    endPoint.towerProgress === 10)
            ) {
                lineColor = "#d81e06"; // 黄色
                lineStyle = "solid";
            } else {
                lineColor = "#fff";
                lineStyle = "dashed";
            }

            // 创建线段点数组
            const segmentPoints = [
                new BMapGL.Point(startPoint.baiduLon, startPoint.baiduLat),
                new BMapGL.Point(endPoint.baiduLon, endPoint.baiduLat),
            ];

            // 设置线段样式
            const segmentOptions = {
                strokeColor: lineColor, // 根据类型获取颜色
                strokeWeight: config.polyline.strokeWeight,
                strokeOpacity: config.polyline.strokeOpacity,
                enableEditing: config.polyline.enableEditing,
                enableClicking: config.polyline.enableClicking,
                strokeStyle: lineStyle,
            };

            // 创建线段并添加到数组
            segments.push(new BMapGL.Polyline(segmentPoints, segmentOptions));
        }
    }

    // 绘制交叉线路
    if (crossingListNew.length > 0) {
        for (let i = 0; i < crossingListNew.length - 1; i++) {
            const startPoint = crossingListNew[i];
            const endPoint = crossingListNew[i + 1];

            // 创建线段点数组
            const segmentPoints = [
                new BMapGL.Point(startPoint.baiduLon, startPoint.baiduLat),
                new BMapGL.Point(endPoint.baiduLon, endPoint.baiduLat),
            ];

            // 设置线段样式
            const segmentOptions = {
                strokeColor: "#800080", // 根据类型获取颜色
                strokeWeight: config.polyline.strokeWeight,
                strokeOpacity: config.polyline.strokeOpacity,
                enableEditing: config.polyline.enableEditing,
                enableClicking: config.polyline.enableClicking,
                strokeStyle: "solid",
            };

            // 创建线段并添加到数组
            segments.push(new BMapGL.Polyline(segmentPoints, segmentOptions));
        }
    }

    // 绘制索道线
    if (cablewayList.length > 0) {
        cablewayList.forEach((pointData) => {
            if (
                pointData.cablewaTransPointVoList &&
                pointData.cablewaTransPointVoList.length > 0
            ) {
                for (
                    let j = 0;
                    j < pointData.cablewaTransPointVoList.length - 1;
                    j++
                ) {
                    const startPoint = pointData.cablewaTransPointVoList[j];
                    const endPoint = pointData.cablewaTransPointVoList[j + 1];

                    const segmentPoints = [
                        new BMapGL.Point(startPoint.lng, startPoint.lat),
                        new BMapGL.Point(endPoint.lng, endPoint.lat),
                    ];

                    const segmentOptions = {
                        strokeColor: "#262fc9", // 根据类型获取颜色
                        strokeWeight: config.polyline.strokeWeight,
                        strokeOpacity: config.polyline.strokeOpacity,
                        enableEditing: config.polyline.enableEditing,
                        enableClicking: config.polyline.enableClicking,
                        strokeStyle: "solid",
                    };

                    segments.push(
                        new BMapGL.Polyline(segmentPoints, segmentOptions)
                    );
                }
            }
        });
    }

    // 绘制公路线
    if (highwayList.length > 0) {
        for (let i = 0; i < highwayList.length; i++) {
            if (highwayList[i].cablewaTransPointVoList.length > 0) {
                for (
                    let j = 0;
                    j < highwayList[i].cablewaTransPointVoList.length - 1;
                    j++
                ) {
                    const startPoint =
                        highwayList[i].cablewaTransPointVoList[j];
                    const endPoint =
                        highwayList[i].cablewaTransPointVoList[j + 1];

                    // 创建线段点数组
                    const segmentPoints = [
                        new BMapGL.Point(startPoint.lng, startPoint.lat),
                        new BMapGL.Point(endPoint.lng, endPoint.lat),
                    ];

                    // 设置线段样式
                    const segmentOptions = {
                        strokeColor: "#FFFF00", // 根据类型获取颜色
                        strokeWeight: config.polyline.strokeWeight,
                        strokeOpacity: config.polyline.strokeOpacity,
                        enableEditing: config.polyline.enableEditing,
                        enableClicking: config.polyline.enableClicking,
                        strokeStyle: "solid",
                    };

                    // 创建线段并添加到数组
                    segments.push(
                        new BMapGL.Polyline(segmentPoints, segmentOptions)
                    );
                }
            }
        }
    }

    // 将所有线段添加到地图
    segments.forEach((segment) => map.addOverlay(segment));
}

// 根据点类型获取线段颜色
function getSegmentColor(startPoint, endPoint) {
    // 如果两点类型相同，使用该类型对应颜色
    if (startPoint.type === endPoint.type) {
        switch (startPoint.type) {
            case 1:
                return "#3388ff"; // 类型1蓝色
            case 2:
                return "#ff9900"; // 类型2橙色
            case 3:
                return "#33cc33"; // 类型3绿色
            default:
                return config.polyline.strokeColor;
        }
    }
    // 类型不同使用默认颜色
    return config.polyline.strokeColor;
}

// 绘制牵张场地区域图
function addMapAThousandFields() {
    if (aThousandFieldsList.length > 0) {
        aThousandFieldsList.forEach((item) => {
            if (
                item.cablewaTransPointVoList &&
                item.cablewaTransPointVoList.length > 0
            ) {
                let points = [];
                // 根据sort字段排序 防止点位顺序不一致
                item.cablewaTransPointVoList.forEach((j) => {
                    points.push(new BMapGL.Point(j.lng, j.lat));
                });

                if (points.length > 0) {
                    // // 2. 创建折线连接这些点位
                    var polyline = new BMapGL.Polyline(points, {
                        strokeColor: "#0C14CA", // 线颜色
                        strokeWeight: 4, // 线宽
                        strokeOpacity: 0.8, // 线透明度
                    });
                    map.addOverlay(polyline);

                    // 绘制区域
                    var polygon = new BMapGL.Polygon(points, {
                        strokeColor: "#00FFFF", // 线颜色
                        strokeWeight: 4, // 线宽
                        strokeOpacity: 0.8, // 线透明度
                        fillColor: "#00FFFF", // 填充颜色
                        fillOpacity: 0.3, // 填充透明度
                    });
                    // polygonView = polygon;
                    map.addOverlay(polygon);
                }
            }
        });
    }
}
// 获取组织树数据
function getOrgTreeData() {
    ajaxRequest(
        dataUrl + "/backstage/digitalSignage/getProTree",
        "POST",
        {},
        true,
        function () {},
        function (result) {
            console.log(result, "组织机构树数据获取成功---");

            const { data } = result;

            // 判断是否有工程 有的话取第一个
            if (data && data.length > 0) {
                setSpreadToNodes(data);
                treeData = data;
                // 获取第一个工程
                if (
                    data[0].children &&
                    data[0].children.length > 0 &&
                    data[0].children[0].children &&
                    data[0].children[0].children.length > 0
                ) {
                    nodeId = data[0].children[0].children[0].id;

                    if (
                        data[0].children[0].children[0].lon &&
                        data[0].children[0].children[0].lat
                    ) {
                        intLng = data[0].children[0].children[0].lon;
                        intLat = data[0].children[0].children[0].lat;
                        projectTitle = data[0].children[0].children[0].title;
                    }

                    if (treeData[0].children[0].children[0].title) {
                        projectTitle =
                            treeData[0].children[0].children[0].title;
                        $(".center-title-box").text(projectTitle + "作战图");
                    }

                    // getScrollData(nodeId);
                    $(".project-overview-content").text(
                        treeData[0].children[0].children[0].projectOverview ||
                            "暂无"
                    );
                    getLegendData(nodeId);
                    getLocationInfo(nodeId);
                } else {
                    initMap();
                }
            }
        },
        function (xhr) {
            error(xhr);
        }
    );
}
getOrgTreeData();
// 递归
function setSpreadToNodes(nodes, spreadValue = true) {
    if (!nodes || !Array.isArray(nodes)) return;

    nodes.forEach((node) => {
        node.spread = spreadValue;

        if (node.children && node.children.length > 0) {
            setSpreadToNodes(node.children, spreadValue);
        }
    });
}
// 获取左上角滚动数据源
function getScrollData(id) {
    const scrollData = [
        {
            name: "跨线路",
            location: "N11-N12999",
            content: [
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
            ],
        },
        {
            name: "跨越地点",
            location: "N11-N12336",
            content: [
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
            ],
        },
        {
            name: "跨越地点",
            location: "N11-N128885",
            content: [
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
            ],
        },
        {
            name: "跨越地点",
            location: "N11-N128773",
            content: [
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
            ],
        },
    ];
    const params = {
        encryptedData: encryptCBC(JSON.stringify({ id })),
    };
    ajaxRequest(
        dataUrl + "/backstage/digitalSignage/getThreeSpans",
        "POST",
        params,
        true,
        function () {},
        function (result) {
            // console.log(result, "左上角滚动数据获取成功---");

            const { data } = result;

            let scrollBox = $(".content-wrapper");
            let innerHtml = "";
            if (data && data.length > 0) {
                data.forEach((item) => {
                    let describeHtml = "";
                    if (item.spanType === "跨线路") {
                        describeHtml += `
                        <i>上层线路：${item.upperLine || "/"}</i>
                        <i>下层线路: ${item.lowerLine || "/"}</i>
                        <i>交叉角度: ${item.intersectionAngle || "/"}</i>
                        <i>垂直距离: ${item.verticalDistance || "/"}</i>
                        <i>安全裕度: ${item.safetyMargin || "/"}</i>
                        `;
                    } else if (item.spanType === "跨公路") {
                        describeHtml += `
                        <i>垂直净距：${item.verticalClearDistance || "/"} m</i>
                        <i>杆塔间距: ${item.towerSpacing || "/"} m</i>
                        <i>公路宽度: ${item.highwayWidth || "/"} m</i>
                        `;
                    } else if (item.spanType === "跨铁路") {
                        describeHtml += `
                        <i>垂直净距：${item.verticalClearDistance || "/"} m</i>
                        <i>杆塔间距: ${item.towerSpacing || "/"} m</i>
                        <i>交叉角度: ${item.intersectionAngle || "/"} °</i>
                        `;
                    } else {
                    }

                    // 单行数据
                    innerHtml += `
                        <div class="flex-box content-item">
                            <span>${item.spanType}</span>
                            <span>
                                <img src="../../img/digitalSignage/warning.png" alt="">
                                ${item.towerName} - ${item.nextTowerName}
                            </span>
                            <span>${describeHtml}</span>
                        </div>
                         `;
                });
                $(".scroll-box").show();
                scrollBox.html(innerHtml);
            } else {
                $(".scroll-box").hide();
            }
        },
        function (xhr) {
            error(xhr);
        }
    );
}

// 获取左下角图例数据源
function getLegendData(id) {
    const params = {
        encryptedData: encryptCBC(JSON.stringify({ id })),
    };

    ajaxRequest(
        dataUrl + "/backstage/digitalSignage/getTowerProgressNum",
        "POST",
        params,
        true,
        function () {},
        function (result) {
            const { data } = result;

            if (data) {
                Object.values(data).forEach((value, index) => {
                    legendData[index].value = value;
                });
            }

            const legendBox = $(".legend-box");
            let innerHtml = "";
            legendData.forEach((item, index) => {
                innerHtml += `
                        <div class="legend-item">
                            <img src="${item.icon}" alt="">
                            <span>${item.name}</span>
                            <span>${item.value}</span>
                        </div>
                        `;
            });
            legendBox.html(innerHtml);
        },
        function (xhr) {
            error(xhr);
        }
    );
}

document.addEventListener("DOMContentLoaded", function () {
    const scrollContent = document.getElementById("scrollContent");
    const originalContent = scrollContent.querySelector(".content-wrapper");
    const cloneContent = scrollContent.querySelector(".clone-content");

    // 克隆原始内容到克隆容器
    cloneContent.innerHTML = originalContent.innerHTML;

    // 设置滚动动画
    let scrollPosition = 0;
    const scrollSpeed = 20; // 滚动速度(像素/秒)
    let lastTimestamp = 0;

    function animateScroll(timestamp) {
        if (!lastTimestamp) lastTimestamp = timestamp;
        const deltaTime = timestamp - lastTimestamp;
        lastTimestamp = timestamp;

        // 计算新的滚动位置
        scrollPosition += (scrollSpeed * deltaTime) / 1000;

        // 获取内容总高度
        const contentHeight = originalContent.scrollHeight;

        // 当滚动到克隆内容的开始时，重置位置以实现无缝衔接
        if (scrollPosition >= contentHeight) {
            scrollPosition = 0;
        }

        // 应用滚动
        scrollContent.scrollTop = scrollPosition;

        // 继续动画
        requestAnimationFrame(animateScroll);
    }

    // 启动动画
    requestAnimationFrame(animateScroll);

    // // 鼠标悬停时暂停滚动
    // scrollContent.addEventListener("mouseenter", function () {
    //     scrollSpeed = 0;
    // });

    // scrollContent.addEventListener("mouseleave", function () {
    //     scrollSpeed = 30; // 恢复原始速度
    // });

    const drawer = document.querySelector(".right-drawer-box");
    const openBtn = document.querySelector(".open-drawer-box");
    const closeBtn = document.querySelector(".close-drawer-btn");

    // 点击三角按钮打开抽屉
    openBtn.addEventListener("click", function () {
        drawer.classList.add("open");

        layui.use(["tree", "jquery"], function () {
            var tree = layui.tree;
            var $ = layui.jquery;

            // 初始化组织树
            function initOrgTree() {
                // 渲染树形结构
                tree.render({
                    elem: "#orgTree", // 绑定元素
                    id: "orgTree", // 自定义索引
                    data: treeData, // 获取数据
                    showCheckbox: false, // 是否显示复选框
                    isJump: false, // 是否允许点击节点时弹出新窗口
                    accordion: true, // 是否开启手风琴模式
                    edit: false, // 是否开启节点的操作图标
                    onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
                    click: function (obj) {
                        console.log(obj.data);
                        // 判断是否是叶子节点（没有子节点或子节点数组为空）
                        if (
                            !obj.data.children ||
                            obj.data.children.length === 0
                        ) {
                            setActiveNode(obj.elem);
                            nodeId = obj.data.id;
                            intLng = obj.data.lon;
                            intLat = obj.data.lat;
                            projectTitle = obj.data.title;
                            $(".center-title-box").text(
                                projectTitle + "作战图"
                            );
                            $(".project-overview-content").text(
                                obj.data.projectOverview || "暂无"
                            );
                            // getScrollData(nodeId);
                            getLegendData(nodeId);
                            getLocationInfo(nodeId);
                        } else {
                        }
                    },
                    done: function () {
                        console.log("树准备完毕");
                        expandToNodeId(nodeId);
                    },
                });
            }

            initOrgTree();
            setActiveNodeNew(nodeId);

            function setActiveNode(elem) {
                $("#orgTree")
                    .find(".layui-tree-click")
                    .removeClass("layui-tree-click");
                $(elem).addClass("layui-tree-click");
            }

            function setActiveNodeNew(nodeId) {
                $("#orgTree")
                    .find('[data-id="' + nodeId + '"]')
                    .addClass("layui-tree-click");
            }
        });
    });

    // 点击关闭按钮关闭抽屉
    closeBtn.addEventListener("click", function () {
        drawer.classList.remove("open");
    });

    // 点击抽屉外部关闭抽屉（可选）
    document.addEventListener("click", function (e) {
        if (
            drawer.classList.contains("open") &&
            !drawer.contains(e.target) &&
            e.target !== openBtn
        ) {
            drawer.classList.remove("open");
        }
    });

    const switchBtnItemMap = document.querySelector(".map-btn");
    const switchBtnItemMix = document.querySelector(".mix-btn");
    if (isMap) {
        switchBtnItemMap.classList.add("active");
    }
    switchBtnItemMap.addEventListener("click", function () {
        getLocationInfo(nodeId);
        switchBtnItemMap.classList.add("active");
        switchBtnItemMix.classList.remove("active");
        isMap = true;
    });
    switchBtnItemMix.addEventListener("click", function () {
        getLocationInfo(nodeId);
        switchBtnItemMix.classList.add("active");
        switchBtnItemMap.classList.remove("active");
        isMap = false;
    });

    // 点击全屏图标时  使地图盒子全屏
    const fullScreenBtn = document.querySelector(".full-screen-btn");
    fullScreenBtn.addEventListener("click", function () {
        if (document.fullscreenElement) {
            // 退出全屏
            document.exitFullscreen();
        } else {
            // 进入全屏
            document.documentElement.requestFullscreen();
            // 遍历树形结构数据把数据全部更改为第一个工程
            if (
                treeData[0].children &&
                treeData[0].children.length > 0 &&
                treeData[0].children[0].children &&
                treeData[0].children[0].children.length > 0
            ) {
                nodeId = treeData[0].children[0].children[0].id;
                if (
                    treeData[0].children[0].children[0].lon &&
                    treeData[0].children[0].children[0].lat
                ) {
                    intLng = treeData[0].children[0].children[0].lon;
                    intLat = treeData[0].children[0].children[0].lat;
                }

                if (treeData[0].children[0].children[0].title) {
                    projectTitle = treeData[0].children[0].children[0].title;
                    $(".center-title-box").text(projectTitle + "作战图");
                }

                // getScrollData(nodeId);
                $(".project-overview-content").text(
                    treeData[0].children[0].children[0].projectOverview ||
                        "暂无"
                );
                getLegendData(nodeId);
                getLocationInfo(nodeId);
            } else {
                initMap();
            }
        }
    });

    // 设置当鼠标移入工程概况时，并且判断当前是否溢出，溢出时预览框显示
    const projectOverviewBox = document.querySelector(".project-overview-box");
    const projectOverviewContent = document.querySelector(
        ".project-overview-content"
    );
    const projectOverviewPreviewBox = document.querySelector(
        ".project-overview-preview-box"
    );
    projectOverviewBox.addEventListener("mouseenter", function () {
        if (
            projectOverviewContent.scrollHeight >
            projectOverviewContent.clientHeight
        ) {
            projectOverviewPreviewBox.style.display = "block";
            projectOverviewPreviewBox.innerHTML =
                projectOverviewContent.innerHTML;
        } else {
            projectOverviewPreviewBox.style.display = "none";
            projectOverviewPreviewBox.innerHTML = "";
        }
    });
    projectOverviewBox.addEventListener("mouseleave", function () {
        projectOverviewPreviewBox.style.display = "none";
        projectOverviewPreviewBox.innerHTML = "";
    });
});