<%@ 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/js/contract/ace.fileinput.css" />

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

<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>
	</div><!-- /.col -->
</div><!-- /.row -->

<div id="mod-add" class="modal fade" tabindex="-1" data-backdrop="static">
	<div class="modal-dialog" style="min-width: 700px;">
		<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="max-height: 500px;overflow-y: scroll;">
	      		<form id="addContractForm" class="form-horizontal">
	      			<input type="hidden" name="logoPath" id="mod-add-logoPath"/>
			      	<div class="form-group">
			      		<label class="col-sm-2 control-label">标题</label>
			      		<div class="col-sm-10 text-left">
			      			<input type="text" id="mod-add-name" class="form-control" />
			      		</div>
			      	</div>
			      	<div class="hr-line-dashed"></div>
			      	<div class="form-group">
			      		<label class="col-sm-2 control-label">图标</label>
			      		<div class="col-sm-10 text-left">
			      			<a href="#" target="_blank" id="mod-add-logo-a" class="collapse"></a>
			      			<button type="button" class="btn btn-minier btn-primary" style="height:34px;" id="mod-add-logo-button">上传图标</button>
			      		</div>
			      	</div>
			      	<div class="hr-line-dashed"></div>
			      	<div class="form-group">
			      		<label class="col-sm-2 control-label">排序</label>
			      		<div class="col-sm-10 text-left">
			      			<input type="text" id="mod-add-priority" class="form-control" />
			      		</div>
			      	</div>
			      	<div class="hr-line-dashed"></div>
			      	<div class="form-group">
			      		<label class="col-sm-2 control-label">文件</label>
			      		<div class="col-sm-10 text-left">
			      			<button type="button" class="btn btn-minier btn-primary" style="height:34px;" id="mod-add-file-button">上传文件</button>
			      		</div>
			      	</div>
			      	<div class="form-group" id="mod-add-file-list"></div>
			      	<div class="hr-line-dashed"></div>
			      	<div class="form-group">
			      		<label class="col-sm-2 control-label">备注</label>
			      		<div class="col-sm-10 text-left">
			      			<textarea id="mod-add-remark" class="form-control" rows="3"/>
			      		</div>
			      	</div>
		      	</form>
	      	</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>
	</div>
</div>

<div id="mod-edit" class="modal fade" tabindex="-1" data-backdrop="static">
	<div class="modal-dialog" style="min-width: 700px;">
		<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="max-height: 500px;overflow-y: scroll;">
	      		<form id="editContractForm" class="form-horizontal">
	      			<input type="hidden" name="logoPath" id="mod-edit-logoPath"/>
	      			<input type="hidden" name="modelId" id="mod-edit-modelId"/>
			      	<div class="form-group">
			      		<label class="col-sm-2 control-label">标题</label>
			      		<div class="col-sm-10 text-left">
			      			<input type="text" id="mod-edit-name" class="form-control" />
			      		</div>
			      	</div>
			      	<div class="hr-line-dashed"></div>
			      	<div class="form-group">
			      		<label class="col-sm-2 control-label">图标</label>
			      		<div class="col-sm-10 text-left">
			      			<a href="#" target="_blank" id="mod-edit-logo-a" class="collapse"></a>
			      			<button type="button" class="btn btn-minier btn-primary" style="height:34px;" id="mod-edit-logo-button">上传图标</button>
			      		</div>
			      	</div>
			      	<div class="hr-line-dashed"></div>
			      	<div class="form-group">
			      		<label class="col-sm-2 control-label">排序</label>
			      		<div class="col-sm-10 text-left">
			      			<input type="text" id="mod-edit-priority" class="form-control" />
			      		</div>
			      	</div>
			      	<div class="hr-line-dashed"></div>
			      	<div class="form-group">
			      		<label class="col-sm-2 control-label">文件</label>
			      		<div class="col-sm-10 text-left">
			      			<button type="button" class="btn btn-minier btn-primary" style="height:34px;" id="mod-edit-file-button">上传文件</button>
			      		</div>
			      	</div>
			      	<div class="form-group" id="mod-edit-file-list"></div>
			      	<div class="hr-line-dashed"></div>
			      	<div class="form-group">
			      		<label class="col-sm-2 control-label">备注</label>
			      		<div class="col-sm-10 text-left">
			      			<textarea id="mod-edit-remark" class="form-control" rows="3"/>
			      		</div>
			      	</div>
		      	</form>
	      	</div>
	      	<div class="modal-footer no-margin-top">
                <div class="text-center">
					<button id="mod-edit-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>
	</div>
