<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-form-label-up {width: 100% !important; height: 30px !important; line-height: 30px !important; border: none !important; padding: 0px !important; font-size: 15px; background-color: transparent !important; text-align: left !important;}
        .layui-input-block-down {margin: 0px !important; left: 0px !important;}
        .layui-input-block-down .layui-form-select .layui-edge {top: 74%;}
    </style>
</head>
<body>
<div class="layui-anim layui-anim-fadein">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form layui-form-pane" lay-filter="dataForm">
                <div id="baiduMapContainer"></div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=mlfOah4gWM1FjEo9CmlI64zK6MhyiMPW"></script>
<script type="text/javascript" src="static/baidu-map/baidu-map-1.0.0.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script th:inline="javascript">
    layui.config({
        base: 'assets/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate', 'laytpl'], function(){
        var $ = layui.$;
        var $win = $(window);
        var form = layui.form;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var queryParams = top.restAjax.params(window.location.href);
        var gridId = queryParams.gridId;
        var centerPoint = {
            lng: [[${baiduMapProperties.centerLng}]],
            lat: [[${baiduMapProperties.centerLat}]]
        }

        var baiduMap = null;
        var gridMember = {
            users: [],
            gridArray: []
        }

        function closeBox() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }

        // 初始化网格背景
        function initGridBG(areaCode, callback) {
            var layIndex;
            top.restAjax.get(top.restAjax.path('api/grid/list/except/{gridId}', [gridId]), {
                areaCode: areaCode
            }, null, function(code, data) {
                var gridArray = [];
                for(var i = 0, item; item = data[i++];) {
                    var pointArray = [];
                    for(var j = 0, jItem; jItem = item.pointArray[j++];) {
                        pointArray.push(new BaiduMap.Point(jItem.lng, jItem.lat));
                    }
                    gridArray.push({
                        id: item.gridId,
                        label: item.gridName,
                        fillColor: '#ffffff',
                        pointArray: pointArray
                    })
                }

                baiduMap.initBackgroundGrid({
                    gridArray: gridArray
                });

                callback ? callback() : '';
            }, function(code, data) {
                top.dialog.msg(data.msg);
            }, function () {
                layIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
            }, function () {
                top.dialog.close(layIndex);
            });
        }

        function initMap(callback) {
            $('#baiduMapContainer').css({
                width: '100%',
                height: ($win.height() - 30) +'px'
            });
            baiduMap = new BaiduMap('baiduMapContainer', {
                single: true,
                onGridStartEdit: function(baiduMap) {
                    $('#confirmBtn').hide();
                },
                onGridStopEdit: function(gridArray) {
                    gridMember.gridArray = gridArray;
                    $('#confirmBtn').show();
                }
            });
            baiduMap.setCenterAndZoom(centerPoint, 14);
            var mapTypeControl = new BMap.MapTypeControl({
                mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
            });
            baiduMap.getMap().addControl(mapTypeControl);
            baiduMap.setBoundary([[${baiduMapProperties.boundary}]]);
            baiduMap.setDefaultConfig();
            baiduMap.initGridOptionEvent();
            baiduMap.initColorOption();
            callback ? callback() : '';
        }

        // 初始化内容
        function initData() {
            top.restAjax.get(top.restAjax.path('api/grid/get/{gridId}', [gridId]), {}, null, function(code, data) {
                initMap(function() {
                    baiduMap.setBoundary([[${baiduMapProperties.boundary}]], null, function() {
                        // 背景层
                        initGridBG(data.areaCode, function() {
                            // 网格层
                            var grid = new BaiduMap.Grid(data.gridId, data.pointArray);
                            grid.setFillColor(data.fillColor);
                            baiduMap.setGridArray([grid]);
                        });
                    });
                });
            }, function (code, data) {
                top.dialog.msg(data.msg);
            }, function() {
                loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
            }, function() {
                top.dialog.close(loadLayerIndex);
            });
        }
        initData();

        // 校验
        form.verify({
        });
    });
</script>
</body>
</html>