<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>单项工资</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		img {width: 50px; height: 50px;}
	</style>
	<script type="text/javascript" src="${ctxStatic}/ckeditor/ckeditor.js"></script>
	<script type="text/javascript" language="JavaScript" for="window" event="onload">
	</script>
	<script type="text/javascript">
	</script>

</head>
<body >
<div class="single-form view-form">
	<div class="container">
		<form:form id="inputForm" modelAttribute="workSingleWage" enctype="multipart/form-data"  method="post" class="form-horizontal">
			<form:hidden path="id"/>
			<form:hidden path="grantCount"/>
			<sys:message content="${message}"/>

			<div class="form-group layui-row first">
				<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 with-icon">
						<form:input path="name" htmlEscape="false" readonly="true"  maxlength="64" 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">
						<div class="input-group">
							<input id="month" name="month" type="text" readonly="readonly" maxlength="20" class="laydate-icondate form-control layer-date required layui-input laydate-icon"
								   value="${workSingleWage.month}"/>
							<span class="input-group-btn">
                            <label class="form-status"><c:choose><c:when test="${not empty workReimbursement.status}">${fns:getDictLabel(workReimbursement.status, 'audit_state', '')}</c:when><c:otherwise>新添</c:otherwise></c:choose></label>
                         </span>
						</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 with-icon">
						<input  type="text" readonly="readonly" maxlength="20" class="form-control layui-input"
							   value="${workSingleWage.workSalaryItem.name}"/>
					</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="money" htmlEscape="false"  maxlength="20" 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">
						<form:input path="createBy.name" htmlEscape="false" readonly="true" maxlength="20" 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">
                        <input id="createDate" name="createDate" type="text" readonly="readonly" maxlength="20" class="laydate-icondate form-control layer-date required layui-input laydate-icon"
                               value="<fmt:formatDate value="${workSingleWage.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
					</div>
				</div>
				<div class="layui-item layui-col-sm6">
					<label class="layui-form-label">分公司人数:</label>
					<div class="layui-input-block">
						<form:input path="branchCount" htmlEscape="false" readonly="true" maxlength="20" class="form-control layui-input required"/>
					</div>
				</div>
				<div class="layui-item layui-col-sm6">
					<label class="layui-form-label">发放人数:</label>
					<div class="layui-input-block">
						<form:input path="grantCount" htmlEscape="false" readonly="true" maxlength="20" class="form-control layui-input required"/>
					</div>
				</div>
			</div>
			<div class="form-group layui-row">
				<div class="form-group-label"><h2>规则使用范围-部门</h2></div>
				<div id="officeId2" style="display:none">
					<button style="font-size:14px;" type="button" onclick="addInfo()" class="nav-btn nav-btn-add"><i class="fa fa-plus"></i>&nbsp;选择
					</button>
				</div>
				<table id="officeTable" class="table table-bordered table-condensed details">
					<thead>
					<tr>
						<th class="hide"></th>
						<th>部门</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody id="officeTableList">
					</tbody>
				</table>
				<script type="text/template" id="officeTpl">//<!--
                    <tr id="officeList{{idx}}">
                        <td class="hide">
                            <input id="officeList{{idx}}_id" name="officeList[{{idx}}].id" readonly="true" value="{{row.id}}" type="hidden" class="form-control officeId"/>
                        </td>
                        <td>
                            {{row.name}}
                        </td>
                        <td class="text-center op-td">
                        </td>
                    </tr>//-->
				</script>
			</div>
			<div class="form-group layui-row">
				<div class="form-group-label"><h2>规则使用范围-成员</h2></div>
				<div id="userId2" style="display:none">
					<button style="font-size:14px;" type="button" onclick="addInfo()" class="nav-btn nav-btn-add"><i class="fa fa-plus"></i>&nbsp;选择
					</button>
				</div>
				<table id="userTable" class="table table-bordered table-condensed details">
					<thead>
					<tr>
						<th class="hide"></th>
						<th>姓名</th>
						<th>部门</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody id="userTableList">
					</tbody>
				</table>
				<script type="text/template" id="userTpl">//<!--
                    <tr id="userList{{idx}}">
                        <td class="hide">
                            <input id="userList{{idx}}_id" name="userList[{{idx}}].id" readonly="true" value="{{row.id}}" type="hidden" class="form-control userId"/>
                        </td>
                        <td>
                        {{row.name}}
                        </td>
                        <td>
                        {{row.officeName}}
                        </td>
                        <td class="text-center op-td">
                        </td>
                    </tr>//-->
				</script>
				<script type="text/javascript">
                    var userIdx = 0, userTpl = $("#userTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                    var officeIdx = 0, officeTpl = $("#officeTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");

                    $(document).ready(function() {
                        var data = ${fns:toJson(workSingleWage.officeList)};
                        if (data!=null) {
                            for (var i = 0; i < data.length; i++) {
                                addRow('#officeTableList', officeIdx, officeTpl, data[i]);
                                officeIdx = officeIdx + 1;
                            }
                        }
                        var dataBank = ${fns:toJson(workSingleWage.userList)};
                        if (dataBank!=null) {
                            for (var i = 0; i < dataBank.length; i++) {
                                addRow('#userTableList', userIdx, userTpl, dataBank[i]);
                                userIdx = userIdx + 1;
                            }
                        }
                    });

                    function addRow(list, idx, tpl, row){
                        var idx1 = 0;
                        if('#userTableList'==list){
                            idx1 = $("#userTableList tr").length
                        }else if('#officeTableList'==list){
                            idx1 = $("#officeTableList tr").length
                        }
                        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, idx1:idx1
                        }));
                        $(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 delFlag = $(prefix+"_delFlag");
                        delFlag.val("1");
                        $(obj).parent().parent().hide();
                    }
				</script>
			</div>
			<div class="form-group layui-row page-end"></div>
		</form:form>
	</div>
</div>
</body>
</html>