

<style>
    .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;
    }
</style>

<div>       
    <div class='bdmapscript'></div>
    <div id='bdmap-agt' style='height:400px;width:100%;'></div>
    
    {% ifequal user.company_id 1644 %}

    {% if not lng_lat %}
        <div style="text-align: center;font-weight: bold;font-size: 1.7rem;margin-top: 1rem;">
            当前暂未设置公司地理位置，点击屏幕即可设置公司位置。
        </div>

    {% else %}
        <div class="geo-title">
            公司位置
        </div>
        <div class="company-item" data-lng="{{lng_lat.0}}" data-lat="{{lng_lat.1}}">
            <b>经度:</b> {{lng_lat.0}} <b>纬度:</b> {{lng_lat.1}}
        </div>
    {% endif %}
    <div>
        <div class="geo-title" style="border-top: 1px solid #d5d5d5;">
            仓库列表
        </div>
        {% for i in stores %}
            <div class="storelist-item" data-lng="{{i.lnglat.0}}" data-lat="{{i.lnglat.1}}"> 
                <b>编号:</b>{{i.sn}}  
                <b>经度:</b> {{i.lnglat.0}}  
                <b>纬度:</b> {{i.lnglat.1}}  
                {% if i.tm_checked %}
                    已通过审核
                {% endif %}
            </div>
        {% endfor %}
        
    </div>
    {% endifequal %}

</div>

 

<script type='text/javascript'>
    $(document).ready(function(){   

        var marker;

        var lbl_style={
　　        //color : "white", //字体颜色
　　        fontSize : "16px",//字体大小 　
　　        backgroundColor :"0.05", //文本标注背景颜色
　　        border :"0", 　
　　        fontWeight :"bold" //字体加粗
        };

        $(document).on('click','.btn-confirm',function(){
            var p = marker.getPosition(); 
            $("#id_lng_lat").val(p.lng.toFixed(8)+","+p.lat.toFixed(8));
            $('#confirm-url-modal').modal('hide');
        });
     
        !function(mapInit) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://api.map.baidu.com/api?v=3.0&ak=ASl2xmUaYpjwdWy3GPBQbpUK&callback=mapinit";
            window['mapinit'] = function() {
                mapInit();
            };            
            $('#confirm-url-modal .bdmapscript').html(script);
        }(function() {     
            map = new BMap.Map('bdmap-agt');  
            map.centerAndZoom(new BMap.Point({{center.lng}},{{center.lat}}), {{zoom}});
            map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
            map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用  

            {% for s in stores %}            
                var p1 = new BMap.Point({{s.lnglat.0}}, {{s.lnglat.1}});
                {% if s.tm_checked %}
                    marker = new BMap.Marker(p1, {
                        icon: new BMap.Icon(
                            '/static/images/markerGreen.png',
                            new BMap.Size(30, 30),
                            {
                                imageSize: new BMap.Size(30, 30)
                            }

                        )
                    }); 
                {% else %}
                    marker = new BMap.Marker(p1, {
                            icon: new BMap.Icon(
                                '/static/images/markerRed.png',
                                new BMap.Size(30, 30),
                                {
                                    imageSize: new BMap.Size(30, 30)
                                }

                            )
                        }); 
                {% endif %}
                
                circle = new BMap.Circle(
                    p1,
                    500,
                    {
                        strokeColor: "blue",
                        strokeWeight: 2,
                        fillColor: "#E2E8F1",
                        fillOpacity: 0.6
                    }
                ); 

                var label=new BMap.Label('{{s.sn}}', {offset:new BMap.Size(20,0)});

                label.setStyle(lbl_style);
                marker.setLabel(label);                
                map.addOverlay(marker);   
                map.addOverlay(circle);  
                marker.addEventListener('click', function(){
                    this.openInfoWindow(new BMap.InfoWindow(
                        '<div>仓库编号：{{s.sn}}</div>'+
                        '<div>上报时间：{{s.tm}}</div>'+                        
                        '<div>核准时间：{{s.tm_checked}}</div>'                      
                    ));
                });   


            {% endfor %}




            {% if lng_lat %}    
                var p1 = new BMap.Point({{lng_lat.0}}, {{lng_lat.1}});
                marker = new BMap.Marker(p1, {
                        icon: new BMap.Icon(
                            '/static/images/company.png',
                            new BMap.Size(30, 30),
                            {
                                imageSize: new BMap.Size(30, 30)
                            }
                        )}
                );  // 创建标注
                var label=new BMap.Label($('#id_name').val(),{offset:new BMap.Size(30,0)});
                label.setStyle(lbl_style);
                marker.setLabel(label);                
                marker.enableDragging(); 

                map.addOverlay(marker);
                map.centerAndZoom(new BMap.Point({{lng_lat.0}},{{lng_lat.1}}), 15);
                setTimeout(function() {
                    map.panTo(new BMap.Point({{lng_lat.0}},{{lng_lat.1}}), 15);
                }, 1000);
            {% else %}
                map.addEventListener("click", function(e) {
                    if ($.isEmpty(marker)) {
                        var p1 = new BMap.Point(e.point.lng, e.point.lat);
                        marker = new BMap.Marker(p1);           // 创建标注
                        var label = new BMap.Label($('#id_name').val(),{offset:new BMap.Size(20,0)});
                        label.setStyle(lbl_style);
                        marker.setLabel(label);
                        
                        marker.enableDragging();
                        map.addOverlay(marker);                   
                    };
                });     
            {% endif %}   

            $('.storelist-item, .company-item').click(function(e) {
                var data = e.currentTarget.dataset;
                map.panTo(new BMap.Point(data.lng, data.lat), 15);
            })    

        });
        
    });

</script>



