<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<%@include file="/WEB-INF/page/header.jsp" %>
<script>changeMenu(2,4);//左边菜单active</script>
<div class="row white-bg border-bottom white-bg page-heading">
	<div class="col-lg-12">
		<h2>保单信息</h2>
		<ol class="breadcrumb">
			<li>主页</li>
			<li><a>保单信息</a></li>
			<li class="active"><strong>已出函</strong></li>
		</ol>
	</div>
</div>

<div class="wrapper wrapper-content">
	<div class="row">
		<div class="col-lg-12">
			<div class="ibox float-e-margins">
				<div class="ibox-content">
					<div class="row">
						<div class="col-sm-2">
							<div class="input-group m-b"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								<input type="text" class="input-sm form-control" placeholder="选择开始日期" id="startDate">
							</div>
						</div>
						<div class="col-sm-2">
							<div class="input-group m-b"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								<input type="text" class="input-sm form-control" placeholder="选择结束日期" id="endDate">
							</div>
						</div>
                        <div class="col-sm-3">
                            <div class="input-group"><input type="text" id="keyword" placeholder="订单号、法院" class="input-sm form-control"><span class="input-group-btn">
                                <button type="button" class="btn btn-sm btn-primary" onclick="search()"> 查询</button> </span></div>
                        </div>
                    </div>
					<div class="row">
						<div class="col-md-12 jqGrid_wrapper">
							<table id="gridTable4"></table>
							<div id="gridPager4"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="modal-comment" class="modal fade" tabindex="-1">
	<div class="modal-dialog" style="max-width: 600px;">
		<div class="modal-content">
			<div class="modal-header">
      			<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					评价
				</div>
	      	</div>
	      	<div class="modal-body">
	      		<table style="width:100%;height:100%;border-collapse:separate;border-spacing:10px;">
	      			<tr>
	      				<td rowspan=3 valign="top">
	      					<img src="" height="50" width="50" id="commentLawyerLogo"/>
	      				</td>
	      				<td colspan=10 id="commentLawyerName"></td>
	      			</tr>
	      			<tr>
	      				<td colspan=2>服务质量</td>
   						<td colspan=3>
   							<div id="commentLawyerValue1"></div>
   						</td>
   						<td colspan=2>出函速度</td>
   						<td colspan=3>
   							<div id="commentLawyerValue2"></div>
   						</td>
   						<td></td>
	      			</tr>
	      			<tr>
   						<td colspan=10 id="commentLawyerContent"></td>
   					</tr>
	      		</table>
	      	</div>
		</div>
	</div>
</div>

<%@include file="/WEB-INF/page/order/orderDetail.jsp" %>

<%@include file="/WEB-INF/page/footer.jsp" %>

<link href="${contextPath}/static/css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<link href="${contextPath}/static/css/plugins/jqGrid/ui.jqgrid.css" rel="stylesheet">

<script src="${contextPath}/static/js/plugins/jqGrid/jquery.jqGrid.min.js"></script>
<script src="${contextPath}/static/js/plugins/jqGrid/i18n/grid.locale-cn.js"></script>
<script src="${contextPath}/static/js/plugins/raty/jquery.raty.min.js"></script>

<!-- Data picker -->
<script src="${contextPath}/static/js/plugins/datapicker/bootstrap-datepicker.js"></script>
   
