{% load staticfiles %}
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>首页</title>
    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=EpbgpqakDpXGN9E3ejg6e93ffsi83b0t"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">

    <style>
        html,
        body,
        #allmap {
            overflow: hidden;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="allmap" style="width: 100%; height: 100vh;"></div>
    <!-- 图例 -->
    <div
        style="position: absolute; font-size: 14px; top: 20px; right: 20px; padding: 0 15px; background-color: white; border: 1px solid #f5f5f5; border-radius: 10px;">
        <table style="width: 100%; height: 40px;" class="IconTable" id="qxz">
            <tr>
                <td style="width: 22px;">
                    <img src="{% static 'imgs/qxz.png'%}" style="height: 25px; margin-top: -4px;" />
                </td>
                <td class="IconTd" onclick="toggleIcon(this,5)" onmouseover="SetAnimation(true,5)"
                    onmouseout="SetAnimation(false,5)">气象站
                    <span id="span_qxz_count" class="text-primary">(3)</span>
                </td>
            </tr>
        </table>
        <table style="width: 100%; height: 40px;" class="IconTable" id="sxt">
            <tr>
                <td style="width: 22px;">
                    <img src="{% static 'imgs/sxt.png'%}" style="height: 25px; margin-top: -4px;" />
                </td>
                <td class="IconTd" onclick="toggleIcon(this,6)" onmouseover="SetAnimation(true,6)"
                    onmouseout="SetAnimation(false,6)">摄像头
                    <span id="span_sxt_count" class="text-primary"></span>
                </td>
            </tr>
        </table>
    </div>
    <!-- 地图控件 -->
    <div style="position: absolute; bottom: 20px; right: 20px; width: 27px; font-size: 12px;">
        <div id="mapControl_type" title="切换图层" onclick="mapTypeChangeBtnClick()"
            style="width: 27px; height: 27px; line-height: 27px; text-align: center; background-color: white; margin-bottom: 3px; cursor: pointer;">
            2D
        </div>

        <div onclick="resizemap()" title="重置地图"
            style="width: 27px; height: 27px; line-height: 27px; text-align: center; background-color: white; margin-bottom: 3px; cursor: pointer;">
            <img src="http://www.hoire.cn/EMS/Manager/images/mapControlResize.png" />
        </div>

        <div onclick="mapZoomIn()" title="放大"
            style="width: 27px; height: 28px; font-size: 18px; line-height: 27px; text-align: center; background-color: white; border-bottom: 1px solid #cccccc; cursor: pointer;">
            +
        </div>
        <div onclick="mapZoomOut()" title="缩小"
            style="width: 27px; height: 27px; font-size: 24px; line-height: 27px; text-align: center; background-color: white; cursor: pointer;">
            -
        </div>
    </div>

    <div id="mapControl_typeChange"
        style="display: none; position: absolute; font-size: 12px; width: 50px; line-height: 25px; height: 50px; background-color: #fff; border-radius: 5px; bottom: 86px; right: 60px; padding-left: 10px;">
        <div style="cursor: pointer;" onclick="mapTypeChange('2D')">2D</div>
        <div style="cursor: pointer;" onclick="mapTypeChange('卫星')">卫星</div>
        <div style="position: absolute; bottom: 25px; right: -5px;">
            <img src="http://www.hoire.cn/EMS/Manager/images/mapControleTriggle.png" />
        </div>
    </div>
    <input type="text" name="" id="locat1" value="{{pic_list.locat1}}">  <!--东北点 -->
     <input type="text" name="" id="locat2" value="{{pic_list.locat2}}">  <!--西南点 -->
     <input type="text" name="" id="imgaddr" value="{{pic_list.addr}}">  
     <input type="text" name="" id="pic_center" value="{{pic_list.pic_center}}">  

</body>

</html>

