<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>合同管理管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		var validateForm;
        function doSubmit(obj){
            // 回调函数，在编辑和保存动作时，供openDialog调用提交表单。
            if(validateForm.form()){
                if(obj == 1){
                    $("#inputForm").attr("action","${ctx}/workcontractinfo/workContractInfo/save");
                }else if(obj ==2){
                    $("#inputForm").attr("action","${ctx}/workcontractinfo/workContractInfo/abandoned");
                } else{
                }
                $("#inputForm").submit();
                return true;
            }
            return false;
        }
		$(document).ready(function() {
			validateForm = $("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			
					laydate.render({
			            elem: '#contractDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
			        });
					laydate.render({
			            elem: '#effectiveDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
			        });
					laydate.render({
			            elem: '#closingDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
			        });
		});
		function addRow(list, idx, tpl, row){
			$(list).append(Mustache.render(tpl, {
				idx: idx, delBtn: true, row: row
			}));
			$(list+idx).find("select").each(function(){
				$(this).val($(this).attr("data-value"));
			});
			$(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
				var ss = $(this).attr("data-value").split(',');
				for (var i=0; i<ss.length; i++){
					if($(this).val() == ss[i]){
						$(this).attr("checked","checked");
					}
				}
			});
		}
		function delRow(obj, prefix){
			var id = $(prefix+"_id");
			var delFlag = $(prefix+"_delFlag");
			if (id.val() == ""){
				$(obj).parent().parent().remove();
			}else if(delFlag.val() == "0"){
				delFlag.val("1");
				$(obj).html("&divide;").attr("title", "撤回删除");
				$(obj).parent().parent().addClass("error");
			}else if(delFlag.val() == "1"){
				delFlag.val("0");
				$(obj).html("&times;").attr("title", "删除");
				$(obj).parent().parent().removeClass("error");
			}
		}
	</script>
</head>
<body class="hideScroll">
	<form:form id="inputForm" modelAttribute="workContractInfo"  method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>	
		<table class="table table-bordered  table-condensed dataTables-example dataTable no-footer">
		   <tbody>
				<tr>
					<td class="width-15 active"><label class="pull-right"><font color="red">*</font>合同名称：</label></td>
					<td class="width-35">
						<form:input path="name" htmlEscape="false"    class="form-control required"/>
					</td>
					<td class="width-15 active"><label class="pull-right">签订日期：</label></td>
					<td class="width-35">
						<input id="contractDate" name="contractDate" type="text" maxlength="20" class="laydate-icon form-control layer-date "
							value="<fmt:formatDate value="${workContractInfo.contractDate}" pattern="yyyy-MM-dd"/>"/>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">合同生效日期：</label></td>
					<td class="width-35">
						<input id="effectiveDate" name="effectiveDate" type="text" maxlength="20" class="laydate-icon form-control layer-date "
							value="<fmt:formatDate value="${workContractInfo.effectiveDate}" pattern="yyyy-MM-dd"/>"/>
					</td>
					<td class="width-15 active"><label class="pull-right">合同终止日期：</label></td>
					<td class="width-35">
						<input id="closingDate" name="closingDate" type="text" maxlength="20" class="laydate-icon form-control layer-date "
							value="<fmt:formatDate value="${workContractInfo.closingDate}" pattern="yyyy-MM-dd"/>"/>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">客户名称：</label></td>
					<td class="width-35">
						<sys:gridselect url="${ctx}/workcontractinfo/workContractInfo/selectclient" id="client" name="client.id"  value="${workContractInfo.client.id}"  title="选择客户ID" labelName="client.name"
										labelValue="${workContractInfo.client.name}" cssClass="form-control required" fieldLabels="客户名称" fieldKeys="name" searchLabel="客户名称" searchKey="name" ></sys:gridselect>
					</td>
					<td class="width-15 active"><label class="pull-right">合同类型：</label></td>
					<td class="width-35">
						<form:select path="contractType" class="form-control ">
							<form:option value="0" label="请选择"/>
							<%--<form:option value="1" label="工程咨询"/>
							<form:option value="2" label="工程审核"/>
							<form:option value="3" label="招标代理"/>
							<form:option value="4" label="跟踪审计"/>
							<form:option value="5" label="其他"/>--%>
