
<%@ page import="com.lightinit.hsdatashow.model.admin.DicOrganizationType" %>
<%@ page import="com.lightinit.hsdatashow.dictionary.DicTrafficServiceType" %>
<%@ 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:"微软雅黑";}
        #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
        #r-result{height:100%;width:20%;float:left;}
    </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="<%=DicTrafficServiceType.CAMERA%>" onclick="changeByFalg('<%=DicTrafficServiceType.CAMERA%>')">
                        <img id="sxt" src="<%=basePath%>/resource/images/trafficService/sxt.png">
                        <img id="nosxt" src="<%=basePath%>/resource/images/trafficService/no_sxt.png" style="display: none">
                    </a>
                </div>
                <div class="col-lg-12 col-md-12">
                    <a title="<%=DicTrafficServiceType.POLICE%>" onclick="changeByFalg('<%=DicTrafficServiceType.POLICE%>')">
                        <img id="dzjc" src="<%=basePath%>/resource/images/trafficService/dzjc.png">
                        <img id="nodzjc" src="<%=basePath%>/resource/images/trafficService/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=='<%=DicTrafficServiceType.CAMERA%>'){
                if (falg1==0){
                    falg1=1 ;
                    $("#sxt").hide() ;
                    $("#nosxt").show() ;
                }else {
                    falg1=0 ;
                    $("#sxt").show() ;
                    $("#nosxt").hide() ;
                }
            }
            if (name=='<%=DicTrafficServiceType.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/education/getEducationOrganization.action", {
                categoryName: '<%=DicOrganizationType.TRAFFICSERVICE%>',
                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 == '<%=DicTrafficServiceType.CAMERA%>'&&falg1==0) {
                                count1++ ;
                                var fax= datas[i].fax==null?'暂无':datas[i].fax ;
                                var photo= datas[i].photo==null?'暂无':datas[i].photo ;
                                var sContent =
                                    "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + datas[i].orgName + "</h4>" +
                                    // "<img style='float:right;margin:4px' id='imgDemo' src='../img/tianAnMen.jpg' width='139' height='104' title='"+datas[i].orgName+"'/>" +
                                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>地址：" + fax + "</p>" +
                                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>电话：" + photo + "</p>" +
                                    "</div>";
                                var pt = new BMap.Point(datas[i].longitude, datas[i].latitude);
                                var myIcon = new BMap.Icon("<%=basePath%>/resource/images/trafficService/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);
                                    //图片加载完毕重绘infowindow
                                    // document.getElementById('imgDemo').onload = function (){
                                    //     infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                                    // }
                                });
                                map.addOverlay(marker);
                            }
                            if (datas[i].orgType == '<%=DicTrafficServiceType.POLICE%>'&&falg2==0) {
                                count2++;
                                var fax= datas[i].fax==null?'暂无':datas[i].fax ;
                                var photo= datas[i].photo==null?'暂无':datas[i].photo ;
                                var sContent =
                                    "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + datas[i].orgName + "</h4>" +
                                    // "<img style='float:right;margin:4px' id='imgDemo' src='../img/tianAnMen.jpg' width='139' height='104' title='"+datas[i].orgName+"'/>" +
                                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>地址：" + fax + "</p>" +
                                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>电话：" + photo + "</p>" +
                                    "</div>";
                                var pt = new BMap.Point(datas[i].longitude, datas[i].latitude);
                                var myIcon = new BMap.Icon("<%=basePath%>/resource/images/trafficService/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);
                                    //图片加载完毕重绘infowindow
                                    // document.getElementById('imgDemo').onload = function (){
                                    //     infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                                    // }
                                });
                                map.addOverlay(marker);
                            }
                        })(i);
                    }
                }
                var html1 = '<tr>' +
                    '<th><%=DicTrafficServiceType.CAMERA%></th>' +
                    '<th>'+count1+'</th>' +
                    '</tr>' ;
                $("#tableList").append(html1) ;
                var html2 = '<tr>' +
                    '<th><%=DicTrafficServiceType.POLICE%></th>' +
                    '<th>'+count2+'</th>' +
                    '</tr>' ;
                $("#tableList").append(html2) ;
            }, "json")
        }

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