</div>

<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">
				<!-- PAGE CONTENT BEGINS -->
				<form id="fileform" class="form-horizontal">
					<div class="row">
						<div class="col-xs-12">
							<input id="fileId" type="file" name="avatar" multiple />
							<input type="hidden" name="attachId" id="mod-file-attachId"/>
							<input type="hidden" name="attachPath" id="mod-file-attachPath"/>
						</div><!-- /.col -->
						<div class="col-xs-12">
							<label class="col-sm-2 no-padding">描述:</label>
				      		<div class="col-sm-10 text-left no-padding">
				      			<input type="text" id="mod-file-description" class="form-control" />
				      		</div>
						</div>
						<div class="col-xs-12"></div>
						<div class="col-xs-12">
					      	<label class="col-sm-2 no-padding">排序:</label>
				      		<div class="col-sm-10 text-left no-padding">
				      			<input type="text" id="mod-file-priority" class="form-control" />
				      		</div>
						</div>
						<div class="col-xs-12">
			      			<div class="hr hr-12 dotted"></div>
			      		</div>
						<div class="col-xs-12">
							<div class="text-center">
								<button type="button" class="btn btn-sm btn-primary" id="mod-file-submit">上传</button>
								<button type="reset" class="btn btn-sm">清除</button>
							</div>
						</div>
					</div><!-- /.row -->
				</form>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div>

