<%@ 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/datepicker.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/ui.jqgrid.css" />
<link rel="stylesheet" href="${contextPath}/static/ssdb/ace.fileinput.css"/>

<div class="well well-sm">
	省：<select id="areaProvince" onchange="setChArea(this)">
			<option selected value="" >全部</option>						    
	   </select>
	市：<select id="areaCity" onchange="setChArea(this)"></select>
	区：<select id="areaCounty"></select>
	<input type="text" class="input-sm" placeholder="搜索关键字" id="keyword"/>
	<select class="select" id="orderType">
		<option value="" selected = "selected">类型</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>
	</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 -->

<div id="mod-file" class="modal fade" tabindex="-1">
	<div class="modal-dialog" style="max-width: 500px;">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<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">
				<div class="row">
					<div class="col-xs-12">
						<!-- PAGE CONTENT BEGINS -->
						<form id="fileform" method="post" action="${contextPath}/cd/cdMaterial/upload">
							<input  type="file" name="avatar" multiple />
							<div class="hr hr-12 dotted"></div>
							<div class="text-center">
							<button type="submit" class="btn btn-sm btn-primary">上传</button>
							<button type="reset" class="btn btn-sm">清除</button>
							</div>
						</form>
					</div><!-- /.col -->
				</div><!-- /.row -->
				
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div>

