<%@ 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(){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
		  if(validateForm.form()){
			  $("#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: '#month', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
                        ,type: 'month'
			        });
		});
        function addRow(list, idx, workClientLinkmanTpl, row) {
            $(list).append(Mustache.render(workClientLinkmanTpl, {
                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 setMoney(){
            //总金额
            //effectMoney
            var money = "0.00";
            //自动计算出结果并填充在相应的输入框中
            var size = $("#effectDetailList tr").length;
            for (var i = 0;i<size;i++){
                var _money = $("#effectDetailList"+i+"_money").val();

                var delFlag = $("#effectDetailList"+i+"_delFlag").val();
                if (_money!=undefined && isNumber(_money) && delFlag==0){
                    if(money==""){
                        money = parseFloat(_money).toFixed(2);
                    }else {
                        money = (parseFloat(money) + parseFloat(_money)).toFixed(2);
                    }
                }
            }
            $("#effectMoney").val(money);
		}
        function isNumber(val){
            if(val === "" || val ==null){
                return false;
            }
            var regPos = /^\d+(\.\d+)?$/; //非负浮点数
            var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
            if(regPos.test(val) || regNeg.test(val)){
                return true;
            }else{
                return false;
            }

        }
	</script>
</head>
<body>
<div class="single-form">
	<div class="container">
		<form:form id="inputForm" modelAttribute="workEffect" action="${ctx}/workeffect/workEffect/save" method="post" class="form-horizontal">
			<form:hidden path="id"/>

			<div class="form-group layui-row first lw8">
				<div class="form-group-label"><h2>基础信息</h2></div>
				<div class="layui-item layui-col-sm6">
					<label class="layui-form-label">月份：</label>
					<div class="layui-input-block">
						<input style="background-color: #ffffff;" readonly="true"  htmlEscape="false" maxlength="20" readonly="true"  class="laydate-icondate form-control layer-date layui-input laydate-icon"
							   value="<fmt:formatDate value="${workEffect.month}" pattern="yyyy-MM"/>"/>
						</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 with-icon">
						<input value="${workEffect.office.name}" readonly="true" class="form-control layui-input">
					</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 id="officeNum" path="officeNum" htmlEscape="false" readonly="true" class="form-control number layui-input"/>
						</div>
					</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">
						<div class="input-group">
							<form:input id="effectNum" path="effectNum" htmlEscape="false" readonly="true" class="form-control number layui-input"/>
						</div>
					</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 id="effectMoney" path="effectMoney" htmlEscape="false" readonly="true" class="form-control layui-input"/>
						</div>
					</div>
				</div>
				<div class="layui-item layui-col-sm6">
					<label class="layui-form-label">导入时间：</label>
					<div class="layui-input-block">
						<input htmlEscape="false" readonly="true"
							   class="form-control  layui-input"
							   value="<fmt:formatDate value="${workEffect.createDate}" pattern="yyyy-MM-dd"/>"/>
					</div>
				</div>
				<div class="layui-item layui-col-sm6">
					<label class="layui-form-label">导 入 人：</label>
					<div class="layui-input-block">
						<div class="input-group">
							<input htmlEscape="false" readonly="true"
								   class="form-control  layui-input"
								   value="${workEffect.createBy.name}" />
						</div>
					</div>
				</div>
				<div class="layui-item layui-col-sm6">
					<label class="layui-form-label">状态：</label>
					<div class="layui-input-block">
						<input htmlEscape="false" readonly="true"
							   class="form-control  layui-input"
							   value="${fns:getDictLabel(workEffect.status, 'effect_status', '')}"/>
					</div>
				</div>
			</div>

			<div class="form-group layui-row">
				<div class="form-group-label"><h2>绩效明细</h2></div>
				<div class="layui-item layui-col-xs12 form-table-container" >
					<table id="contentTable3" class="table table-bordered table-condensed can-edit no-bottom-margin">
						<thead>
						<tr>
							<th width="25%">工号</th>
							<th width="25%">姓名</th>
							<th width="25%">职级</th>
							<th width="25%">金额</th>
						</tr>
						</thead>
						<tbody id="effectDetailList">
						</tbody>
					</table>

					<script type="text/template" id="effectDetailTpl">//<!--
					<tr id="effectDetailList{{idx}}">
						<td class="hide">
							<input id="effectDetailList{{idx}}_id" name="effectDetailList[{{idx}}].id" type="hidden" value="{{row.id}}" />
							<input id="effectDetailList{{idx}}_effectId" name="effectDetailList[{{idx}}].effectId" type="hidden" value="{{row.effectId}}" />
							<input id="effectDetailList{{idx}}_workStaffBasicInfo" name="effectDetailList[{{idx}}].workStaffBasicInfo.id" type="hidden" value="{{row.workStaffBasicInfo.id}}" />
							<input id="effectDetailList{{idx}}_delFlag" name="effectDetailList[{{idx}}].delFlag" type="hidden" value="0" />

						</td>
						<td>
							<input id="effectDetailList{{idx}}_no" name="effectDetailList[{{idx}}].no" type="text" value="{{row.no}}"  readonly="true"  class="form-control"/>
						</td>
						<td>
							<input id="effectDetailList{{idx}}_name" name="effectDetailList[{{idx}}].name" type="text" value="{{row.name}}"  readonly="true"  class="form-control"/>
						</td>
						<td>
							<input id="effectDetailList{{idx}}_jobGrade" name="effectDetailList[{{idx}}].jobGrade" type="text" value="{{row.jobGrade}}"  readonly="true"  class="form-control"/>
						</td>
						<td>
							<input id="effectDetailList{{idx}}_money" onchange="setMoney(this)" name="effectDetailList[{{idx}}].money" type="text" value="{{row.money}}"    class="form-control number" />
						</td>
					</tr>//-->
					</script>
					<script type="text/javascript">

                        var effectDetailRowIdx = 0, effectDetailTpl = $("#effectDetailTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");

                        $(document).ready(function() {
                            var data = ${fns:toJson(workEffect.effectDetailList)};
                            for (var i=0; i<data.length; i++){
                                addRow('#effectDetailList', effectDetailRowIdx, effectDetailTpl, data[i]);
                                effectDetailRowIdx = effectDetailRowIdx + 1;
                            }
                        });
					</script>
				</div>
			</div>

			<div class="form-group layui-row page-end"></div>
		</form:form>
	</div>
</div>
</body>
</html>