var layer;

$(document).ready(function () {
    layui.use(['layer'], function () {
        layer = layui.layer;
    });
});
function initMap() {
    // 可删除代码开始
    // 检查百度地图API是否加载成功
    if (typeof BMapGL === 'undefined') {
        layer.msg("地图加载失败，请检查网络连接！", {icon: 2});
        return;
    }

    // 检查容器是否存在
    var mapContainer = document.getElementById("map");
    if (!mapContainer) {
        layer.msg("地图容器未找到！", {icon: 2});
        return;
    }

    // 检查数据
    if (!patrolRecordList || patrolRecordList.length === 0) {
        layer.msg("暂无轨迹数据！", {icon: 2});
        var defaultPoint = new BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(defaultPoint, 12);
        map.enableScrollWheelZoom(true);
        return;
    }
    //可删除代码结束

    // ========== 百度地图初始化与轨迹渲染 ==========
    // 1. 初始化地图
    var map = new BMapGL.Map("map");
    // 2. 获取轨迹点数据
    if (patrolRecordList.length === 0) {
        layer.msg("暂无轨迹数据！", {icon: 2});
        var defaultPoint = new BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(defaultPoint, 14);
        map.enableScrollWheelZoom(true);
        return;
    }


    // 3. 构造轨迹点数组和标记点数组
    var points = [];       // 轨迹折线点
    var markers = [];      // 地图标记点
    var cardElements = document.querySelectorAll('.track-card'); // 所有卡片元素



    patrolRecordList.forEach(function (record, index) {
        var lng = record.longitude;
        var lat = record.latitude;
        var point = new BMapGL.Point(lng, lat);
        points.push(point);

        // 创建地图标记点
        var marker = new BMapGL.Marker(point);
        markers.push(marker);

        // 标记点弹窗信息
        var infoWindow = new BMapGL.InfoWindow(`
                <div style="font-size: 12px; line-height: 1.8;">
                    <p><strong>点位名称：</strong>${record.pointName}</p>
                    <p><strong>巡检人：</strong>${record.createBy}</p>
                    <p><strong>巡检时间：</strong>${new Date(record.createTime).toLocaleString()}</p>
                    <p><strong>经纬度：</strong>${lat}, ${lng}</p>
                    <p><strong>轨迹点ID：</strong>${record.id}</p>
                </div>
            `);

        // 标记点点击事件：高亮对应卡片 + 显示弹窗
        marker.addEventListener("click", function () {
            // 移除所有卡片的active样式
            cardElements.forEach(el => el.classList.remove('active'));
            // 高亮当前卡片
            cardElements[index].classList.add('active');
            // 滚动到当前卡片
            cardElements[index].scrollIntoView({behavior: 'smooth', block: 'center'});
            // 显示弹窗
            this.openInfoWindow(infoWindow);
        });

        // 卡片点击事件：定位到对应标记点 + 高亮卡片
        cardElements[index].addEventListener("click", function () {
            // 移除所有卡片的active样式
            cardElements.forEach(el => el.classList.remove('active'));
            // 高亮当前卡片
            this.classList.add('active');
            // 地图中心定位到当前标记点
            map.centerAndZoom(point, 15);
            // 显示标记点弹窗
            marker.openInfoWindow(infoWindow);
            // 轻微动画效果
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);
            setTimeout(() => marker.setAnimation(null), 1500);
        });

        map.addOverlay(marker);
    });

    // 寻找points中间的点位
    var midIndex = Math.floor(points.length / 2);
    const centerPoint = points[midIndex] || new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(centerPoint, 13); // 14为地图缩放级别

    // 4. 绘制轨迹折线
    var polyline = new BMapGL.Polyline(points, {
        strokeColor: "#1890ff", // 主色调：蓝色
        strokeWeight: 6,        // 折线宽度
        strokeOpacity: 0.8,     // 透明度
        strokeStyle: 'solid'    // 实线
    });
    map.addOverlay(polyline);

    // // 5. 起点/终点特殊标记
    // // 起点标记
    // var startMarker = new BMapGL.Marker(points[0], {
    //     icon: new BMapGL.Icon("http://api.map.baidu.com/img/markers.png", new BMapGL.Size(25, 34), {
    //         offset: new BMapGL.Size(12, 34),
    //         imageOffset: new BMapGL.Size(0, 0) // 起点图标
    //     })
    // });
    // map.addOverlay(startMarker);
    // // startMarker.setLabel(new BMapGL.Label("起点：" + patrolRecordList[0].pointName, {
    // //     offset: new BMapGL.Size(30, -15),
    // //     styles: {fontSize: '12px', color: '#fff', background: '#52c41a', padding: '0px 14px', borderRadius: '3px'}
    // // }));
    // startMarker.setLabel(new BMapGL.Label("起点：" + patrolRecordList[0].pointName, {
    //     offset: new BMapGL.Size(30, -15),
    //     styles: {
    //         fontSize: '12px',
    //         color: '#fff',
    //         background: '#52c41a',
    //         padding: '8px 8px',  // 左右padding保持一致（14px），保证背景两侧空间对称
    //         borderRadius: '3px',
    //         textAlign: 'center'  // 新增：强制文字在背景内水平居中
    //     }
    // }));
    //
    // // 终点标记
    // var endMarker = new BMapGL.Marker(points[points.length - 1], {
    //     icon: new BMapGL.Icon("http://api.map.baidu.com/img/markers.png", new BMapGL.Size(25, 34), {
    //         offset: new BMapGL.Size(12, 34),
    //         imageOffset: new BMapGL.Size(-114, 0) // 终点图标
    //     })
    // });
    // map.addOverlay(endMarker);
    // endMarker.setLabel(new BMapGL.Label("终点：" + patrolRecordList[patrolRecordList.length - 1].pointName, {
    //     offset: new BMapGL.Size(30, -15),
    //     styles: {fontSize: '12px', color: '#fff', background: '#ff4d4f', padding: '0px 14px', borderRadius: '3px'}
    // }));

    // 6. 地图自适应所有轨迹点
    map.enableScrollWheelZoom(true); // 开启滚轮缩放
    map.setViewport(points); // 适配所有轨迹点

    // 7. 初始提示
    layer.msg("轨迹加载完成！点击卡片可定位到对应点位", {
        icon: 1,
        time: 3000,
        offset: ['20px', '20px']
    });
}

// 页面加载完成后初始化地图
window.onload = initMap;