<div id="mod-pic" 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="picform" >
							<input id="picFileId" type="file" name="file" multiple />
							<input type="hidden" name="picPath" id="mod-pic-path"/>
							<div class="hr hr-12 dotted"></div>
							<div class="text-center">
							<button type="button" class="btn btn-sm btn-primary" id="mod-pic-submit">上传</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 contractFileInfo = {};
	var contractFileUpdateInfo = {};
	var currentModFileOperationType = null;//add/update
	var currentPicOperationType = null;//add/update
	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/promise-6.1.0.js", "http://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js",
	                "${contextPath}/static/js/contract/ace.fileinput.js", "${contextPath}/static/js/contract/uuid.js",
	                "${contextPath}/static/js/contract/fileupload.js", "${contextPath}/static/js/contract/picupload.js",
	                "${contextPath}/static/js/contract/oss.js", "${contextPath}/static/js/contract/contractModel.js",
	                "${contextPath}/static/assets/js/lazyload/jquery.lazyload.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/contractModel/getModels",
     			datatype : "json",
     			height : '99%',
     			colModel : [  {
     				name : 'id',
     				label : '',
     				width : 80,
       				viewable:false,
       				hidden : true,
     			},{
     				name : 'name',
     				label : '标题',
     				width : 200,
     			},{
     				name : 'priority',
     				label : '排序',
     				width : 80,
     			},{
     				name : 'createDate',
     				label : '创建时间',
     				width : 100,
     			}, {
     				name : 'remark',
     				label : '备注',
     				width : 100,
     			},{
     				name : 'logo',
     				label : '',
     				width : 80,
       				viewable:false,
       				hidden : true,
     			}],
     			//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,
       			multiselect : true,
     			loadComplete : function() {
     				var table = this;
     				setTimeout(function(){
     					updatePagerIcons(table);
     					enableTooltips(table);
     				}, 0);
     			},
     		});

     		$(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();
     		});
     		
     		jQuery(grid_selector).jqGrid('navButtonAdd', pager_selector,{
     			caption:"",
			    title : "新增合同范本",
     			buttonicon:"ui-icon ace-icon fa fa-plus-circle purple",
     			onClickButton: function(){
     				for(var key in contractFileInfo){
     					$("#" + key).remove();
     				}
     				contractFileInfo = {};
         			currentModFileOperationType = 'add';
         			$("#mod-pic-path").val("");
     				$("#mod-add-logo-a").addClass("collapse");
     				$("#addContractForm")[0].reset();
     				$("#mod-add").modal("toggle");
     			},
     			position:"last"
			}).jqGrid('navButtonAdd', pager_selector,{
     			caption:"",
			    title : "修改合同范本",
     			buttonicon:"ui-icon ace-icon fa fa-pencil blue",
     			onClickButton: function(){
     				var selectedIds = myGrid.jqGrid("getGridParam", "selarrrow");
     				if(selectedIds.length < 1){
     					showMsg('请选择记录');
     					return;
     				}
     				if(selectedIds.length > 1){
     					showMsg('只能选择一条记录');
     					return;
     				}
     				var rowData = myGrid.jqGrid('getRowData',selectedIds[0]);
     				$('#mod-edit-modelId').val(rowData.id);
     				$('#mod-edit-name').val(rowData.name);
     				$('#mod-edit-priority').val(rowData.priority);
     				$('#mod-edit-remark').val(rowData.remark);
     				contractFileUpdateInfo = {};
     				currentModFileOperationType = 'update';
     				$("#mod-edit-logo-a").addClass("collapse");
     				showLogo(rowData.logo);
     				contractFileLoad(rowData.id, contractFileLoadSuccessCallback);
    				$("#mod-edit").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;
     				}
     				if(selectedIds.length > 1){
     					showMsg('只能选择一条记录');
     					return;
     				}
     				var rowData = myGrid.jqGrid('getRowData',selectedIds[0]);
     				currentDeleteModelId = rowData.id;
     				contractFileLoad(rowData.id, contractFileLoadSuccessCallback2);
     			},
     			position:"last"
			});
     		
     		//oss init
     		appServer = 'http://b.duowenlvshi.com/oss/token?name=a';
     		bucket = '${oss_bucket_a}';
     		region = 'oss-cn-shenzhen';
     		logoUrl = '${oss_bucket_a_url}';
     		logoThum = '${oss_bucket_a_url_img}';
     		logoSize = '@200w_200h_0e_1c_50Q_1x.';
     		
     		$("#mod-add-file-button").click(function(event) {
     			$("#fileform")[0].reset();
     			$("#mod-file").modal("toggle");
			});

     		$("#mod-add-logo-button").click(function(event) {
     			currentPicOperationType = "add";
     			$("#picform")[0].reset();
     			$("#mod-pic").modal("toggle");
			});
     		
     		$("#mod-add-submit").click(function(event) {
     			contractModelAdd();
			});

     		$("#mod-edit-file-button").click(function(event) {
     			$('#mod-file-attachId').val('');
     			$('#mod-file-attachPath').val('');
     			$("#fileform")[0].reset();
     			$("#mod-file").modal("toggle");
			});

     		$("#mod-edit-logo-button").click(function(event) {
     			currentPicOperationType = "update";
     			$("#picform")[0].reset();
     			$("#mod-pic").modal("toggle");
			});
     		
     		$("#mod-edit-submit").click(function(event) {
     			contractModelEdit();
			});
     		
     		$("#mod-file-submit").click(function(event) {
     			if('add' == currentModFileOperationType){
     				contractFileAdd();
     			}else{
     				contractFileUpdate();
     			}
			});

     		$("#mod-pic-submit").click(function(event) {
     			logoUpload();
			});
     		
     		contextPath = '${contextPath}';
     		
     		
     	});
	});
</script>