{layout name="layout1" /}
<style>
    .map-container {
        padding: 15px;
        min-height: calc(100vh - 60px);
    }
    .map-header {
        background: #fff;
        padding: 15px 20px;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .map-header-left {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .map-header-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }
    .map-header-stats {
        display: flex;
        gap: 20px;
        align-items: center;
    }
    .stat-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 15px;
        background: #f8f9ff;
        border-radius: 6px;
    }
    .stat-label {
        font-size: 13px;
        color: #666;
    }
    .stat-value {
        font-size: 16px;
        font-weight: bold;
        color: #4A70F4;
    }
    .map-search-box {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .map-search-input {
        width: 300px;
    }
    #maplocation {
        width: 100%;
        height: calc(100vh - 200px);
        min-height: 600px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        background: #f5f5f5;
    }
    /* 头像标记点样式 */
    .tmap-marker-avatar {
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        object-fit: cover;
    }
    .info-window {
        padding: 10px;
        min-width: 150px;
    }
    .info-window-title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        margin-bottom: 8px;
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
    }
    .info-window-item {
        font-size: 12px;
        color: #666;
        margin: 5px 0;
        line-height: 1.6;
    }
    .info-window-item strong {
        color: #333;
        margin-right: 5px;
    }
    .map-controls {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 1000;
        background: #fff;
        padding: 10px;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    .map-control-btn {
        display: block;
        width: 100%;
        margin-bottom: 8px;
        padding: 8px 15px;
        text-align: center;
        background: #4A70F4;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.3s;
    }
    .map-control-btn:hover {
        background: #3a5fd4;
    }
    .map-control-btn:last-child {
        margin-bottom: 0;
    }
    .map-legend {
        position: absolute;
        bottom: 20px;
        left: 20px;
        z-index: 1000;
        background: rgba(255,255,255,0.95);
        padding: 12px 15px;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        font-size: 12px;
        color: #666;
    }
    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 5px 0;
    }
    .legend-color {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
</style>
<div class="map-container">
    <!-- 地图头部 -->
    <div class="map-header">
        <div class="map-header-left">
            <div class="map-header-title">用户位置分布图</div>
            <div class="map-header-stats">
                <div class="stat-item">
                    <span class="stat-label">总用户数:</span>
                    <span class="stat-value" id="total-users">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">已定位:</span>
                    <span class="stat-value" id="located-users">0</span>
                </div>
            </div>
        </div>
        <div class="map-search-box">
            <input type="text" id="search_key" class="layui-input map-search-input" placeholder="请输入地名搜索">
<!--            <button class="layui-btn layui-btn-normal searchKey">搜索</button>-->
            <button class="layui-btn layui-btn-primary" id="reset-map">重置视图</button>
        </div>
    </div>

    <!-- 地图容器 -->
    <div style="position: relative;">
        <div id="maplocation"></div>
        
        <!-- 地图控制按钮 -->
        <div class="map-controls">
            <button class="map-control-btn" id="zoom-in">放大</button>
            <button class="map-control-btn" id="zoom-out">缩小</button>
            <button class="map-control-btn" id="fit-bounds">适应所有标记</button>
            <button class="map-control-btn" id="clear-markers">清除标记</button>
        </div>

        <!-- 图例 -->
        <div class="map-legend">
            <div style="font-weight: bold; margin-bottom: 8px; color: #333;">图例</div>
            <div class="legend-item">
                <div class="legend-color" style="background: #4A70F4;"></div>
                <span>用户位置</span>
            </div>
        </div>
    </div>
</div>

<script src="/static/webjs/jquery.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service,tools&key=EVOBZ-VX7YU-QKJVR-BVESA-AVFT3-7JBWG" onload="console.log('腾讯地图API脚本加载完成')" onerror="console.error('腾讯地图API脚本加载失败')"></script>

<script>
layui.config({
    version:"{$front_version}",
    base: '/static/plug/layui-admin/dist/layuiadmin/'
}).extend({
    index: 'lib/index'
}).use(['index'], function(){
    var $ = layui.$;
    
    // 用户数据（将从后端获取）
    var users = [];
    var markers = null;
    var map = null;
    var geocoder = null;
    var infoWindows = [];
    var defaultCenter = null; // 默认中心点（贵阳）
    var defaultZoom = 12;
    var markerClickHandler = null; // 保存点击事件处理函数

    // 初始化地图
    function initMap() {
        try {
            // 检查TMap是否已加载
            if (typeof TMap === 'undefined') {
                console.error('腾讯地图API未加载');
                layer.msg('地图加载失败，请刷新页面重试', {icon: 2, time: 3000});
                return;
            }

            // 初始化默认中心点
            if (!defaultCenter) {
                defaultCenter = new TMap.LatLng(26.647, 106.63); // 默认中心点（贵阳）
            }

            console.log('开始初始化地图...');
            map = new TMap.Map('maplocation', {
                zoom: defaultZoom,
                center: defaultCenter
            });

            console.log('地图对象创建成功');

            // 初始化标记点（样式将在渲染时动态创建）
            markers = new TMap.MultiMarker({
                map: map,
                styles: {},
                geometries: []
            });

            console.log('标记点对象创建成功');

            // 初始化地理编码服务
            geocoder = new TMap.service.Geocoder();

            // 等待地图加载完成
            map.on('complete', function() {
                console.log('地图加载完成');

                // 加载用户数据
                setTimeout(function() {
                    if (typeof loadUsers === 'function') {
                        loadUsers();
                    } else {
                        console.error('loadUsers函数未定义');
                    }
                }, 500);
            });
            
            // 备用方案：如果complete事件没有触发，延迟后直接初始化
            setTimeout(function() {
                console.log('备用方案：延迟调用loadUsers()');
                if (typeof loadUsers === 'function') {
                    loadUsers();
                } else {
                    console.error('loadUsers函数未定义');
                }
            }, 3000);
            
            // 监听地图错误
            map.on('error', function(e) {
                console.error('地图错误:', e);
                layer.msg('地图加载出错，请刷新页面重试', {icon: 2, time: 3000});
            });

        } catch (error) {
            console.error('地图初始化失败:', error);
            layer.msg('地图初始化失败：' + error.message, {icon: 2, time: 3000});
        }
    }

    // 加载用户数据
    function loadUsers() {
        if (typeof $ === 'undefined') {
            console.error('jQuery未加载');
            return;
        }
        
        $.ajax({
            url: '{:url("BulletinBoard/getUserMap")}',
            type: 'GET',
            dataType: 'json',
            success: function(res) {
                console.log('用户数据响应:', res);
                if (res.code === 1 && res.data) {
                    users = res.data;
                    console.log('获取到用户数据:', users.length, '条');
                    updateStats();
                    renderMarkers();
                } else {
                    console.warn('获取用户数据失败:', res.msg);
                    layer.msg(res.msg || '获取用户数据失败', {icon: 2});
                    users = [];
                    updateStats();
                }
            },
            error: function(xhr, status, error) {
                console.error('请求失败:', xhr, status, error);
                console.error('响应内容:', xhr.responseText);
                layer.msg('请求失败，请稍后重试', {icon: 2});
                users = [];
                updateStats();
            }
        });
    }
    
    // 将loadUsers暴露到全局作用域，方便调试
    window.loadUsers = loadUsers;

    // 更新统计信息
    function updateStats() {
        var totalUsers = users.length;
        var locatedUsers = users.filter(function(u) {
            return u.lat && u.lng && u.lat != 0 && u.lng != 0;
        }).length;

        $('#total-users').text(totalUsers);
        $('#located-users').text(locatedUsers);
    }

    // 渲染标记点
    function renderMarkers() {
        if (!markers || !map) {
            console.warn('标记点或地图未初始化');
            return;
        }

        // 清除现有标记和信息窗口
        clearMarkers();

        var geometries = [];
        var validUsers = [];
        var markerStyles = {};

        // 过滤有效坐标的用户
        users.forEach(function(user, index) {
            if (!user.lat || !user.lng || user.lat == 0 || user.lng == 0) {
                return;
            }

            var lat = parseFloat(user.lat);
            var lng = parseFloat(user.lng);

            if (isNaN(lat) || isNaN(lng)) {
                console.warn('无效的经纬度:', user);
                return;
            }

            validUsers.push(user);

            // 为每个用户创建使用头像的标记点样式
            var styleId = 'avatar_' + (user.id || index);
            // 如果没有头像，使用默认标记图标
            var avatarUrl = user.avatar && user.avatar.trim() !== '' 
                ? user.avatar 
                : 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png';
            
            // 创建头像标记样式（圆形头像，带边框）
            markerStyles[styleId] = new TMap.MarkerStyle({
                width: 40,
                height: 40,
                anchor: {x: 20, y: 20},
                src: avatarUrl
            });

            // 创建标记点
            geometries.push({
                id: 'user_' + (user.id || index),
                position: new TMap.LatLng(lat, lng),
                styleId: styleId,
                properties: {
                    title: user.contact || user.name || '用户' + (user.id || index),
                    user: user
                }
            });
        });

        console.log('有效用户数:', validUsers.length, '标记点数:', geometries.length);

        // 更新标记样式和几何图形
        if (geometries.length > 0) {
            // 先更新样式
            markers.setStyles(markerStyles);
            // 再更新几何图形
            markers.updateGeometries(geometries);

            // 创建信息窗口（但不自动显示）
            createInfoWindows(validUsers);

            // 如果只有一个用户，居中显示
            if (validUsers.length === 1) {
                map.setCenter(new TMap.LatLng(validUsers[0].lat, validUsers[0].lng));
                map.setZoom(15);
            } else if (validUsers.length > 1) {
                // 适应所有标记
                fitBounds(validUsers);
            }
        } else {
            console.warn('没有有效的用户位置数据');
        }
    }

    // 创建信息窗口（但不立即添加到地图，只在点击时创建）
    function createInfoWindows(users) {
        // 先清除之前的事件监听器（如果存在）
        if (markers && markerClickHandler) {
            try {
                markers.off('click', markerClickHandler);
            } catch (e) {
                console.warn('移除事件监听器失败:', e);
            }
            markerClickHandler = null;
        }

        // 点击标记显示信息窗口
        markerClickHandler = function(evt) {
            var geometry = evt.geometry;
            if (geometry && geometry.properties) {
                // 关闭所有信息窗口
                infoWindows.forEach(function(item) {
                    if (item.window) {
                        try {
                            item.window.close();
                            if (item.window.destroy) {
                                item.window.destroy();
                            }
                        } catch (e) {
                            console.warn('关闭信息窗口失败:', e);
                        }
                    }
                });
                infoWindows = [];

                // 从 properties 中直接获取用户数据
                var user = geometry.properties.user;
                
                // 如果没有，尝试从全局 users 数组查找
                if (!user) {
                    var userId = geometry.id.replace('user_', '');
                    user = users.find(function(u) {
                        return (u.id || '').toString() === userId || users.indexOf(u).toString() === userId;
                    });
                }

                if (user) {
                    var lat = parseFloat(user.lat);
                    var lng = parseFloat(user.lng);

                    if (isNaN(lat) || isNaN(lng)) {
                        console.error('无效的经纬度:', user);
                        return;
                    }

                    var content = '<div class="info-window">' +
                        '<div class="info-window-title">' + (user.contact || user.name || '用户') + '</div>' +
                        '<div class="info-window-item"><strong>电话:</strong>' + (user.telephone || user.phone || '-') + '</div>' +
                        '<div class="info-window-item"><strong>地址:</strong>' + (user.address || '-') + '</div>';
                    content += '</div>';

                    // 只在点击时创建信息窗口
                    try {
                        var infoWindow = new TMap.InfoWindow({
                            map: map,
                            position: new TMap.LatLng(lat, lng),
                            content: content,
                            visible: true,
                            zIndex: 100
                        });

                        infoWindows.push({
                            window: infoWindow,
                            markerId: geometry.id
                        });
                    } catch (e) {
                        console.error('创建信息窗口失败:', e);
                        layer.msg('显示信息失败', {icon: 2});
                    }
                } else {
                    console.warn('未找到用户数据:', geometry.id);
                }
            } else {
                console.warn('标记点数据不完整:', geometry);
            }
        };
        
        // 绑定事件监听器
        if (markers && markerClickHandler) {
            markers.on('click', markerClickHandler);
        }
    }

    // 适应所有标记
    function fitBounds(users) {
        if (users.length === 0) return;

        var bounds = new TMap.LatLngBounds();
        users.forEach(function(user) {
            bounds.extend(new TMap.LatLng(parseFloat(user.lat), parseFloat(user.lng)));
        });

        map.fitBounds(bounds);
    }

    // 清除标记
    function clearMarkers() {
        if (markers) {
            markers.updateGeometries([]);
        }
        infoWindows.forEach(function(item) {
            if (item.window) {
                try {
                    item.window.close();
                    if (item.window.destroy) {
                        item.window.destroy();
                    } else if (item.window.setMap) {
                        item.window.setMap(null);
                    }
                } catch (e) {
                    console.warn('清除信息窗口失败:', e);
                }
            }
        });
        infoWindows = [];
    }

    // 搜索功能
    var searchService = {
        search: function(name) {
            if (!name || !name.trim()) {
                layer.msg('请输入搜索关键词', {icon: 0});
                return;
            }

            geocoder.getLocation({ address: name })
                .then(function(result) {
                    if (result && result.result && result.result.location) {
                        var location = result.result.location;
                        map.setCenter(location);
                        map.setZoom(15);

                        // 添加临时标记
                        markers.updateGeometries([{
                            id: 'search_result',
                            position: location,
                            styleId: 'marker'
                        }]);
                    } else {
                        layer.msg('未找到该地点', {icon: 0});
                    }
                })
                .catch(function(error) {
                    layer.msg('搜索失败：' + (error.message || '未知错误'), {icon: 2});
                });
        }
    };

    // 事件绑定
    $(document).on('click', '.searchKey', function() {
        var searchKey = $("#search_key").val();
        searchService.search(searchKey);
    });

    $('#search_key').on('keypress', function(e) {
        if (e.which === 13) {
            $('.searchKey').trigger('click');
        }
    });

    $('#reset-map').on('click', function() {
        map.setCenter(defaultCenter);
        map.setZoom(defaultZoom);
        renderMarkers();
    });

    $('#zoom-in').on('click', function() {
        map.setZoom(map.getZoom() + 1);
    });

    $('#zoom-out').on('click', function() {
        map.setZoom(map.getZoom() - 1);
    });

    $('#fit-bounds').on('click', function() {
        var validUsers = users.filter(function(u) {
            return u.lat && u.lng && u.lat != 0 && u.lng != 0;
        });
        if (validUsers.length > 0) {
            fitBounds(validUsers);
        } else {
            layer.msg('没有可显示的用户位置', {icon: 0});
        }
    });

    $('#clear-markers').on('click', function() {
        clearMarkers();
        layer.msg('已清除所有标记', {icon: 1});
    });

    // 等待腾讯地图API加载完成后再初始化
    var retryCount = 0;
    var maxRetries = 100; // 10秒
    
    function waitForTMap() {
        if (typeof TMap !== 'undefined' && typeof TMap.Map !== 'undefined') {
            // 延迟一下确保API完全加载
            setTimeout(function() {
                initMap();
            }, 300);
        } else {
            // 如果还没加载，等待一段时间后重试（最多等待10秒）
            if (retryCount < maxRetries) {
                retryCount++;
                setTimeout(waitForTMap, 100);
            } else {
                console.error('腾讯地图API加载超时');
                layer.msg('地图API加载超时，请刷新页面重试', {icon: 2, time: 3000});
            }
        }
    }
    // 初始化
    $(function() {
        // 等待地图API加载
        waitForTMap();
    });
});
</script>