<form:options items="${fns:getDictList('contract_info_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">合同编号：</label></td>
					<td class="width-35">
						<form:input path="contractNum" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right">合同金额(元)预计金额：</label></td>
					<td class="width-35">
						<form:input path="contractPrice" htmlEscape="false"    class="form-control  number"/>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">负责公司/部门：</label></td>
					<td class="width-35">
						<form:input path="chargeCompany" htmlEscape="false"  value="${fns:getUser().company}"  class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right"> 创建人：</label></td>
					<td class="width-35">
						<form:input path="createBy.id" htmlEscape="false"  readonly="true" value="${fns:getUser().name}" class="form-control "/>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">收费标准：</label></td>
					<td class="width-35">
						<form:textarea path="contractFee" htmlEscape="false" rows="4"    class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right">合同特别条款：</label></td>
					<td class="width-35">
						<form:textarea path="contractSpecial" htmlEscape="false" rows="4"    class="form-control "/>
					</td>
				</tr>
					<form:input path="contractState" style="display: none" htmlEscape="false"  readonly="true" value="2" class="form-control "/>
		 	</tbody>
		</table>
<%--	<div class="tabs-container">
		<table>
			<label class="control-label">请选择审批角色：</label>
			<div id="addida" class="controls">
				<form:select path="contractCategory" class="form-control ">
					<form:option value="" label=""/>
					<form:options items="${fns:getRoleList()}" itemLabel="label" itemValue="value" htmlEscape="false"/>
				</form:select>
			</div>
		</table>
	</div>--%>
		<div class="tabs-container">
            <ul class="nav nav-tabs">
				<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">合同附件表：</a>
                </li>
            </ul>
            <div class="tab-content">
				<div id="tab-1" class="tab-pane active">
			<%--<a class="btn btn-white btn-sm" onclick="addRow('#workContractAnnexList', workContractAnnexRowIdx, workContractAnnexTpl);workContractAnnexRowIdx = workContractAnnexRowIdx + 1;" title="新增"><i class="fa fa-plus"></i> 新增</a>--%>
				<div id="upload_image_div" class="addBtn">
					<div id="upload_div_1" style="float: left;position:relative;width: 57px;height: 57px;" >
						<img  id="upload_image_1" class="upload_ico" style="cursor:pointer;width:50px;height:50px;"  src="${pageContext.request.contextPath}/static/uploadify/upload_ico.png"  onclick="upload_image_button(1)"/>
						<input id="upload_file_1" type="file" style="display:none"  name="upload_files"  onchange="upload_show_image(1)" /><br>
					</div>
				</div>
				<script type="text/javascript">
                    $(function () {
                        $("img").not(".upload_ico").each(function () {
                            var num = 1 ;
                            $(this).click(function () {
                                var flag = num%2;
                                if(flag == 1){
                                    $(this).css("width","90%");
                                    $(this).css("height","90%");
                                    num++;
                                }else if(flag ==0){
                                    $(this).css("width","50px");
                                    $(this).css("height","50px");
                                    num++;
                                }
                            })
                        });
                        $("#param").val() == 2 && $(".addBtn").hide() || $(".addBtn").show()
                    })

                    //上传
                    function upload_image_button(index){
                        $("#upload_file_"+index).click();
                    }
                    function upload_show_image(index){
                        var image =$("#upload_file_"+index)[0].files[0];
                        var url = window.URL.createObjectURL(image);
                        $("#upload_image_"+index).attr("src",url);
                        var length = $("#upload_image_div :file").length;
                        if( index == length &&  length < 5 ){
                            upload_image_append(index);
                            add_x(index);
                        }else if(index == length && length ==5){
                            var span = '<span id="upload_close_'+index+'" class="close_ico" style="cursor:pointer; position: absolute;top:-1px;right: -1px; display:inline-block;z-index:1;color: red;" onclick="close_img('+index+');">x</span>';
                            $("#upload_image_5").before(span);
                        }
                    }
                    function upload_image_append(index){
                        var div1 = "<div id='upload_div_"+(index+1)+"' style='float:left;position:relative;width: 57px;height: 57px;margin-left:5px;'>";
                        var img = '<img id="upload_image_'+(index+1)+'" class="upload_ico" width="50px" height="50px"  onclick="upload_image_button('+(index+1)+')" src = "${pageContext.request.contextPath}/static/uploadify/upload_ico.png" style="cursor:pointer;width:50px;height:50px;"/>';
                        var input = '<input id="upload_file_'+(index+1)+'" type="file" style="display:none;" name="upload_files" onChange="upload_show_image('+(index+1)+')" /><br>';
                        var div2 = "</div>";
                        $("#upload_image_div").append(div1+img+input+div2);
                    }
                    function close_img(index) {
                        $("#upload_div_"+index).remove();
                        var length = $("#upload_image_div :file").length;
                        if(length == 0){
                            add_div();
                        }else if(length == 1){
                            var x = $("#upload_image_div").find("span").text();
                            if("x" != x){
                                add_div();
                            }
                        }
                    }
                    function add_x(index) {
                        var span = '<span id="upload_close_'+index+'" class="close_ico" style="cursor:pointer; position: absolute;top:-1px;right: -1px; display:inline-block;z-index:1;color: red;" onclick="close_img('+index+');">x</span>';
                        $("img:eq(-2)").before(span);
                    }
                    function add_div() {
                        var upload_div_1 =
                            '<div id="upload_div_1" style="float: left;position:relative;width: 57px;height: 57px;margin-left:5px;" >'+
                            '<img  id="upload_image_1" class="upload_ico" style="cursor:pointer;width:50px;height:50px;"  src="${pageContext.request.contextPath}/static/uploadify/upload_ico.png"  onclick="upload_image_button(1)"/>'+
                            '<input id="upload_file_1" type="file" style="display:none"  name="upload_files"  onchange="upload_show_image(1)" /><br>'+
                            '</div>';
                        $("#upload_image_div").html("").append(upload_div_1);
                    }
				</script>

					<table id="contentTable" class="table table-striped table-bordered table-condensed">
				<thead>
					<tr>
						<th class="hide"></th>
						<th>文件名称</th>
						<th>文件地址</th>
						<th width="10">&nbsp;</th>
					</tr>
				</thead>
				<tbody id="workContractAnnexList">
				</tbody>
			</table>
			<script type="text/template" id="workContractAnnexTpl">//<!--
				<tr id="workContractAnnexList{{idx}}">
					<td class="hide">
						<input id="workContractAnnexList{{idx}}_id" name="workContractAnnexList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
						<input id="workContractAnnexList{{idx}}_delFlag" name="workContractAnnexList[{{idx}}].delFlag" type="hidden" value="0"/>
					</td>
					
					<td>
						<input id="workContractAnnexList{{idx}}_name" name="workContractAnnexList[{{idx}}].name" type="text" value="{{row.name}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="workContractAnnexList{{idx}}_url" name="workContractAnnexList[{{idx}}].url" type="hidden" value="{{row.url}}" maxlength="1000" class="form-control"/>
						<sys:ckfinder input="workContractAnnexList{{idx}}_url" type="files" uploadPath="/workcontractinfo/workContractInfo" selectMultiple="true"/>
					</td>
					
					<td class="text-center" width="10">
						{{#delBtn}}<span class="close" onclick="delRow(this, '#workContractAnnexList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
					</td>
				</tr>//-->
			</script>
			<script type="text/javascript">
				var workContractAnnexRowIdx = 0, workContractAnnexTpl = $("#workContractAnnexTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
				$(document).ready(function() {
					var data = ${fns:toJson(workContractInfo.workContractAnnexList)};
					for (var i=0; i<data.length; i++){
						addRow('#workContractAnnexList', workContractAnnexRowIdx, workContractAnnexTpl, data[i]);
						workContractAnnexRowIdx = workContractAnnexRowIdx + 1;
					}
				});
			</script>
			</div>
		</div>
		</div>
	</form:form>
</body>
</html>