<!-- page specific plugin scripts -->
<script type="text/javascript">
	var myGrid = null;
	
	var scripts = [ null, "${contextPath}/static/assets/js/jqGrid/jquery.jqGrid.js", "${contextPath}/static/assets/js/jqGrid/i18n/grid.locale-cn.js", "${contextPath}/static/js/contract/fileupload.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();
				}
			});
	
		/*搜索框  主要对Jquery grid进行刷新 带参数刷新    */
			$("#searchd").click(function(){
				var keyword =$("#keyword").val();
				var province = $("#areaProvince").val();
				var city = $("#areaCity").val();
				var county = $("#areaCounty").val();
				var orderType =$("#orderType").val();
		    	myGrid.setGridParam({data:'json',url : '${contextPath}/cd/cdMaterial/getMaterial?keyword='+keyword+'&orderType='+orderType+'&provinceCode='+province+'&cityCode='+city+'&countyCode='+county}).trigger('reloadGrid');
			});
			
		    myGrid=	jQuery(grid_selector).jqGrid({
				subGrid : false,
				url : "${contextPath}/cd/cdMaterial/getMaterial",
				datatype : "json",
				height : 450,
				colNames : ['名称', '备注','城市','区/县','类型','必须'],
				colModel : [{	name : 'name',
					index : 'name',
					width : 200,
					editable : false,
					//sorttype : 'date'
				},{	name : 'remark',
					index : 'remark',
					width : 200,
					search : false,	
					editable : false,
					readonly : true,
					//sorttype : 'date'
				},{	name : 'city',
					index : 'city',
					width : 100,
					search : false,	
					editable : false,
				},{	name : 'county',
					index : 'county',
					width : 150,
					search : false,	
					editable : false,
				},{
					name : 'orderType',
					index : 'orderType',
					width : 100,
					editable : false,
					formatter:defaultOrderTypeFormat
				},{
					name : 'need',
					index : 'need',
					width : 100,
					formatter:defaultNeedFormat,
					editable : true
				}],
				//scroll : 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
				sortname : "address",
				sortorder : "asc",
				viewrecords : true,
				rowNum : 10,
				rowList : [ 10, 20, 30 ],
				pager : pager_selector,
				altRows : true,
       			multiselect : true,
				loadComplete : function() {
					var table = this;
					setTimeout(function(){
						styleCheckbox(table);
						updateActionIcons(table);
						updatePagerIcons(table);
						enableTooltips(table);
					}, 0);
				}
				//caption : "用户管理列表",
				//autowidth : true,
				/**
				grouping : true, 
				groupingView : { 
					 groupField : ['name'],
					 groupDataSorted : true,
					 plusicon : 'fa fa-chevron-down bigger-110',
					 minusicon : 'fa fa-chevron-up bigger-110'
				},
				*/
			});
			
			//默认值格式化: OrderType 状态
			function defaultOrderTypeFormat(cellvalue, options, rowObject){
				switch(cellvalue){
					case 1:
						return "工商基本信息";
						break;
					case 2:
						return "工商内档信息";
						break;
					case 3:
						return "户籍信息";
						break;
					case 4:
						return "婚姻信息";
						break;
					case 5:
						return "房产信息";
						break;
					case 6:
						return "车辆信息";
						break;
					default:
						return cellvalue;
				}
			}
	
			//默认值格式化: Need 状态
			function defaultNeedFormat(cellvalue, options, rowObject){
				switch(cellvalue){
					case 0:
						return "否";
						break;
					case 1:
						return "是";
						break;
					default:
						return cellvalue;
				}
			}
	
			$(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, {
     			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 : false,
       			refreshicon : 'ace-icon fa fa-refresh blue',
       			view : false,
     		}).jqGrid('navButtonAdd', pager_selector,{
     			caption:"",
			    title : "导入查档所需材料",
     			buttonicon:"ui-icon ace-icon fa fa-plus-circle purple",
     			onClickButton: function(){
     				$("#mod-file").modal("toggle");
     			},
     			position:"last"
			}).jqGrid('navButtonAdd', pager_selector,{
     			caption:"",
			    title : "删除查档所需材料",
     			buttonicon:"ui-icon ace-icon fa ui-icon-trash blue",
     			onClickButton: function(){
     				var selectedIds = myGrid.jqGrid("getGridParam", "selarrrow");
     				if(selectedIds.length < 1){
     					showMsg('请选择记录');
     					return;
     				}
     				deleteMaterials(selectedIds);
     			},
     			position:"last"
			});
			
			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'
				});
			}
	
			// var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
	
			$(document).one('ajaxloadstart.page', function(e) {
				$(grid_selector).jqGrid('GridUnload');
				$('.ui-jqdialog').remove();
			});
			
			$('#modal-edit-order-confirm').click(function(event) {
	 			editOrder();
			});
			
			initAreaProvince();
		});
	});

	function deleteMaterials(ids){
		$.ajax({
			dataType : "json",
			url : "${contextPath}/cd/cdMaterial/deleteMaterials",
			type : "post",
			traditional: true,
			data : {
				'ids' : ids
			},
			complete : function(ret) {
				var ret = eval("(" + ret.responseText + ")");
				if(ret.success){
					alert('删除成功');
					myGrid.trigger("reloadGrid");
				}else{
					alert(ret.message);
				}
			}
		});
	}
	
	//显示信息
	function showMsg(msg){
		if(msg != undefined && msg.length > 0){
			alert(msg);
		}
	}

    function uploadFileSuccess(){
    	$("#mod-file").modal("toggle");
    }
	
	function initAreaProvince(){
		$.getJSON("${contextPath}/sys/cdPrice/getProvince",function(result){
    		$.each(result, function(i, v){
    			$("#areaProvince").append("<option value='"+v.code+"'>"+v.name+"</option>");
    		});
  		});	
	}

	function setChArea(obj){  
	    var val = obj.value;  
	    var sec = null;
	    var areaId = $(obj).attr("id");
		if(areaId=="areaProvince"){
			sec = document.getElementById('areaCity');
		}else{
			sec = document.getElementById('areaCounty');
		}			
	    sec.innerHTML = "<option value=''>全部</option>"; 
	    if(val != ''){  
	    	//ajax
	    	$.getJSON("${contextPath}/sys/cdPrice/getAreas?parentCode="+val,function(result){
	    		$.each(result, function(i, v){
	    			sec.innerHTML+="<option value='"+v.code+"'>"+v.name+"</option>";
	    		});
	  		});
	    }     
	}
    
</script>