{% load tj_filters %}

<link rel="stylesheet" href="//cache.amap.com/lbs/static/main1119.css" />
<script type="text/javascript" src="//cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript"
    src="//webapi.amap.com/maps?v=1.4.6&key=9db868ad8d169110c5643903108bdfac&plugin=AMap.MarkerClusterer&callback=onLoad"></script>

<ol class="breadcrumb">
    <li>物流查询</li>
    <li>窜货预警地图</li>
</ol>
<div>

    <form role="form" class="form-inline" style="margin-top:0px;padding-left:10px;">
        <div class="col-sm-2 input-group">
            <span class="input-group-addon">开始日期</span>
            <input class="datepicker form-control" id="dt_fr" />
        </div>
        <div class="col-sm-2 input-group">
            <span class="input-group-addon">结束日期</span>
            <input class="datepicker form-control" id="dt_to" />
        </div>
        <div class="col-sm-2 input-group">
            <span class='input-group-btn'>
                <a type="button" class='btn btn-primary btn-qry'>
                    <span class='glyphicon glyphicon-search' style='padding-right:5px;'></span>查找
                </a>
            </span>
        </div>
    </form>
    <div class="clearfix"></div>
    <div style="display: flex;justify-content: space-between;text-align: center;">
        <div class="panel panel-default" style="width: 23%">
            <div class="panel-heading">
                <h6 class="panel-title" style="font-size: 14px;">重点发现城市</h6>
            </div>
            <div class="panel-body">
				{% if cities %}
					{% for c in cities %}
					<p>{{c.name}} 发现数量：{{c.cnt}}</p>
					{% endfor %} 
				{% else %}
					<p>无</p>
				{% endif %}
            </div>
        </div>
        <div class="panel panel-default" style="width: 23%">
            <div class="panel-heading">
                <h6 class="panel-title" style="font-size: 14px;">重点发现经销商</h6>
            </div>
            <div class="panel-body">
				{% if agents %}
					{% for c in agents %}
					<p>{{c.name}} 发现数量：{{c.cnt}}</p>
					{% endfor %} 
				{% else %}
					<p>无</p>
				{% endif %}
            </div>
        </div>
        <div class="panel panel-default" style="width: 23%">
            <div class="panel-heading">
                <h6 class="panel-title" style="font-size: 14px;">重点发现产品</h6>
            </div>
            <div class="panel-body">
				{% if products %}
					{% for c in products %}
					<p>{{c.name}} 发现数量：{{c.cnt}}</p>
					{% endfor %} 
				{% else %}
					<p>无</p>
				{% endif %}
            </div>
        </div>
        <div class="panel panel-default" style="width: 23%">
            <div class="panel-heading">
                <h6 class="panel-title" style="font-size: 14px;">疑似窜货数量</h6>
            </div>
            <div class="panel-body">
                <b>{{allCnt}}</b>
            </div>
        </div>
    </div>
    <div id="mapContainer" style="height: 700px;"></div>
</div>

<script type="text/javascript">
    window.onLoad = function () {
        var map = new AMap.Map('mapContainer', {
            center: [116.397428, 39.90923],
            zoom: 4
        });
        var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
        var cluster = [];
        var markers = [];

        var points = {{ data|safe}};
        if (points.length > 0) {
            addMakers(points)
        }

        function receivePoints(result) {

        }


        function addMakers(result) {
            var marker;
            for (var i = 0; i < result.length; i++) {
                marker = new AMap.Marker({
                    position: bd_decrypt(result[i].lnglat),
                    icon: '//os.china315net.com/image/icon_danger2.png',
                })
                marker.content = '标签序号：<b>' + result[i].label_code + '</b></br>产品：' + result[i].product + '</br>经销商：' + result[i].agent +
                    '</br>扫码时间：' + result[i].tm + '</br>扫码地址：' + result[i].address +
                    '</br>超出授权范围距离：' + result[i].distance / 1000 + " 公里" + '';
                marker.on('click', markerClick);
                //marker.setMap(map);
                markers.push(marker);
            }
            console.log(markers);
            var count = markers.length;
            var _renderCluserMarker = function (context) {
                var factor = Math.pow(context.count / count, 1 / 18)
                var div = document.createElement('div');
                var Hue = 180 - factor * 180;
                var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
                var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
                var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
                var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
                div.style.backgroundColor = bgColor
                var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
                div.style.width = div.style.height = size + 'px';
                div.style.border = 'solid 1px ' + borderColor;
                div.style.borderRadius = size / 2 + 'px';
                div.style.boxShadow = '0 0 1px ' + shadowColor;
                div.innerHTML = context.count;
                div.style.lineHeight = size + 'px';
                div.style.color = fontColor;
                div.style.fontSize = '14px';
                div.style.textAlign = 'center';
                context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
                context.marker.setContent(div)
            }
            if (cluster.length > 0) {
                cluster.setMap(null);
            }
            cluster = new AMap.MarkerClusterer(map, markers, {
                gridSize: 80,
                renderCluserMarker: _renderCluserMarker
            });

        }

        function sendmessage(code, product, time, address) {

        }

        function markerClick(e) {
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
        }
        //百度坐标转高德
        function bd_decrypt(p) {
            var bd_lng = p[0];
            var bd_lat = p[1];
            var X_PI = Math.PI * 3000.0 / 180.0;
            var x = bd_lng - 0.0065;
            var y = bd_lat - 0.006;
            var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
            var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
            var gg_lng = z * Math.cos(theta);
            var gg_lat = z * Math.sin(theta);
            return [gg_lng, gg_lat]
        }

        $('.datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
        $('.datepicker').datepicker('setDate', new Date());
        setDatePickerZh();

        $('#dt_fr').val('{{date_from}}');
        $('#dt_to').val('{{date_to}}');

        $('.btn-qry').click(function () {
            var date_from, date_to;
            date_fr = $('#dt_fr').val();
            date_to = $('#dt_to').val();
            var params = [];
            if (date_fr != '') { params.push('date_from=' + date_fr) };
            if (date_to != '') { params.push('date_to=' + date_to) };

            if (params.length == 0) {
                bootbox.alert("请先输入查询条件！");
            } else {
                $.RefreshContent('{{request.path}}?' + params.join('&'));
            }
        });
	};


</script>