<!--骑手分布图-->
<!DOCTYPE html>
<html lang="zh">
<#include "/include/header.html">
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <#include "/include/left.html">
        <!--End 左侧导航-->
        <!--头部信息-->
        <#include "/include/topbar.html">
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="panel" style="margin-bottom: auto">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        组合条件筛选
                                    </h3>
                                </div>
                                <!--组合条件组件-->
                                <#include "/include/table/table-query.html">
                            </div>
                            <!--快速搜索框-->
                            <div class="card-body" style="padding: 10px 15px">

                                <!--Bootstarp Table插入-->
                                <div id="id_map_container" style="width: 100%;height: 800px;">

                                </div>

                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<script type="text/javascript" src="https://oss.tcjskd.com/delivery/upload/js/bootstrap.min.js"></script>
<!-- bootstrap-table插件 -->
<script src="https://oss.tcjskd.com/delivery/upload/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<!--<script src="https://oss.tcjskd.com/delivery/upload/plugin/bootstrap-table/bootstrap-table-fixed-columns.min.js"></script>-->
<script src="https://oss.tcjskd.com/delivery/upload/plugin/bootstrap-table/bootstrap-editable.min.js"></script>
<script src="https://oss.tcjskd.com/delivery/upload/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<!--时间处理插件-->
<script src="https://oss.tcjskd.com/delivery/upload/js/moment.min.js"></script>
<script src="https://oss.tcjskd.com/delivery/upload/js/daterangepicker.js"></script>
<!--按钮提示插件-->
<script src="https://oss.tcjskd.com/delivery/upload/js/perfect-scrollbar.min.js"></script>
<!--消息提示-->
<script src="https://oss.tcjskd.com/delivery/upload/js/bootstrap-notify.min.js"></script>
<script src="https://oss.tcjskd.com/delivery/upload/js/lightyear.js"></script>
<!--对话框-->
<script src="https://oss.tcjskd.com/delivery/upload/js/jconfirm/jquery-confirm.min.js"></script>
<script src="https://oss.tcjskd.com/delivery/upload/js/main.min.js"></script>
<!--时间选择插件-->
<script src="https://oss.tcjskd.com/delivery/upload/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="https://oss.tcjskd.com/delivery/upload/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="https://oss.tcjskd.com/delivery/upload/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<script src="https://oss.tcjskd.com/delivery/upload/js/steps.min.js"></script>
<!--文件上传插件-->
<script src="https://oss.tcjskd.com/delivery/upload/plugin/filepond/filepond.min.js"></script>
<script src="https://oss.tcjskd.com/delivery/upload/plugin/filepond/filepond-plugin-image-preview.min.js"></script>
<!--百度地图javascript插件-->
<!--<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=qYAvYLyukAHFRkILUQZj8GjVz9hvdhkO"></script>-->
<!--Layui时间日期控件-->
<script src="https://oss.tcjskd.com/delivery/upload/plugin/laydate/laydate.js"></script>
<!--<script src="https://oss.tcjskd.com/delivery/upload/js/print.min.js"></script>-->
<!--下拉搜索控件-->
<script src="https://oss.tcjskd.com/delivery/upload/plugin/bootstrap-select/bootstrap-select.min.js"></script>
<script src="https://oss.tcjskd.com/delivery/upload/plugin/bootstrap-select/defaults-zh_CN.min.js"></script>
<!--Bootstrap搜索提示插件-->
<script src="https://oss.tcjskd.com/delivery/upload/js/bootstrap3-typeahead.min.js"></script>
<script src = 'https://webapi.amap.com/maps?v=2.0&key=f4be0087d607755fa5ff2dbe302f1b13'></script>
<script type="text/javascript">
    /**
     * 初始化地图
     * @type {AMap.Map}
     */
    let map = new AMap.Map('id_map_container', {
        zoom: 12,
        center: [116.469881, 39.993599],
        showIndoorMap: false,
    });
    /**
     * 加载定位控件
     **/
    map.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
            position:'RB',    //定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            panToLocation:true,
            zoomToAccuracy: false,   //定位成功后是否自动调整地图视野到定位点

        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status,result){
            if(status=='complete'){
                //console.log("状态：",status);
                //console.log("数据：",result);
                //onComplete(result)
            }else{
                lightyear.notify("定位失败，无法获取您的位置信息！", 'danger');
            }
        });
    });
    /**
     * 加载点坐标绘制控件
     **/
    let cluster;
    map.plugin(["AMap.MarkerCluster"], function () {
        cluster = new AMap.MarkerCluster(map, [], {
            gridSize: 80, // 聚合网格像素大小
            renderMarker: function (obj) {
                let courier = obj.data[0].courier;
                let address = obj.data[0].address;
                obj.marker.setIcon("https://oss.tcjskd.com/delivery/upload/image/courier/image_now_icon_40.png");
                obj.marker.setTitle(address)
                obj.marker.setLabel({
                    content: courier.courierName + "("+courier.courierGender+")" + courier.courierPhone+"<br>"+
                        courier.courierType+"-"+courier.courierAuth+"-"+courier.courierPayStatus,
                    direction: "top"
                });
                document.getElementById("js_load").style.display = "none";
            }
        });
    });

    /**
     * 绘制在线骑手位置
     * @param query
     */
    function drawCourier(query){
        document.getElementById("js_load").style.display = "inline";
        $.ajax({
            data: query,
            type: "GET",
            url: "${ctx}/courier/map/get/list",
            success : function (res) {
                if(res.status!==200){
                    document.getElementById("js_load").style.display = "none";
                    lightyear.notify(res.message, 'danger');
                    return;
                }
                let points=[];
                for (const item of res.body) {
                    points.push({
                        lnglat: [item.address.lng, item.address.lat],
                        courier: item.courier,
                        address: item.address.address
                    });
                    cluster.setData(points);
                    if(points.length===1){
                        console.log()
                        map.setCenter(points[0].lnglat);
                    }
                    // 加载点聚合插件
                }
                document.getElementById("js_load").style.display = "none";
            },
            error : function (XMLHttpRequest, textStatus, errorThrown){
                document.getElementById("js_load").style.display = "none";
                if (textStatus===412){
                    lightyear.notify("会话超时，请重新登陆或刷新页面。", 'danger');
                    return;
                }
                lightyear.notify("系统繁忙，请尝试重新登陆。", 'danger');
            }
        });
    }
</script>
<script>
    /**
     * 检索并绘制骑手位置
     */
    function search(){
        let query={
        <#list pageTemplate.tableQuery as block>
            ${block.name}:$("#${block.id}").val(),
        </#list>
        }
        drawCourier(query);
    }
    function tableReset(form_id) {
        $("#"+form_id)[0].reset();
        $('#'+form_id+' .selectpicker').selectpicker('refresh');
        search();
    };
</script>
<script>
    window.onload = function(){
        //search();
        drawCourier({courierId:-1,courierType:"",courierPayStatus:"",courierStatus:"",courierAuth:"",transportVehicle:"",courierAuthVehicle:"",jobStatus:""});
        //绘制骑手位置
        //document.getElementById("js_load").style.display = "none";
    }
</script>
</body>
</html>