<%@ page import="com.lightinit.hsdatashow.model.admin.DicFacilitiesType" %>
<%@ page import="com.lightinit.hsdatashow.dictionary.DicMonitorType" %>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../../../common/admin/head.jsp"></jsp:include>
    <link  rel="stylesheet" type="text/css" href="<%=basePath%>/resource/css/admin/home/index.css">
    <style type="text/css">
        #allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RleRpI1DQegNo17XGsVvUUS1e3oiubUG"></script>
</head>
<body>
    <jsp:include page="../../../common/admin/body_pre.jsp"></jsp:include>
    <div class="row hidden-print">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h2>监控设施</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="javascript:void(0);" >城市资产</a>
                        </li>
                        <li class="active">
                            <strong>监控设施</strong>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="../../../common/admin/search_pre.jsp"></jsp:include>

    <form id="formSearch" action="<%=basePath%>/admin/data_register_api/list.action" method="get" class="form-inline">
        <div class="form-group">
            <label for="searchName">监控设施名称</label>
            <input type="text" id="searchName" name="searchName" class="form-control" />
        </div>
        <div class="form-group">
            <button id="btnSearch" type="button" class="btn btn-sm btn-primary"><i class="fa fa-search"></i>查询</button>
        </div>
    </form>

    <jsp:include page="../../../common/admin/search_post.jsp"></jsp:include>
    <div class="row hidden-print">
        <div class="col-lg-12 col-md-12">
            <div class="col-lg-11 col-md-11 ibox-content-noline">
            <div id="allmap" style="width: 100%;height: 655px;"></div>
            <input type="hidden" value=0 id="isFalg">
            </div>
            <div class="col-lg-1 col-md-1 ibox-content-noline">
                <div style="height: 655px">
                    <div class="col-lg-12 col-md-12">
                        <a title="<%=DicMonitorType.CAMERA%>" onclick="changeByFalg('<%=DicMonitorType.CAMERA%>')">
                            <img id="sxt" src="<%=basePath%>/resource/images/monitor/sxt.png">
                            <img id="nosxt" src="<%=basePath%>/resource/images/monitor/no_sxt.png" style="display: none">
                        </a>
                    </div>
                    <div class="col-lg-12 col-md-12">
                        <a title="<%=DicMonitorType.POLICE%>" onclick="changeByFalg('<%=DicMonitorType.POLICE%>')">
                            <img id="dzjc" src="<%=basePath%>/resource/images/monitor/dzjc.png">
                            <img id="nodzjc" src="<%=basePath%>/resource/images/monitor/no_dzjc.png" style="display: none">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 ">
            <div class="col-lg-12 col-md-12 ibox-content-noline">
                <div style="width: 100%;height: 220px;">
                    <table  class="table table-condensed table-hover">
                        <thead>
                        <tr>
                            <th>
                                监控设施
                            </th>
                            <th>
                                数量
                            </th>
                        </tr>
                        </thead>
                        <tbody id="tableList">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
    <script type="text/javascript">
        var falg1 = 0;
        var falg2 = 0;

        function changeByFalg(name){
            if (name=='<%=DicMonitorType.CAMERA%>'){
                if (falg1==0){
                    falg1=1 ;
                    $("#sxt").hide() ;
                    $("#nosxt").show() ;
                }else {
                    falg1=0 ;
                    $("#sxt").show() ;
                    $("#nosxt").hide() ;
                }
            }
            if (name=='<%=DicMonitorType.POLICE%>'){
                if (falg2==0){
                    falg2=1 ;
                    $("#dzjc").hide() ;
                    $("#nodzjc").show() ;
                }else {
                    falg2=0 ;
                    $("#dzjc").show() ;
                    $("#nodzjc").hide() ;
                }
            }
            changeByName();
        }
        changeByName()
        function changeByName() {
            var count1 = 0 ;
            var count2= 0 ;
            // 百度地图API功能
            var map = new BMap.Map("allmap");
            $.ajax({
                url: "<%=basePath%>/resource/json/mapStyle.json",
                dataType: "json",
                success: function (data) {
                    map.setMapStyle({
                        styleJson: data
                    });
                }
            })
            var point = new BMap.Point(115.675402, 37.745191);
            map.centerAndZoom(point, 15);

            $.post("<%=basePath%>/admin/facilities/getMonitor.action", {
                categoryName: '<%=DicFacilitiesType.MONITOR%>',
                name:$("#searchName").val()
            }, function (datas) {
                $("#tableList").empty() ;
                if (datas.length > 0) {
                    for (var i = 0; i < datas.length; i++) {
                        (function (x) {
                            if (datas[i].orgType == '<%=DicMonitorType.CAMERA%>'&&falg1==0) {
                                count1++ ;
                                var fax= datas[i].fax==null?'暂无':datas[i].fax ;
                                var sContent =
                                    "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>管理单位：" + datas[i].shortName + "</h4>" +
                                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>名称：" + datas[i].orgName + "</p>" +
                                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>地址：" + fax + "</p>" +
                                    "</div>";
                                var pt = new BMap.Point(datas[i].longitude, datas[i].latitude);
                                var myIcon = new BMap.Icon("<%=basePath%>/resource/images/monitor/sxt.png", new BMap.Size(40, 40));
                                var marker = new BMap.Marker(pt, {icon: myIcon});  // 创建标注
                                var infoWindow = new BMap.InfoWindow(sContent);
                                map.centerAndZoom(point, 15);
                                marker.addEventListener("click", function () {
                                    this.openInfoWindow(infoWindow);
                                });
                                map.addOverlay(marker);
                            }
                            if (datas[i].orgType == '<%=DicMonitorType.POLICE%>'&&falg2==0) {
                                count2++ ;
                                var fax= datas[i].fax==null?'暂无':datas[i].fax ;
                                var sContent =
                                    "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>管理单位：" + datas[i].shortName + "</h4>" +
                                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>名称：" + datas[i].orgName + "</p>" +
                                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>地址：" + fax + "</p>" +
                                    "</div>";
                                var pt = new BMap.Point(datas[i].longitude, datas[i].latitude);
                                var myIcon = new BMap.Icon("<%=basePath%>/resource/images/monitor/dzjc.png", new BMap.Size(40, 40));
                                var marker = new BMap.Marker(pt, {icon: myIcon});  // 创建标注
                                var infoWindow = new BMap.InfoWindow(sContent);
                                map.centerAndZoom(point, 15);
                                marker.addEventListener("click", function () {
                                    this.openInfoWindow(infoWindow);
                                });
                                map.addOverlay(marker);
                            }
                        })(i);
                    }
                }
                var html1 = '<tr>' +
                    '<th><%=DicMonitorType.CAMERA%></th>' +
                    '<th>'+count1+'</th>' +
                    '</tr>' ;
                $("#tableList").append(html1) ;
                var html2 = '<tr>' +
                    '<th><%=DicMonitorType.POLICE%></th>' +
                    '<th>'+count2+'</th>' +
                    '</tr>' ;
                $("#tableList").append(html2) ;
            }, "json")
        }

        $("#btnSearch").click(function () {
            changeByName();
        });
    </script>
</body>
</html>