

<style>
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 20px 0 0;
    white-space: nowrap;
    }
    
    .company-item {
        margin: 1rem 0;
        font-size: 1.5rem;
        padding: 0.7rem 0;
        user-select: none;
    }
    .company-item:hover {
        background: #f5f5f5;
        cursor: pointer;
    }
    .company-item:active {
        background: #d5d5d5;
    }
    .storelist-item {
        margin: 1rem 0;
        font-size: 1.5rem;
        padding: 0.7rem 0;
        user-select: none;
    }
    .storelist-item:hover {
        background: #f5f5f5;
        cursor: pointer;
    }
    .storelist-item:active {
        background: #d5d5d5;
    }
    .geo-title {
        font-size: 1.3rem;
        font-weight: bold;
        margin-top: 0.5rem;
        padding: 0.3rem 0;
    }
	
	
        #r-result {
            background-color: #FFF;
            padding: 5px;
            font-size: 14px;
            border-radius: 5px;
            box-shadow:3px 3px 3px lightgray;
        }
        #searchResultPanel {
            border: 1px solid #C0C0C0;
            width: 200px;
            height: auto;
            display: none;
        }
        #suggestId {
            width: 200px;
            border: none;
            border-bottom: 1px solid lightgray;
            margin-left: 5px;
        }
    .tangram-suggestion-main{
        z-index: 10000;
    }
    #tb-series{
        width:100%;
    }


    #view_outlet_bdmap{
        display:inline-block;
        width:80%;
        height:690px;
        border:1px solid #ccc;
    }
    #bd_panel{
        display:inline-block;
        width:19%;
    }
    #bd_result{
        height:345px;
        overflow-y:scroll;
        border:1px solid #ccc;
    }
    #distance_result {
        height: 300px;
        overflow-y: scroll;
        border: 1px solid #ccc;
        border-top: none;
    }
    #outlets .btn-filter{
        margin-bottom:4px;
    }
    .nav_menu{
        border:none;
    }

    #tb-series img{
        height:30px;
    }
    #tb-distance td{
        white-space:normal;
        word-break:break-all;
        word-wrap:break-word;
    }

</style>

<div id='outlets'>    
    
    <div style='width:100%;'>
        <div id='bd_panel'>
            <div id="searchbox">
                <div id="searchbox-container" class="input-group">                    
                    <input id="sole-input" class="form-control" type="text" placeholder="地址模糊查询" value="">                        
                    <span class='input-group-btn'>  
                        <button type='button' class='btn btn-primary btn-qry'>搜索</button>        
                    </span>
                </div>
            </div>
            <div id='bd_result'>请在上面的文本框内输入您要查询的地址，点击“搜索”按钮或按回车键，查询结果将显示在这里。
                <br/>为获得更准确的查询结果，请将地图缩放到市、街级别，再进行搜索。              
            </div>
            <div id="marker_info">当前选择门店：<span id="marker_choose"></span></div>
            <div id='distance_result' style="width: 100%;">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div  class="table-responsive">
                        <table id='tb-distance'  class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <td style="width: 50%;">门店名称</td>
                            <td style="width: 50%;">步行距离(km)</td>
                        </tr>
                        </thead>
                        <tbody></tbody> 
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div id='view_outlet_bdmap'></div>
    </div>

    <div style="margin-top:20px;" class='div_tips'>
    
    </div>
    <div class="form-group ">
        <div class="col-sm-6">
            <div style='color:black;'>位置图标圆周半径设置：<input id='circle-radius' value='1500' style='width:90px;'>米
                <span style='padding-left:40px;'>门店状态:<select id="sel_status">
                    <option value=''>全部</option>
                    {% for s in status %}
                        <option value='{{s.id}}'>{{s.name}}</option>
                    {% endfor %}                    
                </select><button type='button' class='btn btn-primary btn-xs btn-filter'>确定</button</span>           
            </div> 
            <div style='margin-top:20px;'>在地图上<span style="color:red">双击</span>图标，显示指定半径的圆形<span style="color:red;">区域保护范围</span>。</div>
            <div class='distance' style='color:blue;margin-top:20px;'></div>
        </div>
        <div class='col-sm-6' >
            <table id='tb-series'></table>            
        </div>
    </div>
</div>

 