<script type="text/javascript">
	var gridTable1 = null;
	var grid_selector = "#gridTable4";
	var pager_selector = "#gridPager4";
	jQuery(function($) {
		$('#startDate').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
            format: "yyyy-mm-dd"
        });

        $('#endDate').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
            format: "yyyy-mm-dd"
        });
		
		initGridTable();
		// resize to fit page size
   		$(window).on("resize.jqGrid", function() {
   			$(grid_selector).jqGrid("setGridWidth", $(".page-content").width());
   		});
   		// resize on sidebar collapse/expand
   		var parent_column = $(grid_selector).closest("[class*='col-']");
   		$(document).on("settings.ace.jqGrid", function(ev, event_name, collapsed) {
   			if (event_name === "sidebar_collapsed" || event_name === "main_container_fixed") {
   				// setTimeout is for webkit only to give time for DOM changes and then redraw!!!
   				setTimeout(function() {
   					$(grid_selector).jqGrid("setGridWidth", parent_column.width());
   				}, 0);
   			}
   		});
   		
   		$(document).one('ajaxloadstart.page', function(e) {
   			$(grid_selector).jqGrid('GridUnload');
   			$('.ui-jqdialog').remove();
   		});
   		
		$.fn.raty.defaults.path = '${contextPath}/static/js/plugins/raty/img';
		$.fn.raty.defaults.readOnly = true;

	 	// Add responsive to jqGrid
        $(window).bind('resize', function () {
            var width = $('.jqGrid_wrapper').width();
            gridTable1.setGridWidth(width);
        });
	});
	
	function commentOperation(id){
		var url = '${contextPath}/order/getOrderComment';
		var parameters = {"orderId":id};
		postData(url, parameters, commentOperationCallback, errorCallbackDefault);
	}
	
	function commentOperationCallback(data){
		if(data.success){
			var ids = {'commentLawyerName':'name','commentLawyerContent':'content'};
			$("#commentLawyerLogo").attr('src',"");
			var obj = formatString(data.logo);
			if(obj.length > 0){
				$("#commentLawyerLogo").attr('src','http://c.duowenlvshi.com'+obj);
				$("#commentLawyerLogo").show();
			}else{
				$("#commentLawyerLogo").hide();
			}
			for(var key in ids){
				obj = $('#' + key);
				obj.html('');
				obj.html(formatString(data[ids[key]]));
			}
			setCommentLawyerValue('commentLawyerValue1',data.value1);
			setCommentLawyerValue('commentLawyerValue2',data.value2);
			$("#modal-comment").modal('toggle');
		}else{
			showMsg(data.message);
		}
	}

	function errorCallbackDefault(data){
		
	}

	function formatString(str){
		var result = '';
		if(str != undefined && str != null){
			result = str;
		}
		return result;
	}

	function initGridTable(){
		gridTable1 = jQuery(grid_selector).jqGrid({
			subGrid : false,
   			url : "${contextPath}/order/getOrders?orderState=4&orderServiceType=0",//
   			datatype : "json",
   			height : "auto",
   			autowidth:true,
   			colModel : [{
   				name : "createDate",
   				index : "createDate",
   				label : "订单时间",
   				width : 90,
   				search : false
        	},{
   				name : "orderId",
   				index : "orderId",
   				label : "订单号",
   				width : 60,
   				search : false
        	},{
   				name : "courtName",
   				index : "courtName",
   				label : "法院",
   				width : 80,
   				search : false
        	},{
   				name : "plaintiff",
   				index : "plaintiff",
   				label : "原告",
   				width : 40,
   				search : false
        	},{
   				name : "sqbd",
   				index : "sqbd",
   				label : "保全金额",
   				width : 60,
   				sortable: false,
   				search : false
        	},{
   				name : "sbRate",
   				index : "sbRate",
   				label : "费率",
   				width : 50,
   				search : false
        	},{
                name : "bf",
                index : "bf",
                label : "保费",
                width : 50,
                search : false
            },{
   				name : "sendDate",
   				index : "sendDate",
   				label : "出函时间",
   				width : 100,
   				search : false
        	},{
   				name : "remark",
   				index : "remark",
   				label : "备注",
   				width : 110,
   				search : false
        	},{
   				align : "center",
   				name : "commentFlag",
   				index : "commentFlag",
   				label : "操作",
   				width : 150,
   				sortable: false,
   				fixed:true,
   				viewable:false,
   				formatter:operationLink
        	}],
   			sortname : "createDate",
   			sortorder : "desc",
   			viewrecords : true,
   			rowNum : 10,
   			rowList : [ 10, 20, 30 ],
   			pager : pager_selector,
   			altRows : true,
   			//toppager : true,
   			multiselect : false,
   			//multikey : "ctrlKey",
   	        multiboxonly : true,
   	        rownumbers:true,  
         	rownumWidth:30, 
   	        
		});
	}

	//向后台请求数据
	function postData(url, parameters, successCallback, errorCallback){
		$.ajax({
		    type : "POST",
		    url : url,
		    data : parameters,
		    dataType : "json",
		    success : function(data) {
		    	successCallback(data); 
		    },
		    error : function(data) {
		    	errorCallback(data);
		    }
	    }); 
	}
	
	//操作链接
	function operationLink(cellvalue, options, rowObject){
		var result = "";
		result += '&nbsp;<a href="javascript:void(0);" style="color:blue" onclick="showdetail(\''+rowObject.orderId+'\')">详细</a>';
        result += '&nbsp;|&nbsp;<a href="javascript:void(0);" style="color:blue" onclick="showRemark(\''+rowObject.remark+'\','+ rowObject.orderId +',\''+grid_selector+'\')">添加备注</a>';
        return result;
	}

	function reloadGrid(){
		gridTable1.trigger('reloadGrid');
	}
	
	function setCommentLawyerValue(id, v){
		var value = parseFloat(v);
		if (value >= 0 && value < 5){
			$('#' + id).raty({
		  		score: function() {
		    		return value;
		  		}
			});
		}
	}

	function search(){
		var keyword =$("#keyword").val();
        var startDate =$("#startDate").val();
        var endDate =$("#endDate").val();
		gridTable1.setGridParam({postData:{'keyword':keyword,'startDate':startDate,'endDate':endDate,'orderState':4},url : '${contextPath}/order/getOrders',page:1}).trigger('reloadGrid');
	}
	
	//显示信息
	function showMsg(msg){
		if(msg != undefined && msg.length > 0){
			alert(msg);
		}
	}
</script>
