<%@ 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>

</head>
<body >
<div class="single-form">
	<div class="container view-form">
		<form:form id="inputForm" modelAttribute="workAttendanceRule" enctype="multipart/form-data" action="${ctx}/workattendance/workAttendanceRule/save" method="post" class="form-horizontal">
			<form:hidden path="id"/>
			<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">
						<input htmlEscape="false"  readonly="true"  class="form-control layui-input" value="${workAttendanceRule.branchOffice.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">
						<input htmlEscape="false"  readonly="true"  class="form-control layui-input" value="${workAttendanceRule.number}"/>
					</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 htmlEscape="false"  readonly="true"  class="form-control layui-input" value="${workAttendanceRule.name}"/>
					</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="userTable2" class="table table-bordered table-condensed details">
						<thead>
						<tr>
							<th width="15%">城市</th>
							<th>sss地理位置</th>
							<th width="15%">经纬度</th>
							<th width="12%">半径(米)</th>
							<th width="10%">WIFI</th>
							<th width="15%">无线SSID</th>
							<th width="120px">操作</th>
						</tr>
						</thead>
						<tbody id="workAttendancePlaces">
						<c:if test="${not empty workAttendanceRule.workAttendancePlaces}">
							<c:forEach items="${workAttendanceRule.workAttendancePlaces}" var="workAttendancePlaces" varStatus="index">
								<tr id="workAttendancePlaces${index.index}">
									<td class="hide">
									</td>
									<td>
											${workAttendancePlaces.area.name}
									</td>

									<td>
											${workAttendancePlaces.placeName}
									</td>
									<td>
											${workAttendancePlaces.itude}
									</td>
									<td>
											${workAttendancePlaces.placeScope}
									</td>
									<td>
											${workAttendancePlaces.wifi}
									</td>
									<td>
											${workAttendancePlaces.wifiName}
									</td>
									<td class="text-center op-td">
									</td>
								</tr>
							</c:forEach>
						</c:if>
						</tbody>
					</table>
				</div>
			</div>
			<div class="form-group layui-row">
				<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 htmlEscape="false" readonly="true"  class="form-control layui-input" value="${fns:getDictLabel(workAttendanceRule.type, 'attendance_type', '')}"/>
					</div>
				</div>
				<div class="layui-item layui-col-sm6">
					<div class="layui-input-block">
					</div>
				</div>
				<div class="layui-item layui-col-sm6 ">
					<label class="layui-form-label"><span class="require-item">*</span>上班时间:</label>
					<div id="startTime1" class="layui-input-block">
						<input htmlEscape="false" readonly="true"  class="form-control layui-input" value="<fmt:formatDate value="${workAttendanceRule.startTime}" pattern="HH:mm:ss"/>"/>
					</div>

				</div>
				<div class="layui-item layui-col-sm6">
					<label class="layui-form-label"><span class="require-item">*</span>下班时间:</label>
					<div id="endime1" class="layui-input-block">
						<input htmlEscape="false" readonly="true"  class="form-control layui-input" value="<fmt:formatDate value="${workAttendanceRule.endTime}" pattern="HH:mm:ss"/>"/>
					</div>
				</div>
			</div>
            <div class="form-group layui-row">
                <div class="form-group-label"><h2>非工作日加班</h2></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">
						<input htmlEscape="false" readonly="true"  class="form-control layui-input" value="${fns:getDictLabel(workAttendanceRule.notWorkCount, 'not_work_count', '')}"/>
                    </div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label double-line">非工作日加班需要申请:</label>
                    <div id="notWorkNeed1" class="layui-input-block">
						<input htmlEscape="false" readonly="true"  class="form-control layui-input" value="${fns:getDictLabel(workAttendanceRule.notWorkNeed, 'not_work_need', '')}"/>
					</div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label double-line">非工作日加班处理方式:</label>
                    <div id="notWorkType1" class="layui-input-block">
						<input htmlEscape="false" readonly="true"  class="form-control layui-input" value="${fns:getDictLabel(workAttendanceRule.notWorkType, 'not_work_type', '')}"/>
                    </div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label double-line"><span class="require-item">*</span>调休假期类型:</label>
                    <div id="notWorkVacation1" class="layui-input-block">
						<input htmlEscape="false" readonly="true"  class="form-control layui-input" value="${workAttendanceRule.leaveTypeName}"/>
					</div>
                </div>
            </div>
			<div class="form-group layui-row">
				<div class="form-group-label"><h2>规则使用范围-部门</h2></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="userId1" class="layui-item nav-btns"  style="display:none">
					<sys:treeselectusersChange 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"/>
                        </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(workAttendanceRule.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(workAttendanceRule.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,idx){
                        $(obj).parent().parent().remove();
                    }
				</script>
			</div>
			<div class="form-group layui-row page-end"></div>
		</form:form>
	</div>
</div>
</body>
</html>