<script type='text/javascript'>
	var map;
    $(document).ready(function(){ 
        
        var table = $('#tb-distance').DataTable({
            dom: 'Bfrtip',
            autoWidth: true,
            buttons: [],
            iDisplayLength: 5, //每页初始显示5条记录,
            searching: false,
            language: lng,
            data: [],
            order: [[ 1, 'asc' ] ], 
            destroy: true,


        });

        table.columns().every(function () {
            var that = this;
            $('input', this.footer()).on('keyup change clear', function () {
                if (that.search() !== this.value) {
                    that.search(this.value).draw();
                }
            });
        });


        var zoom=9;  
        var marker,  circle, pt,polyline;  
        var pth='/media/{{user.company.name}}/series/icon/';
        var legends='<tr style="width:100%;"><td>门店状态</td>';
        {% for l in series_legends %}
            legends=legends+'<td>{{l.name}}</td>';  
        {% endfor %}
        legends=legends+'</tr>';
        {% for s in status %}
            {% ifequal s.id 4 %}
                legends=legends+'<tr><td style="color:#ED6D1F;font-weight:bold;">{{s.name}}</td>';
                {% for l in series_legends %}
                    legends=legends+'<td><img src="'+pth+'/orange/tree.png"></img></td>';    
                {% endfor %}
                legends=legends+'</tr>';                
            {% else %}
                legends=legends+'<tr><td style="color:{{s.color_code}};font-weight:bold;">{{s.name}}</td>';
                {% for l in series_legends %}
                    legends=legends+'<td><img src="'+pth+'/{{s.color_code}}/{{l.icon}}.png"></img></td>';    
                {% endfor %}
                legends=legends+'</tr>';
            {% endifequal %}
        
        {% endfor %}
        $('#tb-series').html(legends);

        var radius=$('#circle-radius').val();
        
        $('#circle-radius').change(function(){            
            window.circle.setRadius($(this).val());          
        });    
        window.polyline=polyline;
        var sel_markers = [], allMarkers = [],search_markers=[],all_search_markers=[];
        map = new BMap.Map('view_outlet_bdmap');
        map.centerAndZoom(new BMap.Point(116.404,39.915),9);

        map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));        
        map.addControl(new window.BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));
        map.addControl(new BMap.NavigationControl(
            {
                type : BMAP_NAVIGATION_CONTROL_LARGE , 
                anchor : BMAP_ANCHOR_TOP_LEFT,                 
            }
        ));


        map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();     //启用地图惯性拖拽，默认禁用

       
       

        var local = new BMap.LocalSearch(map, {
		    renderOptions: {map: map, panel: "bd_result"},
            onMarkersSet: function (res) {
                all_search_markers= []
                flag = true
                for (var r of res) {
                    allMarkers.push(r.marker)
                }
                for (var re of allMarkers) {
                    re.addEventListener("click", function (e) {
                        var _marker = e.currentTarget;
                        $("#marker_choose").html(_marker.getTitle());
                        map.removeOverlay(window.polyline);
                        if (search_markers.length == 0) {
                            map.removeOverlay(window.polyline);
                            search_markers.push(_marker);
                            $("#outlets .distance").html('');
                        } else {
                            if (search_markers[0] != _marker) {
                                var pt0 = search_markers[0].getPosition();
                                var pt1 = _marker.getPosition();
                                window.polyline = new BMap.Polyline([pt0, pt1],
                                    {strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.6}
                                );
                                map.addOverlay(window.polyline);
                                $("#outlets .distance").html('当前选择点之间步行距离：' + (map.getDistance(pt0, pt1)).toFixed(2) + '米');
                                search_markers = [];
                            }
                            ;
                        }
                        ;
                     });
                }
            }



	    });

        function search_address(add){
            if(add==''){
                toastr.error("请先输入您要查询的地址。", "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );                 
            }else{
                local.search(add);
            }
        };


        $('#outlets .btn-qry').click(function(){
            search_address($('#sole-input').val());
           
        });
        $('#sole-input').keydown(function (event) {
            if (event.keyCode == 13) {                
                search_address($(this).val());
            }            
        });            
        
        


        function set_infowin(marker){
            $.ajax({
                url: '/company/outlet/get/outlet/'+marker.id+'/',
                success: function(res) {
                    var o=res.data,html;
                    var c='';
                    if($.isEmpty(o.company.code)){
                        c='';
                    }else{
                        c=o.company.code+' ';
                    };
                    html="<div>"+
                        "<div style='font-weight:bold;'>门店名称："+o.name+"</div>"+
                        "<div>加 盟 商: "+c+o.company.name+"</div>"+
                        "<div>归属部门: "+o.dept+"</div>"+
                        "<div>查询老师: "+o.qry_teacher+"</div>"+
                        "<div>首查时间: "+o.qry_time+"</div>"+
                        "<div>授权品牌: "+o.series.name+"</div>"+
                        "<div>门店状态: "+o.status.name+"</div>"+
                        "<div>详细地址: "+o.address+"</div>"+
                        "<div>备注说明: "+o.remark+"</div>"+
                        "</div>";
                    marker.openInfoWindow(new BMap.InfoWindow(html));                    
                }   
            });            
        };

        function addCircle(map,pt){
            map.removeOverlay(window.circle);
            circle = new BMap.Circle(
                pt,
                radius,
                {
                    strokeColor: "blue",
                    strokeWeight: 1,
                    fillColor: "#1E90FF",
                    fillOpacity: 0.5
                }
            );
            map.addOverlay(circle);
            return circle;
        };    
        $('#outlets .btn-filter').click(function(){
            var status_id=$('#sel_status').val();
            refreshOutlets(status_id);
        });

        //默认刷新显示所有加盟商门店（不筛选加盟商状态）
        refreshOutlets('');

        createMarker = function(pt,icon) {
            var _marker = new BMap.Marker(pt,{icon:icon});
            _marker.addEventListener("click", function(e) { 
                $("#marker_choose").html(_marker.getTitle());
                map.removeOverlay(window.polyline);
                if(sel_markers.length==0){
                    map.removeOverlay(window.polyline);
                    sel_markers.push(_marker);
                    $("#outlets .distance").html('');
                }else{
                    if(sel_markers[0]!=_marker){
                        var pt0=sel_markers[0].getPosition();
                        var pt1=_marker.getPosition();
                        window.polyline = new BMap.Polyline(  [ pt0,pt1  ],
                            {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.6}
                        );           
                        map.addOverlay(window.polyline);     
                        $("#outlets .distance").html('当前选择点之间步行距离：'+(map.getDistance(pt0,pt1)).toFixed(2)+'米');
                        sel_markers=[];
                    };
                };
                set_infowin(_marker);
            });
            _marker.addEventListener("dblclick", function(e) {  
                pt=this.getPosition();
                window.circle=addCircle(map,pt);
                map.centerAndZoom(pt, 18);
                setTimeout(function() {map.panTo(pt, 18);}, 1000);
            });
            return _marker;
        };
        function refreshOutlets(status_id){         
            $.ajax({
                url: '/company/outlet/get/list/?status_id='+status_id,
                success: function(data) {
                    for(var i in allMarkers){
                        map.removeOverlay(allMarkers[i]);                    
                    };

                    var icon,marker;                         
                    for(var i in data.outlets){
                        o=data.outlets[i];      
                        pt = new BMap.Point(o.lnglat.lng, o.lnglat.lat);  
                        //icon = new BMap.Icon(pth+o.color.code+'/'+o.series.icon+'.png', new BMap.Size(60, 60));   


                        //2022-03-04 未加盟门店显示黄色 树形图标                        
                        if(o.status=='未加盟'){
                            icon = new   BMap.Icon(pth+'orange/tree.png', new BMap.Size(45, 45));  
                        }else{
                            icon = new   BMap.Icon(pth+o.color.code+'/'+o.series.icon+'.png', new BMap.Size(45, 45));   
                        };
                        

                        //icon = new   BMap.Icon(pth+o.color.code+'/'+o.series.icon+'.png', new BMap.Size(45, 45));  




                        marker=createMarker(pt,icon);
                        marker.setTitle(data.outlets[i].name)
                        allMarkers.push(marker);
                        marker.id=o.id;                       
                        //map.addOverlay(marker);
                    };   
                    var markerClusterer = new BMapLib.MarkerClusterer(
                        map, 
                        {
                            markers:allMarkers,
                            maxZoom:14 //比例尺500米
                        }
                    );
                    for (var iElement of allMarkers) {
                        if (iElement.K.Ce.imageUrl.indexOf("orange") != -1) {
                            iElement.addEventListener("click", function (e) {
                                table.clear().draw();
                                var _marker = e.currentTarget;
                                $("#marker_choose").html(_marker.getTitle());
                                var x = _marker.OA.lng;
                                var y = _marker.OA.lat;
                                if (x && y) {
                                    table.ajax.url("/obj/yzgj/bmapapi/distance/?lng=" + x + "&lat=" + y,) ;
                                    table.ajax.reload();
                                }


                            })
                        }

                    }
                }
            });        
        };   
        
    });

</script>


