<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<link rel="stylesheet" href="${contextPath}/static/assets/css/jquery-ui.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/ui.jqgrid.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/bootstrap-datetimepicker.css" />

<div class="well well-sm">
   <input type="text" class="input-sm" placeholder="搜索关键字" id="keyword"/>
	<input type="text" class="input-sm datepick" placeholder="选择订单创建开始日期" id="payStartDate"/>
	<input type="text" class="input-sm datepick" placeholder="选择订单创建结束日期" id="payEndDate"/>
   <input type="text" class="input-sm datepick" placeholder="选择付款开始日期" id="finStartDate"/>
   <input type="text" class="input-sm datepick" placeholder="选择付款结束日期" id="finEndDate"/>
   <select class="select" id="orderState">
	   <option value="" selected>订单状态</option>
	   <option value="0" >等待审核</option>
	   <option value="1" >取消</option>
	   <option value="-1" >发布</option>
	   <option value="2" >待付款</option>
	   <option value="3" >已付款</option>
	   <option value="4" >查档中</option>
	   <option value="5" >待配送</option>
	   <option value="6" >已完成</option>
	   <option value="7" >已过期</option>
   </select>
	<button type="button" class="btn btn-purple btn-sm" id="searchd">
		<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
		查询
	</button>
</div>

<div class="row">
	<div class="col-xs-12">
		<table id="grid-table"></table>
		<div id="grid-pager"></div>
		<script type="text/javascript">
			var $path_base = "${contextPath}/static";//in Ace demo this will be used for editurl parameter
		</script>
		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">
	var myGrid = null;

	var scripts = [ null, "${contextPath}/static/assets/js/date-time/bootstrap-datepicker.js", "${contextPath}/static/assets/js/date-time/locales/bootstrap-datepicker.zh-CN.js",
	                "${contextPath}/static/assets/js/jqGrid/jquery.jqGrid.js", "${contextPath}/static/assets/js/jqGrid/i18n/grid.locale-cn.js", null ];
	$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
		// inline scripts related to this page
    	jQuery(function($) {
    		var grid_selector = "#grid-table";
    		var pager_selector = "#grid-pager";

    		// 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).keydown(function(event) {
				var key = window.event ? event.keyCode : event.which;
				if (key == 13) {
					$("#searchd").click();
				}
			});

    	    myGrid=	jQuery(grid_selector).jqGrid({
    			subGrid : false,
    			url : "${contextPath}/fs/report/getYdcdReport",
    			datatype : "json",
    			height : '100%',
    			width : 'auto',
    			colNames : ['订单号','支付单号','支付方式','创建时间','付款时间',
    			            '订单类型','订单状态','发单律师','发单律师电话','接单律师','接单律师电话','查档费用','平台抽佣'],
    			colModel : [{	name : 'orderId',
    				index : 'orderId',
    				width : 120,
    				search : false,	
    				editable : false,
					formatter:doFormateDouble,
    			},{	name : 'tradeNo',
    				index : 'tradeNo',
    				width : 150,
    				editable : false,
    			},{	name : 'payType',
    				index : 'payType',
    				width : 100,
    				editable : false
    			},{	name : 'createDate',
    				index : 'createDate',
    				width : 120,
    				editable : false
    			},{	name : 'payedDate',
    				index : 'payedDate',
    				width : 120,
    				editable : false,

    			},{
    				name : 'orderType',
    				index : 'orderType',
    				width : 120,
    				editable : false
    			}, {
    				name : 'orderState',
    				index : 'orderState',
    				width : 100,
    				editable : false
    			}, {
    				name : 'aName',
    				index : 'aName',
    				width : 100,
    				editable : false
    			},{
    				name : 'aPhone',
    				index : 'aPhone',
    				width : 100,
     				sortable : false,
    				editable : false
    			}, {
    				name : 'bName',
    				index : 'bName',
    				width : 120,
     				sortable : false,
    				editable : false
    			}, {
    				name : 'bPhone',
    				index : 'bPhone',
    				width : 120,
     				sortable : false,
    				editable : false
    			} , {
    				name : 'price',
    				index : 'price',
    				width : 80,
    				editable : true,
    				search : false ,
    				edittype: 'textarea'
    			}, {
    				name : 'tax',
    				index : 'tax',
    				width : 80,
    				editable : true,
    				search : false ,
    			}],
    			//scroll : 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
    			sortname : "createDate",
    			sortorder : "desc",
    			viewrecords : true,
    			rowNum : 10,
    			rowList : [ 10, 20, 1000 ],
    			pager : pager_selector,
    			altRows : true,
    			loadComplete : function() {
    				var table = this;
    				setTimeout(function(){
    					styleCheckbox(table);
    					updateActionIcons(table);
    					updatePagerIcons(table);
    					enableTooltips(table);
    				}, 0);
    			},
    			//editurl : "<%--${contextPath}--%>/fs/report/editYdcd",
    			/*prmNames: {
    				page:"page",
    				rows:"rows", 
    				sort: "sidx",
    				order: "sord", 
    				search:"_search", 
    				nd:"nd", 
    				id:"t_orderId",
    				oper:"oper",
    				editoper:"edit",
    				addoper:"add",
    				deloper:"del", 
    				subgridid:"id", 
    				npage: null, 
    				totalrows:"totalrows"
    			},*/
    			jsonReader : {
    				root: "rows",
    				page: "page",
    				total: "total",
    				records: "records",
    				repeatitems: true,
    				cell: "cell",
    				id: "orderId",
    				userdata: "userdata",
    				subgrid: {root:"rows", repeatitems: true, cell:"cell"}
    			}
    			//caption : "用户管理列表",
    			//autowidth : true,
    			/**
    			grouping : true, 
    			groupingView : { 
    				 groupField : ['name'],
    				 groupDataSorted : true,
    				 plusicon : 'fa fa-chevron-down bigger-110',
    				 minusicon : 'fa fa-chevron-up bigger-110'
    			},
    			*/
    		});
    	    
			$(window).triggerHandler('resize.jqGrid');// trigger window resize to make the grid get the correct size
    		
    		// enable search/filter toolbar
    		// jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
    		// jQuery(grid_selector).filterToolbar({});
    		// switch element when editing inline
    		function aceSwitch(cellvalue, options, cell) {
    			setTimeout(function() {
    				$(cell).find('input[type=checkbox]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
    			}, 0);
    		}
    		
    		// navButtons
    		jQuery(grid_selector).jqGrid('navGrid', pager_selector,  { // navbar options
    			edit : false,
    			editicon : 'ace-icon fa fa-pencil blue',
    			add : false,
    			addicon : 'ace-icon fa fa-plus-circle purple',
    			del : false,
    			delicon : 'ace-icon fa fa-trash-o red',
    			search : false,
    			searchicon : 'ace-icon fa fa-search orange',
    			refresh : true,
    			refreshicon : 'ace-icon fa fa-refresh blue',
    			view : false,
    			viewicon : 'ace-icon fa fa-search-plus grey'
    		}, {
    			// edit record form
    			closeAfterEdit: true,
    			// width: 700,
    			recreateForm : true,
    			beforeShowForm : function(e) {
    				var form = $(e[0]);
    				form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
    				style_edit_form(form);
    			},
				errorTextFormat: function (response) {
					var result = eval('('+response.responseText+')');
				    return result.message;
				}
    		})


    		
    		function style_edit_form(form) {
    			// form.find('input[name=statusCn]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
    			// don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
    			// .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');

    			// update buttons classes
    			var buttons = form.next().find('.EditButton .fm-button');
    			buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();// ui-icon, s-icon
    			buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
    			buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

    			buttons = form.next().find('.navButton a');
    			buttons.find('.ui-icon').hide();
    			buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
    			buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
    		}

    		function beforeEditCallback(e) {
    			var form = $(e[0]);
    			form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
    			style_edit_form(form);
    		}

    		// it causes some flicker when reloading or navigating grid
    		// it may be possible to have some custom formatter to do this as the grid is being created to prevent this
    		// or go back to default browser checkbox styles for the grid
    		function styleCheckbox(table) {
    			/**
    			 * $(table).find('input:checkbox').addClass('ace') .wrap('<label />') .after('<span class="lbl align-top" />') $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
    			 * .find('input.cbox[type=checkbox]').addClass('ace') .wrap('<label />').after('<span class="lbl align-top" />');
    			 */
    		}

    		// unlike navButtons icons, action icons in rows seem to be hard-coded
    		// you can change them like this in here if you want
    		function updateActionIcons(table) {
    			/**
    			 * var replacement = { 'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue', 'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red', 'ui-icon-disk' : 'ace-icon fa fa-check green', 'ui-icon-cancel' :
    			 * 'ace-icon fa fa-times red' }; $(table).find('.ui-pg-div span.ui-icon').each(function(){ var icon = $(this); var $class = $.trim(icon.attr('class').replace('ui-icon', '')); if($class in replacement)
    			 * icon.attr('class', 'ui-icon '+replacement[$class]); })
    			 */
    		}

    		// replace icons with FontAwesome icons like above
    		function updatePagerIcons(table) {
    			var replacement = {
    				'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
    				'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
    				'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
    				'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
    			};
    			$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() {
    				var icon = $(this);
    				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

    				if ($class in replacement)
    					icon.attr('class', 'ui-icon ' + replacement[$class]);
    			})
    		}

    		function enableTooltips(table) {
    			$('.navtable .ui-pg-button').tooltip({
    				container : 'body'
    			});
    			$(table).find('.ui-pg-div').tooltip({
    				container : 'body'
    			});
    		}

			jQuery(grid_selector).jqGrid('navButtonAdd', pager_selector,{
				caption : "",
				title : "导出Excel",
				buttonicon : "ace-icon fa fa-file-excel-o green",
				onClickButton : function () {
					var keys = [], ii = 0, rows = "";
					var ids = $(grid_selector).getDataIDs(); // Get All IDs
					var row = $(grid_selector).getRowData(ids[0]); // Get First row to get the labels
					var label = $(grid_selector).jqGrid('getGridParam','colNames');
					for(var k in label){
						rows = rows + label[k] + "\t"; // output each Column as tab delimited
					}
					for (var k in row) {
						keys[ii++] = k; // capture col names
					}
					rows = rows + "\n"; // Output header with end of line
					var tIds = {"orderId":true,"tradeNo":true,"payType":false,"createDate":true,"payedDate":true,"areaFullName":false,"orderType":false,
						"aName":false,"aPhone":true,"bName":false,"bPhone":true,"orderState":false,"price":true,"tax":true,"isComplain":false,"type":false};
					for (var i = 0; i < ids.length; i++) {
						row = $(grid_selector).getRowData(ids[i]); // get each row
						for (var j = 0; j < keys.length; j++){
							if(tIds[keys[j]]){
								rows = rows + '="' + row[keys[j]] + '"\t'; // output each Row as tab delimited
							}else{
								rows = rows + row[keys[j]] + '\t'; // output each Row as tab delimited
							}
						}
						rows = rows + "\n"; // output each row with end of line
					}
					rows = rows + "\n"; // end of line at the end
					var form = "<form name='csvexportform' action='${contextPath}/fs/report/getExcel?fileName=ydcd' method='post'>";
					form = form + "<input type='hidden' name='csvBuffer' value='" + encodeURIComponent(rows) + "'>";
					form = form + "</form><script>document.csvexportform.submit();</sc" + "ript>";
					OpenWindow = window.open('', '');
					OpenWindow.document.write(form);
					OpenWindow.document.close();
				}
			});

    		// var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

    		$(document).one('ajaxloadstart.page', function(e) {
    			$(grid_selector).jqGrid('GridUnload');
    			$('.ui-jqdialog').remove();
    		});
    		
    		$("#searchd").click(function(){
				//var keyword = $("#keyword").val();
				var keyword =encodeURI(encodeURI($("#keyword").val()));
				var startDate = $("#payStartDate").val();
				var endDate = $("#payEndDate").val();
				var finStartDate = $("#finStartDate").val();
				var finEndDate = $("#finEndDate").val();
				var orderState = $("#orderState").val();
				if(startDate.length < 1 && endDate.length > 1){
					alert('开始时间不能为空');
					return;
				}
				if(startDate.length > 1 && endDate.length < 1){
					alert('结束时间不能为空');
					return;
				}
				if(startDate.length > 1 && endDate.length > 1){
					if(checkNotDate(startDate)){
						alert('开始时间错误');
						return;
					}
					if(checkNotDate(endDate)){
						alert('结束时间错误');
						return;
					}
					var startTime = new Date(Date.parse(startDate.replace(/-/g, "/")));
					var endTime = new Date(Date.parse(endDate.replace(/-/g, "/")));
					if(endTime.getTime() < startTime.getTime()){
						alert('开始时间不能小于结束时间');
						return;
					}

					var t = new Date();
					var y = t.getFullYear();
					var m = t.getMonth();
					var d = t.getDate();
					var pd = new Date(y-1,m,d);
					if(startDate <= pd){
						alert('最多查询一年数据');
						return;
					}
				}
		    	myGrid.setGridParam({postData:{'keyword':keyword,'startDate':startDate,'endDate':endDate,
		    		'finStartDate':finStartDate,'finEndDate':finEndDate,'orderState':orderState},
		    		url : '${contextPath}/fs/report/getYdcdReport',page:1}).trigger('reloadGrid');
			});

    		function checkNotDate(dateStr){
    			var result = false;
    			var re = /^(\d{4})-(\d{2})-(\d{2})$///正则表达式
    		    if(!re.test(dateStr)){
    		       result = true;
    		    }
    		    return result;
    		}
    		
		    $('.datepick').datepicker({
		        language: 'zh-CN',
		        pickTime: false,
		        todayBtn: true,
		        autoclose: true,
		        minView: '2',
		        forceParse: false,
		        format:"yyyy-mm-dd"
		    });
    	});
	});

	function doFormateDouble(cellvalue, options, rowObject) {

		if(cellvalue==null || cellvalue=='' ||cellvalue=='null'){

			return 0;

		}

		return new Number(cellvalue);

	}



</script>