var layer;

$(document).ready(function () {
    layui.use(['layer'], function () {
        layer = layui.layer;
    });
});

function initMap() {
    // 检查高德地图API是否加载成功
    if (typeof AMap === '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 = [116.404, 39.915]; // 高德地图使用数组格式[经度,纬度]
        map = new AMap.Map("map", {
            zoom: 12,
            center: defaultPoint
        });
        return;
    }

    // ========== 高德地图初始化与轨迹渲染 ==========
    // 1. 初始化地图
    var map = new AMap.Map("map", {
        zoom: 13,
        center: [116.404, 39.915] // 默认中心点
    });

    // 2. 获取轨迹点数据
    if (patrolRecordList.length === 0) {
        layer.msg("暂无轨迹数据！", {icon: 2});
        map.setZoom(14);
        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 = [lng, lat]; // 高德地图使用数组格式[经度,纬度]
        points.push(point);

        // 创建地图标记点
        var marker = new AMap.Marker({
            position: point,
            map: map
        });
        markers.push(marker);

        // 标记点弹窗信息
        var infoWindow = new AMap.InfoWindow({
            content: `
                <div style="font-size: 12px; line-height: 1.8; padding: 10px;">
                    <p><strong>巡检人：</strong>${record.createBy}</p>
                    <p><strong>巡检时间：</strong>${new Date(record.createTime).toLocaleString()}</p>
                    <p><strong>经纬度：</strong>${lat}, ${lng}</p>
                </div>
            `,
            offset: new AMap.Pixel(0, -30)
        });

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

        // 卡片点击事件：定位到对应标记点 + 高亮卡片
        cardElements[index].addEventListener("click", function () {
            // 移除所有卡片的active样式
            cardElements.forEach(el => el.classList.remove('active'));
            // 高亮当前卡片
            this.classList.add('active');
            // 地图中心定位到当前标记点
            map.setCenter(point);
            map.setZoom(15);
            // 显示标记点弹窗
            infoWindow.open(map, point);
            // 轻微动画效果（高德地图没有直接的bounce动画，可以使用跳动效果）
            marker.setAnimation('AMAP_ANIMATION_DROP');
        });
    });

    // 寻找points中间的点位作为中心点
    var midIndex = Math.floor(points.length / 2);
    var centerPoint = points[midIndex] || [116.404, 39.915];
    map.setCenter(centerPoint);

    // 4. 绘制轨迹折线
    var polyline = new AMap.Polyline({
        path: points,
        strokeColor: "#1890ff", // 主色调：蓝色
        strokeWeight: 6,        // 折线宽度
        strokeOpacity: 0.8,     // 透明度
        isOutline: true,
        outlineColor: '#ffffff',
        borderWeight: 1
    });
    map.add(polyline);

    // 5. 地图自适应所有轨迹点
    map.setFitView();

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

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