<%@ 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" />
<script src="${contextPath}/static/js/ssdb/china_area.js"></script>

<style>
	.hr-line-dashed {
	    background-color: #ffffff;
	    border-top: 1px dashed #e7eaec;
	    color: #ffffff;
	    height: 1px;
	    margin: 20px 0;
	}
</style>

<div class="well well-sm">

	<button style="float:right" type="button" class="btn btn-danger btn-sm" data-toggle='modal' onclick='addDict(0)'>
		<span class="ace-icon fa fa-edit icon-on-right bigger-110"></span>
		新增非认证机构
	</button>
	<button style="float:right" type="button" class="btn btn-info btn-sm" data-toggle='modal' onclick='addDict(1)'>
		<span class="ace-icon fa fa-edit 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-add" class="modal fade" tabindex="-1" data-backdrop="static">
	<div class="modal-dialog" >
		<form id="AddForm">
			<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" style="overflow-y: scroll;">
					<div id="mod-add-tip" class="red clearfix"></div>
					<div class="form-group">
						<select class="form-control" id="mod-add-type">
							<option value="0">非认证机构</option>
							<option value="1">依据文档</option>
						</select>
					</div>
					<div class="form-group">
	             		<select class="form-control input-sm" id="mod-add-Province">
	             			<option value="">省份</option>
						</select>
	            	</div>
					<div class="form-group">
	          			<select class="form-control input-sm" id="mod-add-City">
	             			<option value="">城市</option>
						</select>
	          		</div>
	          		<div class="form-group">
						<label for="mod-add-companyName" id="mod-add-companyName-label">非认证机构名</label>
						<textarea id="mod-add-companyName" class="form-control" rows="5"/>
					</div>
					<div class="form-group" id="mod-add-docInfo-div">
						<label for="mod-add-docInfo">依据文档</label>
						<textarea id="mod-add-docInfo" class="form-control" rows="8"/>
					</div>
				</div>
				<div class="modal-footer no-margin-top">
					<div class="text-center">
						<button id="mod-add-submit" type="button" class="btn btn-sm btn-primary">
							<i class="ace-icon fa fa-floppy-o bigger-160"></i>
							保存
						</button>
						<button class="btn btn-sm" data-dismiss="modal">
							<i class="ace-icon fa fa-share bigger-160"></i>
							取消
						</button>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</form>
	</div><!-- /.modal-dialog -->
</div>

<!-- page specific plugin scripts -->
<script type="text/javascript">
function del(id){
	if (confirm("确定删除吗?")) {
		$.getJSON('${contextPath}/sys/ssdbDict/deleteDict?id='+id,function(result){
			if(result.success){
				myGrid.trigger('reloadGrid');
			}else{
				alert(result.message);
			}
		});
	}
}

