<%@ 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">
        var validateForm;
        function doSubmit(obj){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
            if(validateForm.form()){
                if(obj == 2){
                    $("#inputForm").attr("action","${ctx}/worksinglewage/workSingleWage/store");
                }else{
                    $("#inputForm").attr("action","${ctx}/worksinglewage/workSingleWage/save");
                }
                $("#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);
                    }
                }
            });
            //只做查看时，禁用掉以下标签
        });
	</script>
	<script type="text/javascript">
        function changeUser(ids,names,parents) {
            var split = ids.split(',');
            var split2 = names.split(',');
            $("#userTableList").html("");
            userIdx=0;
            for(var i=0;i<split.length;i++){
                var id = split[i];
                if(id==''||id==null){
                    continue;
                }else {
                    var obj = {'id':id,'name':split2[i],'officeName':parents[i]};
                    addRow('#userTableList',userIdx,userTpl,obj);
                    userIdx+=1;
                }
            }
        }

        function changeOffice(ids,names,parentIds) {
            $("#officeTableList").html("");
            officeIdx=0;
            for(var i=0;i<ids.length;i++){
                var obj = {'id':ids[i],'name':parentIds[i]};
                addRow('#officeTableList',officeIdx,officeTpl,obj);
                officeIdx+=1;
            }
        }
        function getSelectOfficeIds() {
            var selectedIds = "";
            var pidArr = $("#officeTableList tr .officeId");
            for(var i=0;i<pidArr.length;i++){
                selectedIds+=$(pidArr[i]).val();
                selectedIds+=",";
            }
            return selectedIds;
        }
        function getSelectUserIds() {
            var selectedIds = "";
            var pidArr = $("#userTableList tr .userId");
            for(var i=0;i<pidArr.length;i++){
                selectedIds+=$(pidArr[i]).val();
                selectedIds+=",";
            }
            return selectedIds;
        }

        function addRow(list, idx, tpl, row){
            var idx2 = $("#workAttendancePlaces tr").length;
            if(list == '#workAttendancePlaces'){
                bornTemplete(list, idx, tpl, row, idx2);
            }
        }
        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 dispSimpleName(obj) {
			if(obj == 1){
			    $("#month").val('${nowm}')
			}else {
                $("#month").val('${oldm}')
            }
        }
	</script>

</head>
<body >
<div class="single-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"  maxlength="64" class="form-control layui-input required"/>
					</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:select path="nowMonth" class="form-control required simple-select" style="width:25%;float:left;" onchange="dispSimpleName(this.value);">
								<form:options items="${fns:getDictList('now_month')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
							</form:select>
							<input id="month" name="month" type="text" style="width:75%;" 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">
						<sys:gridselectcallproject url="${ctx}/worksinglewage/workSingleWage/selectWage" id="workSalaryItem" name="workSalaryItem.id"  value="${workSingleWage.workSalaryItem.id}"  title="选择工资项" labelName="workSalaryItem.name"
												   labelValue="${workSingleWage.workSalaryItem.name}" cssClass="form-control required layui-input" fieldLabels="工资项" fieldKeys="workSalaryItemName" searchLabel="工资项名称" searchKey="workSalaryItemName" ></sys:gridselectcallproject>
					</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 number 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="createBy.name" 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">
                        <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="officeId1" class="layui-item nav-btns">
                    <sys:treeselectoffices id="offices" name="" value="" labelName="memberNameStr" labelValue=""
                                           retnParent="true" checked="true" notAllowSelectParent="true" title="部门" url="/sys/office/treeDataBranchOffice?type=2"  cssClass="form-control required" allowClear="true"/>
				</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"/>
                            <input id="officeList{{idx}}_delFlag" name="officeList[{{idx}}].delFlag" readonly="true" value="0" type="hidden" class="form-control delFlag"/>
                        </td>
                        <td>
                            {{row.name}}
                        </td>
                        <td class="text-center op-td">
                                    <a href=javascript:void(0); onclick="delRow(this, '#officeList{{idx}}')"   class="op-btn op-btn-delete"><i class="fa fa-trash"></i> 取消</a>
                        </td>
                    </tr>//-->
				</script>
			</div>
			<div class="form-group layui-row">
				<div class="form-group-label"><h2>规则使用范围-成员</h2></div>
				<div id="userId1" class="layui-item nav-btns">
                    <sys:treeselectusers id="users" name="" value="" labelName="memberNameStr" labelValue=""
                                         retnParent="true" title="用户" url="/sys/office/treeDataBranchOffice?type=3" checked="true" cssClass="form-control required" allowClear="true" notAllowSelectParent="true"/>
				</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"/>
                            <input id="userList{{idx}}_delFlag" name="userList[{{idx}}].delFlag" readonly="true" value="0" type="hidden" class="form-control delFlag"/>
                        </td>
                        <td>
                        {{row.name}}
                        </td>
                        <td>
                        {{row.officeName}}
                        </td>
                        <td class="text-center op-td">
                                    <a href=javascript:void(0); onclick="delRow(this, '#userList{{idx}}')"   class="op-btn op-btn-delete"><i class="fa fa-trash"></i> 取消</a>
                        </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>