<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  	
  	<style>
  		.popuWin {
		    width: 700px;
		    position: absolute;
		    z-index: 99999;
		}
		.popuWinMessage_main{
			padding-left: 0px;
			padding-right: 0px;
		}
		a.abtn {
		    display: inline-block;
		    border-radius: 3px;
		    font-size: 90%;
		    color: #fff;
		    padding: 3px 10px;
		    text-decoration: none;
		    background-color: #3782e6;
		}
		.msg_tab tr th{
			background:#f5f5f5;
			text-align:center;
		}
		.list_tab{
			height: 200px;
			display: block;
			overflow-y: auto; 
			background:#ffffff;
			padding:0px 0px;
			padding-bottom: 5px;
		}
		.list_tab tbody tr{
			border-bottom: 1px #e0e0e0 solid;
			text-align: center
		}
		.color_bg{
			background:#f0f0f0;
		}
  	</style>
  </head>
  <body>
	<div class="top"></div>
	<div class="center">
  		<h3 id="movePopuWin">
        	<a href="javascript:;" title="关闭" class="message_close" id="closePopuWin"></a>
        	<span>违章查询</span>
        </h3>
        <div class="popuWinMessage_main" style="padding:0px 15px;" id="trafficViolation_content">
        		<ul><li style="text-align:center;"><span id="trafficViolationMsg" style="color:red;">&nbsp;</span></li></ul>	     
		        <form name="wzForm" id="wzForm" action="/synthReports/mobile_to_synth/weiZhangAction_search.action" method="post">
		        	<table border="0" style="line-height:35px;">			        		
							<tr>
			        			<td style="width:100px;text-align: right;padding-right: 15px;">
			        			     查询城市:
			        			</td>
			        			<td>
			        				<select id="selectProvince" name="province" class="popu_input" style="width:90px;">
						                <option value="">选择省份</option>
										<option value="AH">安徽</option>
										<option value="BJ">北京</option>
										<option value="CQ">重庆</option>
										<option value="FJ">福建</option>
										<option value="GD">广东</option>
										<option value="GZ">贵州</option>
										<option value="GS">甘肃</option>
										<option value="HAN">海南</option>
										<option value="HN">河南</option>
										<option value="HUB">湖北</option>
										<option value="HUN">湖南</option>
										<option value="HB">河北</option>
										<option value="HLJ">黑龙江</option>
										<option value="JS">江苏</option>
										<option value="JX">江西</option>
										<option value="JL">吉林</option>
										<option value="LN">辽宁</option>
										<option value="NMG">内蒙古</option>
										<option value="NX">宁夏</option>
										<option value="QH">青海</option>
										<option value="S3X">陕西</option>
										<option value="SC">四川</option>
										<option value="SH">上海</option>
										<option value="S1X">山西</option>
										<option value="SD">山东</option>
										<option value="XJ">新疆</option>
										<option value="YN">云南</option>
										<option value="ZJ">浙江</option>
									</select>
									<select id="sel_citys" name="city" class="popu_input" style="width:90px;"></select>
			        			</td>
			        		</tr>
							<tr>
			        			<td style="width:100px;text-align: right;padding-right: 15px;">
			        			     车辆类型:
			        			</td>
			        			<td>
			        				<select id="car_type" name="wz.hpzl" class="popu_input">
										 <option value="00">请选择</option>
										 <option value="01">大型车</option>
										 <option value="02">小型车</option>
										 <option value="03">使馆汽车</option>
										 <option value="04">领馆汽车</option>
										 <option value="05">境外汽车</option>
										 <option value="06">外籍汽车</option>
										 <option value="07">两,三轮摩托车</option>
										 <option value="08">轻便摩托车</option>
										 <option value="09">使馆摩托车</option>
										 <option value="10">领馆摩托车</option>
										 <option value="11">境外摩托车</option>
										 <option value="12">境外摩托车</option>
										 <option value="13">低速车</option>
										 <option value="14">拖拉机</option>
										 <option value="15">挂车</option>
										 <option value="16">教练汽车</option>
										 <option value="17">教练摩托车</option>
										 <option value="18">试验汽车</option>
										 <option value="19">试验摩托车</option>
										 <option value="20">临时入境汽车</option>
										 <option value="21">临时入境摩托车</option>
										 <option value="22">临时行驶车</option>
										 <option value="23">警用汽车</option>
										 <option value="24">警用摩托</option>
										 <option value="99">其他</option>	
									</select>	
			        			</td>
			        		</tr>
			        		<tr>
			        			<td style="width:100px;text-align: right;padding-right: 15px;">
			        			     车牌号码:
			        			</td>
			        			<td>
			        				<input class="popu_input" maxlength="6" placeholder="输入车牌号7位" name="hphm" id="plateNo" disabled="disabled" readonly="readonly">
			        			</td>
			        		</tr>
			        		<tr>
			        			<td style="width:100px;text-align: right;padding-right: 15px;">
			        			     发动机号:
			        			</td>
			        			<td>
			        				<input class="popu_input" id="wz_engineno" type="text" placeholder="输入完整的发动机号" name="wz.engineno"/>
			        			</td>
			        		</tr>
			        		<tr>
			        			<td style="width:100px;text-align: right;padding-right: 15px;">
			        			     车架号码:
			        			</td>
			        			<td>
			        				<input class="popu_input" id="wz_classno" type="text" placeholder="输入车架号" name="wz.classno" id="frameNo">
			        			</td>
			        		</tr>
			        		<tr>
			        			<td style="width:100px;text-align: center;" colspan="2">
			        				<input id="search_trafficViolatioin" type="button" value="开始查询" class="weizhangbtn" style="width:80px; height:30px; margin-top:20px;margin-bottom: 20px;">
			        			</td>
			        		</tr>        					        		
		        	</table>
	        		<input type="hidden" id="wz_vhcid" name="wz.vhcid" value="${param.vid}"/>		
	        		<input type="hidden" id="wz_serverId" name="wz.serverId" value=""/>
	        		<input type="hidden"  hstyle="display: none;">
						<i></i><h3>输入的车辆信息有误，或交管局无匹配记录</h3>		
					</div>
					<a id="adrow" href="#" target="_blank"></a>
					<div id="result_list" class="bd" style="display: block; /*height:225px;*/">						
					</div>		
				</div>
	<div class="bot"></div>
	<script>
	    var ResultShow = function () {
	        $('#wzForm').hide();
	        $('#page_result').show();
	        $("#trafficViolation_content").addClass("color_bg");
	    }
	    var research = function () {
	        $('#wzForm').show();
	        $('#page_result').hide();
	        $("#trafficViolation_content").removeClass("color_bg");
	    }
	    var error_show=function()
	    {
	        ResultShow();
	        $('#result_msg').show();
	        $('#result_list').hide();   
	    }
	</script>
    <script language="javascript">

        function getcitys(hv){

        	var province = $("#selectProvince option:checked").html();
            $('.provice_name_box').html($("#selectProvince option:checked").html());
            $("#sel_citys").empty().append("<option>loading...</option>");
            $.getJSON("http://vip4.exlive.cn/synthReports/mobile_to_synth/weiZhangAction_jcitytype.action?provice=" + encodeURIComponent(province) + "&gcback=?", function (e) {
                $("#sel_citys").empty();
                var html = '<option value="">请选择城市</option>';
                e=e.data[0].citys;
                for (var i = 0; i < e.length; i++) {
                    if(e[i].city_code==hv.city_code){
                    	 html += "<option selected='selected' value='" + e[i].city_code + "'>" + e[i].city_name + "</option>";
                    }else{
                          html += "<option value='" + e[i].city_code + "'>" + e[i].city_name + "</option>";
                    }
                   
                }
                $("#sel_citys").append(html);
                
                
            });

        }
     
        $(document).ready(function () {
			
			$("#wz_serverId").val($("#serverId").val());
			$("#wz_userid").val($("#userId").val());
			
            $.getJSON("http://vip4.exlive.cn/synthReports/mobile_to_synth/weiZhangAction_vsid.action?wz.vhcid="+$('#wz_vhcid').val()+"&wz.serverId="+$('#wz_serverId').val() + "&gcback=?", function (e) {
                
                if(e.flag){
                    $("#plateNo").val(e.data[0].vhcName);
                    $("#wz_engineno").val(e.data[0].engineno);
                    $("#wz_classno").val(e.data[0].classno);  
                    $("#searchCarName").html(e.data[0].vhcName);             
                    $("#car_type").val(e.data[0].hpzl); 
                    $("#selectProvince").val(e.data[0].province_code);
                    if(e.data[0].province_code){
                    	getcitys(e.data[0]);
                    }            
                }             
            });

            
            $("#selectProvince").change(function () {
                var province = $("#selectProvince").find("option:selected").text();//$("#selectProvince option:checked").html();
                $('.provice_name_box').html($("#selectProvince option:checked").html());
                $("#sel_citys").empty().append("<option>loading...</option>");
                $.getJSON("http://vip4.exlive.cn/synthReports/mobile_to_synth/weiZhangAction_jcitytype.action?provice=" + encodeURIComponent(province)  + "&gcback=?", function (e) {
                    $("#sel_citys").empty();
                    var html = '<option value="">请选择城市</option>';
                    console.info(JSON.stringify(e));
                    e=e.data[0].citys;
                    for (var i = 0; i < e.length; i++) {
                        html += "<option value='" + e[i].city_code + "'>" + e[i].city_name + "</option>";
                        //alert(e[i].city_name);
                        //$(".selectCitys").append("<option value='"+e[i].city_code+"'>"+e[i].city_name+"</option>");
                    }
                    $("#sel_citys").append(html);
                })
            })
            
            function validateForm(){
            	
            	var provice = $("select[name='province']").val();
            	if(provice.length <= 0 ){
            		$("#trafficViolationMsg").html("请选择所属省份!");
            		return false;
            	}
            	
            	var city = $("select[name='city']").val();
            	if(city.length <= 0 ){
            		$("#trafficViolationMsg").html("请选择所属城市!");
            		return false;
            	}
            	
            	var vhcType = $("select[name='wz.hpzl']").val();
            	if(vhcType == "00" ){
            		$("#trafficViolationMsg").html("请选择车辆类型!");
            		return false;
            	}
            	
            	var engineno = $("input[name='wz.engineno']").val();
            	if(engineno.length <= 0 ){
            		$("#trafficViolationMsg").html("请填写发动机号!");
            		return false;
            	}
            	
            	var classno = $("input[name='wz.classno']").val();
            	if(classno.length <= 0 ){
            		$("#trafficViolationMsg").html("请填写车架号码!");
            		return false;
            	}
            	
            	$("#trafficViolationMsg").html("&nbsp;");
            	
            	return true;
            }
           
            $(".weizhangbtn").click(function () {
            	
            	if(!validateForm()) return;
                
                $(".weizhangbtn").val('查询中...').attr("disabled", "disabled");

                $('#wz_city_code').val($('#sel_citys option:checked').html()); 
                //$("#result_list").html('<div style="width:100%; text-align:center"><img src="/images/loading.gif" border="0"></div>');            
                	
			    var params = "wz.city_code="+$("#sel_citys").find("option:selected").text()+"&wz.vhcid="+$('#wz_vhcid').val()+"&wz.serverId="+$("#serverId").val()+"&userid="+$("#userId").val()+"&province="+$("select[name='province']").val()+"&city="+$("select[name='city']").val()+"&wz.hpzl="+$("select[name='wz.hpzl']").val()+"&hphm="+$("#plateNo").val()+"&wz.engineno="+$("input[name='wz.engineno']").val()+"&wz.classno="+$("input[name='wz.classno']").val()+"";
                console.info($("#wzForm").serialize());
                console.info("params:",params);
                $.getJSON("http://vip4.exlive.cn/synthReports/mobile_to_synth/weiZhangAction_search.action?gcback=?", params, function (e) {                 
				                   
				                   console.info(JSON.stringify(e));
				                   
				                    var resultcode = e.flag;
				                    if(!resultcode){ 
				
				                    	$("#trafficViolationMsg").html(e.msg);
				                    	$(".weizhangbtn").val('违章查询').removeAttr("disabled");
				                        return false;
				                    }
                  
				                    if (resultcode) {
				                        var html = '<table class="msg_tab" cellspacing="0" cellpadding="0" border="0" style=\"width: 100%;\">';
					                        html += '<thead style=\"border-top: 1px #e0e0e0 solid;  border-bottom: 1px #e0e0e0 solid;\"><tr>' +
					                                '<th width="6%">序号</th> ' +
					                                '<th width="20%">时间</th> ' +
					                                '<th width="15%">地点</th>'+
							                        '<th width="9%">城市</th>'+  
													'<th>违章行为</th>'+ 
							                        '<th width="10%">违章代码</th>'+ 
													'<th width="7%">记分</th>'+ 
													'<th width="7%">罚款</th>'+ 
													'<th width="8%">状态</th>'+
					                                '</tr></thead>'+
					                                '</table>'+
					                                '<div class="list_tab"><table class="msg_tab" cellspacing="0" cellpadding="0" border="0" style=\"width: 100%;\">';
		  		
				                        var list = e.data;
				                        var totalWeizhang;var totalFen=0 ;var totalMoney=0;
				                        if (list!=null&&list.length > 0) {
				                           // for(var j = 0; j < 10; j++){
				                            for (var i = 0; i < list.length; i++) {
				                                html += '<tr >' +'<td width="6%" style="text-align: center;">'+(parseInt(i)+1)+'</td>'+
				                                        '<td width="20%">' + list[i].wzdate.replace("T"," ") + '</td>' +
				                                         '<td width="15%" class="td_l" title="' + list[i].area + '">' + (list[i].area.length > 6 ? list[i].area.substring(0, 6) + ".." : list[i].area) + '</td>' +'<td width="9%">'+$('#sel_citys option:checked').html()+'</td>'+
				                                          '<td class="td_l" title="' + list[i].act + '">' + (list[i].act.length > 6 ? list[i].act.substring(0, 6) + ".." : list[i].act) + '</td>' +
				                                          '<td width="10%">' + list[i].code + '</td>' +
				                                          '<td width="7%" >' + list[i].fen + '</td>' +
				                                          '<td width="7%" >' + list[i].money + '</td>' +
				                                          '<td width="8%" >' + (list[i].handled.length > 6 ? list[i].handled.substring(0, 6) + ".." : list[i].handled) + '</td>' +
				                                        '</tr>';
				                                totalFen+=parseInt(list[i].fen);
				                                if(list[i].money!=undefined&&list[i].money!=null)
				                                {
				                                    totalMoney+=parseInt(list[i].money);
				                                }
				                            }
				                            //}
				                            $('#totalWeizhang').html(list.length);
				                            $('#totalFen').html(totalFen);
				                            $('#totalMoney').html(totalMoney);
				                        } else {
				                            html += '<tr><td colspan=7 height="40">查询不到该车辆的违章记录</td></tr>';
				                        }
				                        html += '</table></div>';
				                        
				                        $("#result_list").html(html);
				                        ResultShow();
				                    } else  {
				                        error_show();
				                    }
				                    $('.validateCode').click();
				                    $(".weizhangbtn").val('违章查询').removeAttr("disabled");
	                });//,complete:function (XMLHttpRequest, textStatus) {
	                 //   $(".weizhangbtn").val('违章查询').removeAttr("disabled");
	                //}
                //});
            })

        })
	</script>
	<!--[if lte IE 6]>
	<script type="text/javascript" src="http://static.haoservice.com/Scripts/EvPng.js"></script>
	<script type="text/javascript">
	    EvPNG.fix('.vip_data,.divimg a,.sns a')
	</script>
	<![endif]-->	
  </body>
</html>