function showdetail(id){
	alert('未完成');
}

	var scripts = [ null, "${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);
     			}
     		});

     		myGrid=jQuery(grid_selector).jqGrid({
     			subGrid : false,
     			url : "${contextPath}/sys/ssdbDict/getDicts",
     			datatype : "json",
     			height : '99%',
     			colModel : [  {
     				name : 'province',
     				label : '省',
     				width : 200,
     			},{
     				name : 'region',
     				label : '市',
     				width : 200,
     			},{
     				name : 'name',
     				label : '公司/依据文档名',
     				width : 220,
     			}, {
     				name : 'type',
     				label : '类型',
     				width : 80,
     			}, {
     				name : 'createDate',
     				label : '创建时间',
     				width : 120,
     			}, {
     				name : 'id',
     				index : '',
     				label : '操作',
     				width : 220,
     				editable : false,
     				search : false,
     				sortable : false,
     				formatter : optionFormatter
     			}],
     			//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, 30 ],
     			pager : pager_selector,
     			altRows : true,
     			//toppager : true,
     			//multiselect : true,
     			//multikey : "ctrlKey",
     	        //multiboxonly : true,
     			loadComplete : function() {
     				var table = this;
     				setTimeout(function(){
     					//styleCheckbox(table);
     					//updateActionIcons(table);
     					updatePagerIcons(table);
     					enableTooltips(table);
     				}, 0);
     			},
     			//editurl : "${contextPath}/sys/ssdbCompany/saveCompany",
     			//caption : "用户管理列表",
     			//autowidth : true,
     			
     		});

     		$(window).triggerHandler('resize.jqGrid');// trigger window resize to make the grid get the correct size
     		
     		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,
     		});

     		// 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();
     		});
     		
     		function optionFormatter(cellvalue, options, cell) {
     			var template = "<button data-toggle='modal' onclick='showdetail(\""+cellvalue+"\")' class='btn btn-minier btn-yellow'><i class='ace-icon fa fa-hdd-o '></i>详细</button>";
     			template += "&nbsp;<button data-toggle='modal' onclick='del(\""+cellvalue+"\")' class='btn btn-minier btn-danger'><i class='ace-icon fa fa-delete'></i>删除</button>";
     			return template;
     		}
     		
     		//类型绑定onchange事件
     		$("#mod-add-type").bind("change",function(){ 
     		    var value = $(this).val();
    			$('#mod-add-companyName').val('');
    			$('#mod-add-docInfo').val('');
    			if(value == '0'){
    				$('#mod-add-companyName-label').html('非认证机构名');
    				$('#mod-add-docInfo-div').hide();
    			}else{
    				$('#mod-add-companyName-label').html('文档名');
    				$('#mod-add-docInfo-div').show();
    			}
     		}); 
     		
			//初始化省和城市
    		$.each(provinceJson, function(k, p) {
    	        var option = "<option value='" + p.id + "'>" + p.province + "</option>";
    	        $("#mod-add-Province").append(option);
    	    });
    	    $("#mod-add-Province").change(function() {
    	        var selValue = $(this).val();
    	        $("#mod-add-City option:gt(0)").remove();
    	        $.each(cityJson, function(k, p) {
    	            // 直辖市处理.|| p.parent == selValue，直辖市为当前自己
    	            if (p.id == selValue || p.parent == selValue) {
    	                var option = "<option value='" + p.city + "'>" + p.city + "</option>";
    	                $("#mod-add-City").append(option);
    	            }
    	        });
    	    });
    	    
    	    //保存添加数据
    	    $("#mod-add-submit").on("click", function(e) {
         		var type = $('#mod-add-type').val();
         		var province = $("#mod-add-Province").find("option:selected").text();
         		var city = $("#mod-add-City").find("option:selected").text();
         		var companyName = $("#mod-add-companyName").val();
         		var docInfo = $("#mod-add-docInfo").val();
         		if('省份' == province){
         			alert('请选择省份');
         			return;
         		}
         		if('城市' == city){
         			city = "";
         		}
         		if(type == '0'){
         			if(companyName.length < 1){
             			alert('非认证机构名不能为空');
             			return;
             		}
         		}else{
         			if(companyName.length < 1){
             			alert('文档名不能为空');
             			return;
             		}
         			if(docInfo.length < 1){
             			alert('依据文档不能为空');
             			return;
             		}
         		}
         	   	$.ajax({
       				dataType : "json",
       				url : "${contextPath}/sys/ssdbDict/add",
       				type : "post",
       				data : {
       					'type':type,
       					'province':province,
       					'city':city,
       					'companyName':companyName,
       					'docInfo':docInfo
       				},
       				complete : function(ret) {
       					if(ret.success){
       						$("#mod-add").modal("toggle");
       						myGrid.trigger("reloadGrid");
       					}else{
       						alert(ret.message);
       					}
       				}
         		});
         	});
     	});
	});
	
	function addDict(i){
		$('#mod-add-type').val(i.toString());
		$('#mod-add-companyName').val('');
		$('#mod-add-docInfo').val('');
		if(i == 0){
			$('#mod-add-companyName-label').html('非认证机构名');
			$('#mod-add-docInfo-div').hide();
		}else{
			$('#mod-add-companyName-label').html('文档名');
			$('#mod-add-docInfo-div').show();
		}
		$("#mod-add").modal("toggle");
	}
</script>