<script src="{% static '/lib/layui/layui.js'%}"></script>
<script type="text/javascript">
    layui.use(['element', 'form', 'upload'], function () {
        var element = layui.element;

        //一些事件监听
        element.on('tab(demo)', function (data) {
            console.log(data);
        });

    });
    var mapimg = 'http://127.0.0.1:8000/'+$('#imgaddr').val();
    var locat1 = eval('('+$('#locat1').val()+')');
    var locat2 = eval('('+$('#locat2').val()+')');
    var map_center = $('#pic_center').val().substring(1,$('#pic_center').val().length-1).split(',');
    console.log(locat2)

    // 百度地图API功能
    var map = new BMap.Map("allmap", { mapType: BMAP_HYBRID_MAP, minZoom: 4 });  //BMAP_SATELLITE_MAP  卫星地图
    $("#mapControl_type").html("卫星");
    map.centerAndZoom(new BMap.Point(map_center[0], map_center[1]), 15);
    map.enableScrollWheelZoom(true);

    //气象站标识
    var qxzIcon = new BMap.Icon("{% static 'imgs/qxz.png'%}", new BMap.Size(30, 40), { imageSize: new BMap.Size(30, 40),anchor: new BMap.Size(0, 0) });
    //气象站标识——断开
    var qxzOffIcon = new BMap.Icon("{% static 'imgs/qxz-Off.png'%}", new BMap.Size(30, 40), { imageSize: new BMap.Size(30, 40) });
    //摄像头标识
    var sxtIcon = new BMap.Icon("{% static 'imgs/sxt.png'%}", new BMap.Size(30, 40), { imageSize: new BMap.Size(30, 40) });
    //摄像头标识——断开
    var sxtOffIcon = new BMap.Icon("{% static 'imgs/sxt-Off.png'%}", new BMap.Size(30, 40), { imageSize: new BMap.Size(30, 40) });
    //摄像头标识——加密
    var sxtEncryptIcon = new BMap.Icon("{% static 'imgs/sxt-Encrypt.png'%}", new BMap.Size(30, 40), { imageSize: new BMap.Size(30, 40) });
    
    function openInfo(title, content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        //var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
        //map.openInfoWindow(infoWindow, point); //开启信息窗口

        var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title: title, //标题 
            panel: "panel", //检索结果面板  
            enableSendToPhone: false,
            enableMessage: false,//设置允许信息窗发送短息 
            searchTypes: []
        });

        searchInfoWindow.open(point);

        var arr = new Array();
        $(".BMapLib_trans").each(function () {
            $(this).attr('src', "../static/imgs/tail.png");
            $(this).css({ "left": "113px", "bottom": "-11px", "top": "inherit", "width": "20px", "height": "11px" });
            //arr.push($(this).attr("src"));
        });
    }

    // SW西南角和NE东北角
    var SW = new BMap.Point(locat2.lng,locat2.lat);
    var NE = new BMap.Point(locat1.lng,locat1.lat);
    var displayOnMinLevel = 10; //图层显示的最小级别
    var displayOnMaxLevel = 19; //图层显示的最大级别
    var groundOverlayOptions = {
        opacity: 1,
        displayOnMinLevel: 10,
        displayOnMaxLevel: 19,
        imageURL: mapimg
    }
    // 初始化GroundOverlay
    groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);
    map.addOverlay(groundOverlay);

    // 添加设备
    var WeatherstationMarker = [];//气象站
    var CameraMarker = [];//摄像头
    GetMonitorMark(1);

    //监测数据
    function GetMonitorMark(ShowStatus) {
        var data = {
            "Status": true,
            "list": [{
                "id": "D08652664",
                "markType": 6,
                "title": "监控",
                "theName": "监控",
                "isRun": true,
                "lng": "119.603791",
                "lat": "26.089101",
                "content": "科技",
            }, {
                "id": "3_1174",
                "markType": 5,
                "title": "气象站",
                "theName": "扬尘监测系统",
                "isRun": true,
                "lng": "119.584998",
                "lat": "26.11165",
                "content": "扬尘监测系统(2019-08-03 10:03)&nbsp;<a class='text-success'  href='http://www.hoire.cn/ems/Manager/DataMonitoring/HistoryDataList.aspx?baseID=651' target='_blank' title='趋势分析'><i class='fa fa-line-chart'  style='font-weight:bold;' aria-hidden='true'></i></a><div style='font-size:12px;'><span style='float:left;text-align:center;margin:5px;' title='空气温度'><img src='http://www.hoire.cn/ems/UploadFile/IndexIcon/636984335133026206.png' style='height:25px;'/><br/><span style=''>30.8℃</span></span><span style='float:left;text-align:center;margin:5px;' title='空气湿度'><img src='http://www.hoire.cn/ems/UploadFile/IndexIcon/636984335713465780.png' style='height:25px;'/><br/><span style=''>57.9%</span></span><span style='float:left;text-align:center;margin:5px;' title='PM2.5'><img src='http://www.hoire.cn/ems/UploadFile/IndexIcon/636984336867958340.png' style='height:25px;'/><br/><span style=''>3.1μg/m3</span></span><span style='float:left;text-align:center;margin:5px;' title='PM10'><img src='http://www.hoire.cn/ems/UploadFile/IndexIcon/636984337085497037.png' style='height:25px;'/><br/><span style=''>3.4μg/m3</span></span><span style='float:left;text-align:center;margin:5px;' title='光照强度'><img src='http://www.hoire.cn/ems/UploadFile/IndexIcon/636984337760714323.png' style='height:25px;'/><br/><span style=''>1Lx</span></span><span style='float:left;text-align:center;margin:5px;' title='噪音'><img src='http://www.hoire.cn/ems/UploadFile/IndexIcon/636984357158182421.png' style='height:25px;'/><br/><span style=''>49.6dB</span></span></div>"
            }]
        }

        ClearAllMarker();

        WeatherstationMarker = [];//气象站
        CameraMarker = [];//摄像头

        var jsonObj = data;

        if (jsonObj != null) {

            if (jsonObj.Status) {

                if (jsonObj.list.length > 0) {
                    $("#qxz").hide();
                    $("#sxt").hide();
                }

                var jczd_count = 0;

                for (var i = 0; i < jsonObj.list.length; i++) {
                    var markObj = jsonObj.list[i];

                    var id = markObj.id;
                    var markType = markObj.markType;
                    var title = markObj.title;
                    var theName = markObj.EquipmentName;
                    var lng = markObj.lng;
                    var lat = markObj.lat;
                    var content = markObj.content;
                    var isRun = markObj.isRun;

                    var icon = GetMarkerIcon(markType, isRun);

                    var marker;
                    if (markType == "6") {   //监控
                        var DeviceSerial = markObj.DeviceSerial;
                        var CameraNo = markObj.CameraNo;
                        marker = createCameraMarker(lng, lat, icon, title, id, CameraNo);
                    }
                    else //气象站
                        marker = createMarker(lng, lat, icon, title, content);

                    map.addOverlay(marker);

                    switch (markType) {

                        case 5:
                            WeatherstationMarker.push(marker);
                            $("#qxz").show();
                            break;
                        case 6:
                            CameraMarker.push(marker);
                            $("#sxt").show();
                            break;
                    }
                }


                setEquipmentCount("span_qxz_count", WeatherstationMarker.length);
                setEquipmentCount("span_sxt_count", CameraMarker.length);
            }
        }
    }
    function setEquipmentCount(objId, count) {
        if (count > 0)
            $("#" + objId).html("(" + count + ")");
        else
            $("#" + objId).html("");
    }
    function GetMarkerIcon(markType, isRun) {
        var icon = qxzIcon;

        switch (markType) {
            case 5:
                if (isRun)
                    icon = qxzIcon;
                else
                    icon = qxzOffIcon;
                break;
            case 6:
                if (isRun)
                    icon = sxtIcon;
                else
                    icon = sxtOffIcon;
                break;
        }

        return icon;
    }
    //将创建marker的方法抽出来，否则的话总是打开最后一个InfoWindow
    function createMarker(lng, lat, icon, title, content) {

        var markerx = new BMap.Marker(new BMap.Point(lng, lat), { icon: icon });
        markerx.addEventListener("click", function (e) {
            openInfo(title, content, e);
        });
        return markerx;
    }
    function createCameraMarker(lng, lat, icon, title, id, CameraNo) {

        var markerx = new BMap.Marker(new BMap.Point(lng, lat), { icon: icon });
        markerx.addEventListener("click", function (e) {
            // parent.showCamera(DeviceSerial, CameraNo, title);
            layui.use(['layer'], function () {
                layer.open({
                    type: 2,
                    area: ['1200px', '600px'],
                    content: 'jkview?equip_id='+id //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            })
        });
        return markerx;
    }
    function ClearAllMarker() {
        ClearMarker(WeatherstationMarker);
        ClearMarker(CameraMarker);
    }
    function ClearMarker(pointArray) {
        for (var i = 0; i < pointArray.length; i++) {
            var marker = pointArray[i];
            map.removeOverlay(marker);
        }
    }

    // 地图控件点击事件
    function mapTypeChangeBtnClick() {
        $("#mapControl_typeChange").toggle();
    }
    function mapTypeChange(maptype) {
        if (maptype == '2D') {
            map.setMapType(BMAP_NORMAL_MAP);
        }
        else {
            map.setMapType(BMAP_SATELLITE_MAP);
        }

        $("#mapControl_type").html(maptype);

        $("#mapControl_typeChange").hide();

    }
    // 图例悬浮
    function SetAnimation(opFlag, markType) {

        var pointArray;

        switch (markType) {
            case 5:
                pointArray = WeatherstationMarker;
                break;
            case 6:
                pointArray = CameraMarker;
                break;
        }

        for (var i = 0; i < pointArray.length; i++) {
            var marker = pointArray[i];
            if (opFlag) {
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

            }
            else {
                marker.setAnimation(null);
            }
        }
    }
    // 定位当前位置
    function resizemap() {
        //map.setCity("中国");
        map.centerAndZoom(new BMap.Point(119.602956,26.104942), 15);
    }

    // 覆盖物在图片上面
    var one = true;
    function tilesloaded() {
        if (one) {
            $("#allmap > div:eq(0) > div:eq(1) > div:eq(3)").css("z-index", "200");
            $("#allmap > div:eq(0) > div:eq(1) > div:eq(3) > div:eq(0)").css("z-index", "-9999999");
            one = false;
            console.log('ok');
        }
    }
    map.addEventListener('tilesloaded', tilesloaded)

    //单击获取点击的经纬度
    // map.addEventListener("click", function (e) {
    //     alert(e.point.lng + "," + e.point.lat);
    // });
</script>