<%@ 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;
        var count = 0;
        function doSubmit(obj){
            $("#contractPrice").val($("#contractPrice").val().replace(/\,/g, ""));
            $("#investmentAmount").val($("#investmentAmount").val().replace(/\,/g, ""));
            // 回调函数，在编辑和保存动作时，供openDialog调用提交表单。
            if(validateForm.form()){
               // if(obj == 1) {
                    $("#flag").val("yes");
                /*}else {
                    //暂存
                    $("#inputForm").attr("action","${ctx}/workcontractinfo/workContractInfo/store");
                }*/
                $("#inputForm").submit();
                return true;
            }else {
                parent.layer.msg("信息未填写完整!", {icon: 5});
            }
            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);
					}
				}
			});
            getRandom();
			$("#contractFee").change(function(){
                //状态为其他的时候  添加required样式
                if($(this).val() == "4"){
                    $("#contractFeeDoc").attr("class","form-control required");
                }else{
                    $("#contractFeeDoc").attr("class","form-control");
                }
            });
           /* $("#contractType").change(function(){
                //状态为其他的时候  添加required样式
                if($(this).val() == "5"){
                    $("#contractTypeDoc").attr("class","form-control required");
                }else{
                    $("#contractTypeDoc").attr("class","form-control");
                }
            })*/
            $("#attachment_btn").click(function () {
                $("#attachment_file").click();
            });
            $("#attachment_btn_alter").click(function () {
                $("#attachment_file_alter").click();
            });
            $("input[name='ext']").on('ifChecked', function(event){
                var radioVal = $(this).val();
                if(radioVal == 0){
                    $("#td1").removeClass("hide");
                    $("#td2").addClass("hide");
                    $("#tr1").show()
                    $("#tr2").show()
                }else{
                    $("#td1").addClass("hide");
                    $("#td2").removeClass("hide");
                    $("#tr1").hide()
                    $("#tr2").hide()
                }
            });
            if("${workContractInfo.ext}" == "1"){
                $("#ext1").iCheck('check')
            }else{
                $("#ext").iCheck('check')
            }

            laydate.render({
                elem: '#contractDate',
                event: 'focus',
                type : 'date'
            });
            laydate.render({
                elem: '#effectiveDate',
                event: 'focus',
                type : 'date'
            });
            laydate.render({
                elem: '#closingDate',
                event: 'focus',
                type : 'date'
            });
            laydate.render({
                elem: '#createDate',
                event: 'focus',
                type : 'date'
            });
		});
        function addRow(list, idx, tpl, row){
            var idx1 = $("#workClienInfoList tr").length;
            if(list == '#workClientInfoList' && idx1 < 100){
                bornTemplete(list, idx, tpl, row, idx1);
            }
        }
        function bornTemplete(list, idx, tpl, row, idx1){
            $(list).append(Mustache.render(tpl, {
                idx: idx, delBtn: true, row: row,
                order:idx1 + 1
            }));
            $(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");

            var clientId = $("#clientId").val();
            console.log(id.val()+"-----------"+clientId);
            if(id.val() == clientId){
                parent.layer.msg('主委托方不允许删除');
                return;
            }
            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");
                $(obj).parent().parent().addClass("hide");
            } else if (delFlag.val() == "1") {
                delFlag.val("0");
                $(obj).html("&times;").attr("title", "删除");
                $(obj).parent().parent().removeClass("error");
            }
           /* var idx1 = $("#workClientInfoList tr").length; //tr 总数
            for (var i = 0; i < idx1; i++) {
                $("#workClientInfoList tr").eq(i).find("td").eq(1).html(i + 1);
            }*/
        }

        function getRandom(){
            var GetRandomn = 1;
            //js生成时间戳
            var timestamp=new Date().getTime();
            //获取随机范围内数值的函数
            function GetRandom(n){
                //由随机数+时间戳+1组成
                GetRandomn=Math.floor(Math.random()*n+timestamp+1);
            }
            //开始调用，获得一个1-100的随机数
            GetRandom("30");
            if(!$("#contractNum").val()){
                $("#contractNum").val(GetRandomn)
            }
        }

        function insertTitle(tValue){
            var files = $("#attachment_file")[0].files;            for(var i = 0;i<files.length;i++) {                var file = files[i];
            var attachmentId = $("#id").val();
            var attachmentFlag = "44";
            console.log(file);
            var timestamp=new Date().getTime();

            var storeAs = "attachment-file/workContractInfo/"+timestamp+"/"+file['name'];
            var uploadPath="http://gangwan-app.oss-cn-hangzhou.aliyuncs.com/"+storeAs;/*将这段字符串存到数据库即可*/
            var divId = "_attachment";
            $("#addFile"+divId).show();
            multipartUploadWithSts(storeAs, file,attachmentId,attachmentFlag,uploadPath,divId,0);}
        }
        function insertTitleAlter(tValue){
            var files = $("#attachment_file_alter")[0].files;            for(var i = 0;i<files.length;i++) {                var file = files[i];
            var attachmentId = "";
            var attachmentFlag = "81";
            console.log(file);
            var timestamp=new Date().getTime();

            var storeAs = "attachment-file/workContractInfo/"+timestamp+"/"+file['name'];
            var uploadPath="http://gangwan-app.oss-cn-hangzhou.aliyuncs.com/"+storeAs;/*将这段字符串存到数据库即可*/
            var divId = "_attachment_alter";
            $("#addFile"+divId).show();
            multipartUploadWithSts(storeAs, file,attachmentId,attachmentFlag,uploadPath,divId,0);}
        }
        function insertTitleReview(tValue){
            var files = $("#attachment_file_review")[0].files;            for(var i = 0;i<files.length;i++) {                var file = files[i];
            var attachmentId = "";
            var attachmentFlag = "80";
            console.log(file);
            var timestamp=new Date().getTime();

            var storeAs = "attachment-file/workContractInfo/"+timestamp+"/"+file['name'];
            var uploadPath="http://gangwan-app.oss-cn-hangzhou.aliyuncs.com/"+storeAs;/*将这段字符串存到数据库即可*/
            var divId = "_attachment_review";
            $("#addFile"+divId).show();
            multipartUploadWithSts(storeAs, file,attachmentId,attachmentFlag,uploadPath,divId,0);}
        }


        function openBill(title,url,width,height,target,formId){
            var frameIndex = parent.layer.getFrameIndex(window.name);
            var urls = url+"&index="+frameIndex;
            if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端，就使用自适应大小弹窗
                width='auto';
                height='auto';
            }else{//如果是PC端，根据用户设置的width和height显示。

            }
            top.layer.open({
                type: 2,
                area: [width, height],
                title: title,
                maxmin: false, //开启最大化最小化按钮
                content: urls ,
                skin:"two-btns",
                btn: ['确定','关闭'],
                yes: function(index, layero){
                    var body = top.layer.getChildFrame('body', index);
                    var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var inputForm = body.find('#inputForm');
                    var top_iframe;
                    if(target){
                        top_iframe = target;//如果指定了iframe，则在改frame中跳转
                    }else{
                        top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
                    }
                    inputForm.attr("target",top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示
                    inputForm.attr("action","${ctx}/workclientinfo/workClientInfo/contractsave");//表单提交成功后，从服务器返回的url在当前tab中展示
                    var $document = iframeWin.contentWindow.document;

                    formSubmit($document,formId,index);
                },
                cancel: function(index){
                }
            });
        }
        function openBill2(title,url,width,height,target,formId){
            var frameIndex = parent.layer.getFrameIndex(window.name);
            var urls = url+"&index="+frameIndex;
            if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端，就使用自适应大小弹窗
                width='auto';
                height='auto';
            }else{//如果是PC端，根据用户设置的width和height显示。

            }
            top.layer.open({
                type: 2,
                area: [width, height],
                title: title,
                maxmin: false, //开启最大化最小化按钮
                skin:"two-btns",
                content: urls ,
                btn: ['确定','关闭'],
                yes: function(index, layero){
                    var body = top.layer.getChildFrame('body', index);
                    var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var inputForm = body.find('#inputForm');
                    var top_iframe;
                    if(target){
                        top_iframe = target;//如果指定了iframe，则在改frame中跳转
                    }else{
                        top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
                    }
                    inputForm.attr("target",top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示
                    inputForm.attr("action","${ctx}/workclientinfo/workClientInfo/contractsave");//表单提交成功后，从服务器返回的url在当前tab中展示
                    var $document = iframeWin.contentWindow.document;

                    formSubmit2($document,formId,index);
                },
                cancel: function(index){
                }
            });
        }
        function formSubmit($document,inputForm,index){
            var validateForm = $($document.getElementById(inputForm)).validate({
                submitHandler: function(form){
                    loading('正在提交，请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function(error, element) {
                    $($document.getElementById("#messageBox")).text("输入有误，请先更正。");
                    if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
            if(validateForm.form()){
                $($document.getElementById(inputForm)).ajaxSubmit({
                    success:function(data) {
                        var d = data;
                        if(d.msg == "false"){
                            parent.layer.msg("保存客户信息异常!",{icon:2});
                            return false;
                        }
                        $("#clientId").val(d.id);
                        $("#clientName").val(d.name);
                        addRow('#workClientInfoList', workClientInfoListRowIdx, workClientInfoListTpl);workClientInfoListRowIdx = workClientInfoListRowIdx + 1;
                        console.log("---------"+data.companyType+"---------"+data.companyIndustry+"---------"+data.areaName);
                        console.log("---------"+workClientInfoListRowIdx+"---------"+workClientInfoListTpl);
                        var row = workClientInfoListRowIdx - 1 ;
                        $("#"+"workClientInfoList"+row+"_id").val(d.id);
                        $("#"+"workClientInfoList"+row+"_name").val(d.name);
                        $("#"+"workClientInfoList"+row+"_companyType").val(d.companyType);
                        $("#"+"workClientInfoList"+row+"_companyIndustry").val(d.companyIndustry);
                        $("#"+"workClientInfoList"+row+"_area").val(d.areaName);
                        $("#"+"workClientInfoList"+row+"_td").hide();
                        parent.layer.msg(d.str,{icon:1});
                        top.layer.close(index)
                    }
                });
            }
        }
        function formSubmit2($document,inputForm,index){
            var validateForm = $($document.getElementById(inputForm)).validate({
                submitHandler: function(form){
                    loading('正在提交，请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function(error, element) {
                    $($document.getElementById("#messageBox")).text("输入有误，请先更正。");
                    if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
            if(validateForm.form()){
                $($document.getElementById(inputForm)).ajaxSubmit({
                    success:function(data) {
                        var d = data;
                        if(d.msg == "false"){
                            parent.layer.msg("保存客户信息异常!",{icon:2});
                            return false;
                        }
                        addRow('#workClientInfoList', workClientInfoListRowIdx, workClientInfoListTpl);workClientInfoListRowIdx = workClientInfoListRowIdx + 1;
                        console.log("---------"+data.companyType+"---------"+data.companyIndustry+"---------"+data.areaName);
                        console.log("---------"+workClientInfoListRowIdx+"---------"+workClientInfoListTpl);
                        var row = workClientInfoListRowIdx - 1 ;
                        $("#"+"workClientInfoList"+row+"_id").val(d.id);
                        $("#"+"workClientInfoList"+row+"_name").val(d.name);
                        $("#"+"workClientInfoList"+row+"_companyType").val(d.companyType);
                        $("#"+"workClientInfoList"+row+"_companyIndustry").val(d.companyIndustry);
                        $("#"+"workClientInfoList"+row+"_area").val(d.areaName);
                        parent.layer.msg(d.str,{icon:1});
                        top.layer.close(index)
                    }
                });
            }
        }
        function setPNumber(obj){
            $.ajax({
                type:'post',
                url:'${ctx}/workinvoice/workInvoice/getPNumberr',
                data:{
                    "obj":obj
                },
                success:function(data){
                    var d = JSON.parse(data);
                    $("#pNumber").val(d.pNumber);
                }
            })
        }
        function setRow(obj){
            $.ajax({
                type:'post',
                url:'${ctx}/workclientinfo/workClientInfo/getRow',
                data:{
                    "obj":obj
                },
                success:function(data){
                    var d = JSON.parse(data);

                    //自动计算出结果并填充在相应的输入框中
                    var size = $("#workClientInfoList tr").length+count;
                    if(size == 0){
                        addRow('#workClientInfoList', workClientInfoListRowIdx, workClientInfoListTpl);workClientInfoListRowIdx = workClientInfoListRowIdx + 1;
                        console.log("---------"+data.companyType+"---------"+data.companyIndustry+"---------"+data.areaName);
                        console.log("---------"+workClientInfoListRowIdx+"---------"+workClientInfoListTpl);
                        var row = workClientInfoListRowIdx - 1 ;
                        $("#"+"workClientInfoList"+row+"_id").val(d.id);
                        $("#"+"workClientInfoList"+row+"_name").val(d.name);
                        $("#"+"workClientInfoList"+row+"_companyType").val(d.companyType);
                        $("#"+"workClientInfoList"+row+"_companyIndustry").val(d.companyIndustry);
                        $("#"+"workClientInfoList"+row+"_area").val(d.areaName);
                    }else {
                        var num = 'alone';
                        for (var i = 0; i < size; i++) {
                            var _id = $("#workClientInfoList" + i + "_id").val();

                            var delFlag = $("#workClientInfoList" + i + "_delFlag").val();
                            if (_id != undefined && delFlag == 0) {
                                if (_id == d.id) {
                                    num = 'double'
                                    /*top.layer.alert('请您勿重复添加委托方列表信息', {icon: 0});*/
                                    return;
                                }
                            }
                        }
                        if(num == 'alone'){
                            addRow('#workClientInfoList', workClientInfoListRowIdx, workClientInfoListTpl);
                            workClientInfoListRowIdx = workClientInfoListRowIdx + 1;
                            console.log("---------" + data.companyType + "---------" + data.companyIndustry + "---------" + data.areaName);
                            console.log("---------" + workClientInfoListRowIdx + "---------" + workClientInfoListTpl);
                            var row = workClientInfoListRowIdx - 1;
                            $("#" + "workClientInfoList" + row + "_id").val(d.id);
                            $("#" + "workClientInfoList" + row + "_name").val(d.name);
                            $("#" + "workClientInfoList" + row + "_companyType").val(d.companyType);
                            $("#" + "workClientInfoList" + row + "_companyIndustry").val(d.companyIndustry);
                            $("#" + "workClientInfoList" + row + "_area").val(d.areaName);
                        }
                    }

                    //$("#"+"workClientInfoList"+row+"_td").hide();
                    //$("#pNumber").val(d.pNumber);
                }
            })
        }
        function setRow2(obj){
            $.ajax({
                type:'post',
                url:'${ctx}/workclientinfo/workClientInfo/getRow',
                data:{
                    "obj":obj
                },
                success:function(data){
                    var d = JSON.parse(data);
                    //自动计算出结果并填充在相应的输入框中
                    var size = $("#workClientInfoList tr").length+count;
                    if(size == 0){
                        addRow('#workClientInfoList', workClientInfoListRowIdx, workClientInfoListTpl);workClientInfoListRowIdx = workClientInfoListRowIdx + 1;
                        console.log("---------"+data.companyType+"---------"+data.companyIndustry+"---------"+data.areaName);
                        console.log("---------"+workClientInfoListRowIdx+"---------"+workClientInfoListTpl);
                        var row = workClientInfoListRowIdx - 1 ;
                        $("#"+"workClientInfoList"+row+"_id").val(d.id);
                        $("#"+"workClientInfoList"+row+"_name").val(d.name);
                        $("#"+"workClientInfoList"+row+"_companyType").val(d.companyType);
                        $("#"+"workClientInfoList"+row+"_companyIndustry").val(d.companyIndustry);
                        $("#"+"workClientInfoList"+row+"_area").val(d.areaName);
                    }else {
                        var num = "alone";
                        for (var i = 0; i < size; i++) {
                            var _id = $("#workClientInfoList" + i + "_id").val();

                            var delFlag = $("#workClientInfoList" + i + "_delFlag").val();
                            if (_id != undefined && delFlag == 0) {
                                if (_id == d.id) {
                                    num = "double";
                                    top.layer.alert('请勿重复选择委托方信息', {icon: 0});
                                    return;
                                }
                            }
                        }
                        if(num == 'alone'){
                            addRow('#workClientInfoList', workClientInfoListRowIdx, workClientInfoListTpl);
                            workClientInfoListRowIdx = workClientInfoListRowIdx + 1;
                            console.log("---------" + data.companyType + "---------" + data.companyIndustry + "---------" + data.areaName);
                            console.log("---------" + workClientInfoListRowIdx + "---------" + workClientInfoListTpl);
                            var row = workClientInfoListRowIdx - 1;
                            $("#" + "workClientInfoList" + row + "_id").val(d.id);
                            $("#" + "workClientInfoList" + row + "_name").val(d.name);
                            $("#" + "workClientInfoList" + row + "_companyType").val(d.companyType);
                            $("#" + "workClientInfoList" + row + "_companyIndustry").val(d.companyIndustry);
                            $("#" + "workClientInfoList" + row + "_area").val(d.areaName);
                        }
                    }
                }
            })
        }
        function hasInArr(id,idArr) {
            for(var i=0;i<idArr.length;i++){
                if(id==$(idArr[i]).val()){
                    return true;
                }
            }
            return false;
        }
        function setCatalogInfo(data){
            for(var i=0;i<data.length;i++){
                var idArr = $("#workClientInfoList tr:visible .clientInfoId");
                if(data[i].id!=''&&!hasInArr(data[i].id,idArr)){
                    addRow('#workClientInfoList', workClientInfoListRowIdx, workClientInfoListTpl);
                    workClientInfoListRowIdx = workClientInfoListRowIdx + 1;
                    var row = workClientInfoListRowIdx - 1 ;
                    $("#" + "workClientInfoList" + row + "_id").val(data[i].id);
                    $("#" + "workClientInfoList" + row + "_name").val(data[i].name);
                    $("#" + "workClientInfoList" + row + "_companyType").val(data[i].companyType);
                    $("#" + "workClientInfoList" + row + "_companyIndustry").val(data[i].companyIndustry);
                    $("#" + "workClientInfoList" + row + "_area").val(data[i].area);
                }
            }
        }
        //千位符号，保留两位小数
        function toThousands(s){
            if(/[^0-9\.]/.test(s)) return "无效值";
            s=s.replace(/^(\d*)$/,"$1.");
            s=(s+"00").replace(/(\d*\.\d\d)\d*/,"$1");
            s=s.replace(".",",");
            var re=/(\d)(\d{3},)/;
            while(re.test(s))
                s=s.replace(re,"$1,$2");
            s=s.replace(/,(\d\d)$/,".$1");
            return  s.replace(/^\./,"0.")
        }
	</script>
</head>
<body >
<div class="single-form">
    <div class="container">
	<form:form id="inputForm" modelAttribute="workContractInfo" enctype="multipart/form-data"  action ="${ctx}/workcontractinfo/workContractInfo/saveAlterAudit" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<form:hidden path="act.taskId"/>
		<form:hidden path="act.taskName"/>
		<form:hidden path="act.taskDefKey"/>
		<form:hidden path="act.procInsId"/>
		<form:hidden path="act.procDefId"/>
		<form:hidden id="flag" path="act.flag"/>
	<form:hidden path="createBy.name" htmlEscape="false"  readonly="true" value="${fns:getUser().name}" class="form-control "/>
            <c:set var="status" value="${workContractInfo.act.status}" />
        <div class="form-group layui-row first lw9">
            <div class="form-group-label"><h2>合同基础信息</h2></div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label"><span class="require-item">*</span>合同来源：</label>
                <div class="layui-input-block">
                    <input type="radio" class="i-checks" name="ext" checked id="ext" value="0">
                    <label for="ext">投标项目</label>
                    <input type="radio" class="i-checks" name="ext" id="ext1" value="1">
                    <label for="ext1">非投标项目</label>
                </div>
            </div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label">合同编号：</label>

                    <div class="layui-input-block">
                        <div class="input-group">
                            <form:input path="contractNum" id="contractNum" htmlEscape="false" readonly="true" class="form-control  layui-input"/>
                            <span class="input-group-btn">
                            <label class="form-status"><c:choose><c:when test="${ empty workContractInfo.contractState}">新添</c:when><c:otherwise>${fns:getDictLabel(workContractInfo.contractState, 'audit_completion_state','')}</c:otherwise>	</c:choose></label>
                        </span>
                        </div>
                    </div>

            </div>
            <div class="layui-item layui-col-sm6" id="tr1">
                <label class="layui-form-label"><span class="require-item">*</span>投标项目：</label>
                <div class="layui-input-block with-icon">
                    <input type="hidden" value="" id ="ids">
                    <sys:gridselectcallprojectt url="${ctx}/workinvoice/workInvoice/selectprojectt" id="project" name="project.id"  value="${workContractInfo.project.id}"  title="选择投标项目" labelName="workContractInfo.project.projectName"
                                                labelValue="${workContractInfo.project.projectName}" cssClass="form-control required layui-input" fieldLabels="项目" fieldKeys="projectName" searchLabel="项目名称" searchKey="projectName" ></sys:gridselectcallprojectt>

                </div>
            </div>
            <div class="layui-item layui-col-sm6" id="tr2">
                <label class="layui-form-label">投标编号：</label>
                <div class="layui-input-block">
                    <form:input id ="pNumber" path="project.projectNumber" htmlEscape="false"  readonly="true" class="form-control layui-input"/>
                </div>
            </div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label"><span class="require-item">*</span>合同名称：</label>
                <div class="layui-input-block">
                    <form:input path="name" htmlEscape="false"    class="form-control required layui-input"/>
                </div>
            </div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label">总合同名称：</label>
                <div class="layui-input-block with-icon">
                    <c:choose>
                        <c:when test="${workContractInfo.contractState == 4}">
                            <form:input path="totalContractName" htmlEscape="false" readonly="true"   class="form-control  layui-input"/>
                        </c:when>
                        <c:otherwise>
                            <sys:gridselectContract url="${ctx}/workcontractinfo/workContractInfo/selectcontract" type="" isTotal="1" id="totalContractId" name="totalContractId"  value="${workContractInfo.totalContractId}"  title="选择合同" labelName="workContractInfo.totalContractName"
                                                    labelValue="${workContractInfo.totalContractName}" cssClass="form-control layui-input" fieldLabels="合同名称" fieldKeys="name" searchLabel="合同名称" searchKey="name" ></sys:gridselectContract>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label"><span class="require-item">*</span>所属部门：</label>
                <div class="layui-input-block with-icon">
                    <form:hidden path="chargeCompany" value="${workContractInfo.chargeCompany}"/>
                    <form:input path="chargeCompanyName" htmlEscape="false"  readonly="true"  class="form-control required layui-input"/>
                    <%--<sys:treeselect id="chargeCompany" name="chargeCompany" value="${workContractInfo.chargeCompany}" labelName="chargeCompanyName" labelValue="${workContractInfo.chargeCompanyName}"
                                    title="部门" url="/sys/office/treeDataAll?type=2" cssClass="form-control required layui-input" allowClear="true" notAllowSelectParent="true"/>--%>
                </div>
            </div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label double-line"><span class="require-item">*</span>合 同 金 额 (元)预计金额：</label>
                <div class="layui-input-block">
                    <form:input path="contractPrice" htmlEscape="false"     pattern="#.00" class="form-control required number  layui-input"/>
                </div>
            </div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label"><span class="require-item">*</span>签订日期：</label>
                <div class="layui-input-block">
                    <input class="laydate-icondate required layui-input form-control layer-date laydate-icon" id="contractDate" name="contractDate" value="<fmt:formatDate value="${workContractInfo.contractDate}" pattern="yyyy-MM-dd"/>">
                </div>
            </div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label"><span class="require-item">*</span>主委托方：</label>
                <div class="layui-input-block with-icon" style="margin-right:95px;">
                    <sys:gridselectclien1 url="${ctx}/workcontractinfo/workContractInfo/selectclientAhref" id="client" name="client.id"  value="${workContractInfo.client.id}"  title="选择客户" labelName="client.name"
                                          labelValue="${workContractInfo.client.name}" cssClass="form-control layui-input required" fieldLabels="客户名称" fieldKeys="name" searchLabel="客户名称" searchKey="name" searchLabel1="联系人" searchKey1="workLinkName"></sys:gridselectclien1>

                </div>
                <a href="javascript:void(0)" onclick="openBill('新增客户管理', '${ctx}/workclientinfo/workClientInfo/form?param=2','90%','90%',false,'inputForm')" class="nav-btn nav-btn-add" style="margin-right: 0px;top:0px;right:16px;position: absolute;height:40px;line-height: 40px;"><i class="fa fa-plus"></i> 新增</a>
            </div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label">合同生效日期：</label>
                <div class="layui-input-block">
                    <input class="laydate-icondate form-control layui-input layer-date laydate-icon" id="effectiveDate" name="effectiveDate" value="<fmt:formatDate value="${workContractInfo.effectiveDate}" pattern="yyyy-MM-dd"/>">
                </div>
            </div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label">合同终止日期：</label>
                <div class="layui-input-block">
                    <input class="laydate-icondate form-control layui-input layer-date laydate-icon" id="closingDate" name="closingDate" value="<fmt:formatDate value="${workContractInfo.closingDate}" pattern="yyyy-MM-dd"/>">
                </div>
            </div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label double-line"><span class="require-item">*</span>工程投资额(万元)：</label>
                <div class="layui-input-block">
                    <form:input path="investmentAmount" htmlEscape="false" pattern="#.00"  class="form-control number required layui-input"/>
                </div>
            </div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label">对方合同编号：</label>
                <div class="layui-input-block">
                    <form:input path="anotherContractNum" htmlEscape="false" class="form-control layui-input"/>
                </div>
            </div>
            <div class="layui-item layui-col-sm6 ">
                <label class="layui-form-label"><span class="require-item">*</span>工程分类：</label>
                <div class="layui-input-block">
                    <form:select path="contractType" cssClass="form-control required simple-select">
                        <form:option value="" label=""/>
                        <form:options items="${fns:getMainDictList('contract_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
                    </form:select>
                    <style>
                        #contractType{
                            height:40px;
                            line-height: 40px;
                            -moz-box-sizing: border-box;
                            -webkit-box-sizing: border-box;
                            box-sizing: border-box;
                        }
                    </style>
                </div>
            </div>
            <div class="layui-item layui-col-sm6 ">
                <label class="layui-form-label">归档状态：</label>
                <div class="layui-input-block">
                    <input htmlEscape="false" class="form-control layui-input" readonly="true" value="${fns:getDictLabel(workContractInfo.recordState, 'record_state','')}"/>
                </div>
            </div>
            <div class="layui-item layui-col-sm6 ">
                <label class="layui-form-label"><span class="require-item">*</span>合同类型：</label>
                <div class="layui-input-block">
                    <form:select path="contractTypeDoc" cssClass="form-control required simple-select">
                        <form:option value="" label=""/>
                        <form:options items="${fns:getMainDictList('contract_info_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
                    </form:select>
                </div>
            </div>
            <div class="layui-item layui-col-sm6">
                <label class="layui-form-label">创建时间：</label>
                <div class="layui-input-block">
                    <input class="laydate-icondate form-control layui-input layer-date laydate-icon" id="createDate" name="createDate" value="<fmt:formatDate value="${workContractInfo.createDate}" pattern="yyyy-MM-dd"/>">
                </div>
            </div>
            <div class="layui-item layui-col-sm12 with-textarea">
                <label class="layui-form-label "><span class="require-item">*</span>变更原因：</label>
                <div class="layui-input-block">
                    <form:textarea path="contractCategory" id="contractCategory" htmlEscape="false" rows="4"  maxlength="1000"  class="form-control required"/>
                </div>
            </div>
            <div class="layui-item layui-col-sm12 with-textarea">
                <label class="layui-form-label ">付款摘要：</label>
                <div class="layui-input-block">
                    <form:textarea path="summaryPayment" id="summaryPayment" htmlEscape="false" rows="4"  maxlength="1000"  class="form-control"/>
                </div>
            </div>
            <div class="layui-item layui-col-sm12 with-textarea">
                <label class="layui-form-label ">合同特别条款：</label>
                <div class="layui-input-block">
                    <form:textarea path="contractSpecial" htmlEscape="false" rows="4" maxlength="1000"   class="form-control "/>
                </div>
            </div>
            <%--<div class="layui-item layui-col-sm12 with-textarea">
                <label class="layui-form-label ">合同类型说明：</label>
                <div class="layui-input-block">
                    <form:textarea path="contractTypeDoc" id="contractTypeDoc" htmlEscape="false" rows="4" maxlength="1000"   class="form-control "/>
                </div>
            </div>--%>
            <div class="layui-item layui-col-sm12 with-textarea">
                <label class="layui-form-label ">备注：</label>
                <div class="layui-input-block">
                    <form:textarea path="remarks" id="remarks" htmlEscape="false" rows="4" maxlength="255"   class="form-control "/>
                </div>
            </div>
        </div>

        <div class="form-group layui-row">
            <div class="form-group-label"><h2>审批意见</h2></div>
            <div class="layui-item layui-col-xs12 with-textarea" >
                <label class="layui-form-label">审批意见：</label>
                <div class="layui-input-block">
                    <form:textarea path="act.comment" class="form-control" rows="4" maxlength="127" />
                    <input type="file" name="upload_files" style="display: none;">
                </div>
            </div>
        </div>

        <div class="form-group layui-row">
            <div class="form-group-label"><h2><span class="require-item">*</span>委托方列表</h2></div>
            <div class="layui-item nav-btns">
                <a href="javascript:void(0)" onclick="openBill2('新增客户管理', '${ctx}/workclientinfo/workClientInfo/form?param=2','95%','95%',false,'inputForm')" class="nav-btn nav-btn-add" ><i class="fa fa-plus"></i> 新增客户</a>

                <sys:gridselectclient2 url="${ctx}/workcontractinfo/workContractInfo/selectclientAhref" id="client2" name=""  value=""  title="选择客户" labelName="client.names"
                                       labelValue="" cssClass="form-control" fieldLabels="客户名称" fieldKeys="name" searchLabel="客户名称" searchKey="name" searchLabel1="联系人" searchKey1="workLinkName"></sys:gridselectclient2>
            </div>
            <div class="layui-item layui-col-xs12 form-table-container">
                <table id="contentTable" class="table table-bordered table-condensed can-edit">
                    <thead>
                    <tr>
                        <th>委托方名称</th>
                        <th>客户性质</th>
                        <th>所属行业</th>
                        <th>所属地区</th>
                        <th width="150px">操作</th>
                    </tr>
                    </thead>
                    <tbody id="workClientInfoList">
                    <c:if test="${not empty workContractInfo.workClientInfoList}">
                        <c:forEach items="${workContractInfo.workClientInfoList}" var="casePeopleNorm" varStatus="index">
                            <tr id="workClientInfoList${index.index}">
                                <td class="hide">
                                    <input id="workClientInfoList${index.index}_id" name="workClientInfoList[${index.index}].id" type="hidden" value="${casePeopleNorm.id}" class="clientInfoId"/>
                                    <input id="workClientInfoList${index.index}_delFlag" name="workClientInfoList[${index.index}].delFlag" type="hidden" value="0"/>
                                </td>
                                <td>
                                    <input id="workClientInfoList${index.index}_name" name="workClientInfoList[${index.index}].name" type="text" value="${casePeopleNorm.name}" readonly="true"   class="form-control "/>
                                </td>
                                <td>
                                    <input id="workClientInfoList${index.index}_companyType" name="workClientInfoList[${index.index}].companyType" type="text" value="${fns:getMainDictLabel(casePeopleNorm.companyType, 'company_type', '')}"  readonly="true"  class="form-control "/>
                                </td>
                                <td>
                                    <input id="workClientInfoList${index.index}_companyIndustry" name="workClientInfoList[${index.index}].companyIndustry" type="text" value="${fns:getMainDictLabel(casePeopleNorm.companyIndustry, 'company_industry', '')}"  readonly="true"  class="form-control "/>
                                </td>
                                <td>
                                    <input id="workClientInfoList${index.index}_area" name="workClientInfoList[${index.index}].area.name" type="text" value="${casePeopleNorm.area.name}"  readonly="true"  class="form-control "/>
                                </td>
                                <td class="text-center op-td">
                                    <span class="op-btn op-btn-delete" onclick="delRow(this, '#workClientInfoList${index.index}')" title="删除"><i class="glyphicon glyphicon-remove"></i>&nbsp;删除</span>
                                </td>
                            </tr>
                        </c:forEach>
                    </c:if>
                    </tbody>
                </table>
                <script type="text/template" id="workClientInfoListTpl">//<!--
										<tr id="workClientInfoList{{idx}}">
											<td class="hide">
												<input id="workClientInfoList{{idx}}_id" name="workClientInfoList[{{idx}}].id" type="hidden" value="{{row.id}}" class="clientInfoId"/>
												<input id="workClientInfoList{{idx}}_delFlag" name="workClientInfoList[{{idx}}].delFlag" type="hidden" value="0"/>
											</td>
											<td>
												<input id="workClientInfoList{{idx}}_name" name="workClientInfoList[{{idx}}].name" type="text" value="{{row.name}}"  readonly="true"  class="form-control required"/>
											 </td>
											 <td>
												<input id="workClientInfoList{{idx}}_companyType" name="workClientInfoList[{{idx}}].companyType" type="text" value="{{row.companyType}}" readonly="true"   class="form-control required"/>
											 </td>
											<td>
												<input id="workClientInfoList{{idx}}_companyIndustry"  name="workClientInfoList[{{idx}}].companyIndustry" type="text" value="{{row.companyIndustry}}"  readonly="true"  class="form-control required"/>
											</td>
											<td>
												<input id="workClientInfoList{{idx}}_area" name="workClientInfoList[{{idx}}].area.name" type="text" value="{{row.area.name}}"  readonly="true"   class="form-control required"/>
											</td>
											<td class="text-center op-td" id="workClientInfoList{{idx}}_td">
												{{#delBtn}}<span class="op-btn op-btn-delete" onclick="delRow(this, '#workClientInfoList{{idx}}')" title="删除"><i class="glyphicon glyphicon-remove"></i>&nbsp;删除</span>{{/delBtn}}
											</td>
										</tr>//-->
                </script>

                <script type="text/javascript">
                    var workClientInfoListRowIdx = 0, workClientInfoListTpl = $("#workClientInfoListTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                    if($("#id").val()){
                        workClientInfoListRowIdx = ${fn:length(workContractInfo.workClientInfoList)};
                    }
                    /*$(document).ready(function() {
                        var data = ${fns:toJson(workContractInfo.workClientInfoList)};
                    for (var i=0; i<data.length; i++){
                        addRow('#workClientInfoList', workClientInfoListRowIdx, workClientInfoListTpl, data[i]);
                        workClientInfoListRowIdx = workClientInfoListRowIdx + 1;
                    }
                });*/
                </script>
            </div>
        </div>
        <div class="form-group layui-row">
            <div class="form-group-label"><h2>合同附件信息</h2></div>
            <%--<div class="layui-item nav-btns">--%>
                <%--<a id="attachment_btn" class="nav-btn nav-btn-add" title="添加附件"><i class="fa fa-plus"></i>&nbsp;添加附件</a>--%>
            <%--</div>--%>
            <%--<div id="addFile_attachment" style="display: none" class="upload-progress">--%>
                <%--<span id="fileName_attachment" ></span>--%>
                <%--<b><span id="baifenbi_attachment" ></span></b>--%>
                <%--<div class="progress">--%>
                    <%--<div id="jindutiao_attachment" class="progress-bar" style="width: 0%" aria-valuenow="0">--%>
                    <%--</div>--%>
                <%--</div>--%>
            <%--</div>--%>
            <%--<input id="attachment_file" type="file" name="attachment_file" multiple="multiple" style="display: none;" onChange="if(this.value)insertTitle(this.value);"/>--%>
            <%--<span id="attachment_title"></span>--%>
            <div class="layui-item layui-col-xs12" style="padding:0 16px;">
                <table id="listAttachment" class="table table-bordered table-condensed details">
                    <thead>
                    <tr>
                            <%-- <th>序号</th>--%>
                        <th>文件预览</th>
                        <th>上传人</th>
                        <th>上传时间</th>
                        <th width="180px">操作</th>
                    </tr>
                    </thead>
                    <tbody id="file_attachment"><c:forEach items="${workContractInfo.oldWorkContractInfo.workAttachments}" var = "workClientAttachment" varStatus="status">
                        <tr>
                                <%-- <td>${status.index + 1}</td>--%>
                            <c:choose>
                                <c:when test="${fn:containsIgnoreCase(workClientAttachment.attachmentName,'jpg')
                                                           or fn:containsIgnoreCase(workClientAttachment.attachmentName,'png')
                                                           or fn:containsIgnoreCase(workClientAttachment.attachmentName,'gif')
                                                           or fn:containsIgnoreCase(workClientAttachment.attachmentName,'bmp')
                                                           or fn:containsIgnoreCase(workClientAttachment.attachmentName,'jpeg')}">
                                    <td><img src="${workClientAttachment.url}" width="50" height="50" onclick="openDialogView('预览','${ctx}/sys/picturepreview/picturePreview?url=${workClientAttachment.url}','90%','90%')" alt="${workClientAttachment.attachmentName}">
                                </c:when>
                                <c:otherwise>
                                    <c:choose>
                                        <c:when test="${fn:containsIgnoreCase(workClientAttachment.attachmentName,'pdf')}">
                                            <td><a class="attention-info" href="javascript:void(0)" onclick="preview('预览','${workClientAttachment.url}','90%','90%','1')">${workClientAttachment.attachmentName}</a></td>
                                        </c:when>
                                        <c:otherwise>
                                            <td><a class="attention-info" href="javascript:void(0)" onclick="preview('预览','${workClientAttachment.url}','90%','90%')">${workClientAttachment.attachmentName}</a></td>
                                        </c:otherwise>
                                    </c:choose>
                                </c:otherwise>
                            </c:choose>
                            <td>${workClientAttachment.createBy.name}</td>
                            <td><fmt:formatDate value="${workClientAttachment.createDate}" type="both"/></td>
                            <td class="op-td">
                                <div class="op-btn-box" >
                                    <a href="javascript:location.href='${ctx}/workfullmanage/workFullManage/downLoadAttach?file='+encodeURIComponent(encodeURIComponent('${workClientAttachment.url}'));" class="op-btn op-btn-download"><i class="fa fa-download"></i>&nbsp;下载</a>
                                    <c:if test="${workClientAttachment.createBy.id eq fns:getUser().id}">
                                        <a href="javascript:void(0)" onclick="deleteFileFromAliyun(this,'${ctx}/sys/workattachment/deleteFileFromAliyun?url=${workClientAttachment.url}&id=${workClientAttachment.id}&type=2','addFile_attachment')" class="op-btn op-btn-delete" ><i class="fa fa-trash"></i>&nbsp;删除</a>
                                    </c:if>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="form-group layui-row">
            <div class="form-group-label"><h2><span class="require-item">*</span>变更附件信息</h2></div>
            <div class="layui-item nav-btns">
                <a id="attachment_btn_alter" class="nav-btn nav-btn-add" title="添加附件"><i class="fa fa-plus"></i>&nbsp;添加附件</a>
            </div>
            <div id="addFile_attachment_alter" style="display: none" class="upload-progress">
                <span id="fileName_attachment_alter" ></span>
                <b><span id="baifenbi_attachment_alter" ></span></b>
                <div class="progress">
                    <div id="jindutiao_attachment_alter" class="progress-bar" style="width: 0%" aria-valuenow="0">
                    </div>
                </div>
            </div>
            <input id="attachment_file_alter" type="file" name="attachment_file" multiple="multiple" style="display: none;" onChange="if(this.value)insertTitleAlter(this.value);"/>
            <span id="attachment_title_alter"></span>
            <div class="layui-item layui-col-xs12" style="padding:0 16px;">
                <table id="listAttachmentAlter" class="table table-bordered table-condensed details">
                    <thead>
                    <tr>
                            <%-- <th>序号</th>--%>
                        <th>文件预览</th>
                        <th>上传人</th>
                        <th>上传时间</th>
                        <th width="180px">操作</th>
                    </tr>
                    </thead>
                    <tbody id="file_attachment_alter">
                    <c:forEach items="${workContractInfo.workAttachmentAlters}" var = "workClientAttachment" varStatus="status">
                        <tr>
                                <%-- <td>${status.index + 1}</td>--%>
                            <c:choose>
                                <c:when test="${fn:containsIgnoreCase(workClientAttachment.attachmentName,'jpg')
                                                           or fn:containsIgnoreCase(workClientAttachment.attachmentName,'png')
                                                           or fn:containsIgnoreCase(workClientAttachment.attachmentName,'gif')
                                                           or fn:containsIgnoreCase(workClientAttachment.attachmentName,'bmp')
                                                           or fn:containsIgnoreCase(workClientAttachment.attachmentName,'jpeg')}">
                                    <td><img src="${workClientAttachment.url}" width="50" height="50" onclick="openDialogView('预览','${ctx}/sys/picturepreview/picturePreview?url=${workClientAttachment.url}','90%','90%')" alt="${workClientAttachment.attachmentName}">
                                </c:when>
                                <c:otherwise>
                                    <c:choose>
                                        <c:when test="${fn:containsIgnoreCase(workClientAttachment.attachmentName,'pdf')}">
                                            <td><a class="attention-info" href="javascript:void(0)" onclick="preview('预览','${workClientAttachment.url}','90%','90%','1')">${workClientAttachment.attachmentName}</a></td>
                                        </c:when>
                                        <c:otherwise>
                                            <td><a class="attention-info" href="javascript:void(0)" onclick="preview('预览','${workClientAttachment.url}','90%','90%')">${workClientAttachment.attachmentName}</a></td>
                                        </c:otherwise>
                                    </c:choose>
                                </c:otherwise>
                            </c:choose>
                            <td>${workClientAttachment.createBy.name}</td>
                            <td><fmt:formatDate value="${workClientAttachment.createDate}" type="both"/></td>
                            <td class="op-td">
                                <div class="op-btn-box" >
                                    <a href="javascript:location.href='${ctx}/workfullmanage/workFullManage/downLoadAttach?file='+encodeURIComponent(encodeURIComponent('${workClientAttachment.url}'));" class="op-btn op-btn-download"><i class="fa fa-download"></i>&nbsp;下载</a>
                                    <c:if test="${workClientAttachment.createBy.id eq fns:getUser().id}">
                                        <a href="javascript:void(0)" onclick="deleteFileFromAliyun(this,'${ctx}/sys/workattachment/deleteFileFromAliyun?url=${workClientAttachment.url}&id=${workClientAttachment.id}&type=2','addFile_attachment')" class="op-btn op-btn-delete" ><i class="fa fa-trash"></i>&nbsp;删除</a>
                                    </c:if>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="form-group layui-row page-end"></div>
    </form:form>
    </div>
</div>



<script type="text/javascript">
        //上传
        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);
            if(image.name.indexOf("jpg") != -1
                || image.name.indexOf("png") != -1
                || image.name.indexOf("jpeg") != -1
                || image.name.indexOf("gif") != -1
                || image.name.indexOf("PNG") != -1){
                url = window.URL.createObjectURL(image);
            }else if(image.name.indexOf("pdf") != -1 || image.name.indexOf("PDF") != -1){
                url = "${ctxStatic}/common/img/pdf5.png";
            }else if(image.name.indexOf("doc") != -1 || image.name.indexOf("DOC") != -1
                || image.name.indexOf("docx") != -1 || image.name.indexOf("DOCX") != -1){
                url = "${ctxStatic}/common/img/word.png";
            }else if(image.name.indexOf("xlsx") != -1 || image.name.indexOf("XLSX") != -1
                || image.name.indexOf("xls") != -1 || image.name.indexOf("XLSX") != -1){
                url = "${ctxStatic}/common/img/excel.png";
            }else{
                url = "${ctxStatic}/common/img/file.jpg";
            }
            $("#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: -2px; display:inline-block;z-index:1;" onclick="close_img('+index+');"><i class="fa fa-close"></i></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: 64px;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: -2px; display:inline-block;z-index:1;" onclick="close_img('+index+');"><i class="fa fa-close"></i></span>';
            $("img:eq(-2)").before(span);
        }
        function add_div() {
            var upload_div_1 =
                '<div id="upload_div_1" style="float: left;position:relative;width: 64px;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>

</body>
</html>