<%@ 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;}
		label.error{
			top:40px;
			left:0;
		}
	</style>
	<script type="text/javascript" src="${ctxStatic}/ckeditor/ckeditor.js"></script>
	<script type="text/javascript" language="JavaScript" for="window" event="onload">
        var validateForm;
        window.doSubmit = doSubmit;
        function doSubmit(){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
            if(validateForm.form()){
                var officeCount =  $("#officeTableList tr:visible").length;
                var userCount =  $("#userTableList tr:visible").length;
                var placesCount =  $("#workAttendancePlaces tr:visible").length;
                if(placesCount<1){
                    parent.layer.msg("请选择考勤地点！",{icon:5});
                    return false;
                }
                var placesCounts =  $("#workAttendancePlaces tr").length;
                for(var i = 0;i < placesCounts; i++) {
                    var tds =  $("#workAttendancePlaces"+i+" td:visible").length;
                    if(tds > 0 ) {
                        var placeScope = $("#workAttendancePlaces" + i + "_placeScope").val();
                        var placeName = $("#workAttendancePlaces" + i + "_placeName").val();
                        var wifi = $("#workAttendancePlaces" + i + "_wifi").val();
                        if (wifi == null || wifi == '' || wifi == undefined) {
                            if (placeName == null || placeName == '' || placeName == undefined) {
                                parent.layer.msg("请选择考勤地址！", {icon: 5});
                                return false;
                            }
                            if (placeScope == null || placeScope == '' || placeScope == undefined) {
                                parent.layer.msg("请选择考勤半径！", {icon: 5});
                                return false;
                            }
                        }
                    }
                }
                if(officeCount+userCount<1){
                    parent.layer.msg("请选择考勤范围！",{icon:5});
                    return false;
                }
                var officeCounts =  $("#officeTableList tr").length;
                var userCounts =  $("#userTableList tr").length;
                var userIds = "";
                var officeIds = "";
                for(var i = 0;i < officeCounts; i++) {
                    var officeId = $("#officeList" + i + "_id").val();
                    if(officeId != null && officeId != '' && officeId != undefined){
                        officeIds += officeId+",";
                    }
                }
                for(var i = 0;i < userCounts; i++) {
                    var userId = $("#userList" + i + "_id").val();
                    if(userId != null && userId != '' && userId != undefined){
                        userIds += userId+",";
                    }
                }
                var id = $("#id").val();
                var succ = isSave(id,officeIds,userIds);
                if(succ == false || succ == 'false'){
                    return false;
				}
                var start = $("#startTime").val();
                var end = $("#endTime").val();
                if(start!=undefined&&start!=null&&start!=''){
                    var d1 = new Date();
                    var format = d1.format('yyyy-MM-dd');
                    $("#startTime").val(format+" "+start);
                }
                if(end!=undefined&&end!=null&&end!=''){
                    var d1 = new Date();
                    var format = d1.format('yyyy-MM-dd');
                    $("#endTime").val(format+" "+end);
                }
                $("#inputForm").submit();
                return true;
            }
            return false;
        }
        Date.prototype.format = function(fmt) {
            var o = {
                "M+" : this.getMonth()+1,                 //月份
                "d+" : this.getDate(),                    //日
                "h+" : this.getHours(),                   //小时
                "m+" : this.getMinutes(),                 //分
                "s+" : this.getSeconds(),                 //秒
                "q+" : Math.floor((this.getMonth()+3)/3), //季度
                "S"  : this.getMilliseconds()             //毫秒
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(var k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }
        $(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: '#startTime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
                event: 'focus', //响应事件。如果没有传入event，则按照默认的click
                type : 'time',
                format:'HH:mm:ss'
            });
            laydate.render({
                elem: '#endTime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
                event: 'focus', //响应事件。如果没有传入event，则按照默认的click
                type : 'time',
                format:'HH:mm:ss'
            });
           /* laydate.render({
                elem: '#workStartTime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
                event: 'focus', //响应事件。如果没有传入event，则按照默认的click
                type : 'datetime'
            });
            laydate.render({
                elem: '#workEndTime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
                event: 'focus', //响应事件。如果没有传入event，则按照默认的click
                type : 'datetime'
            });*/
            $("#attachment_btn").click(function () {
                $("#attachment_file").click();
            });
            var branchOffice = $("#branchOfficeId").val();
            changeBtn(branchOffice);
            var notWorkCount = $("#notWorkCount").val();
            dispSimpleName(notWorkCount);
            var type = $("#type").val();
            dispSimpleInfo(type);

        });
	</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 delRow(obj, prefix) {
            var delFlag = $(prefix+"_delFlag");
            delFlag.val("1");
            $(obj).parent().parent().hide();
        }

        function changePlaces(name,itude,address) {
            var _placeName = name+"_placeName";
            var _itude = name+"_itude";
            var areaName= $("#"+name+"_areaName").val();
            $.ajax({
                type:'post',
                url:'${ctx}/workattendance/workAttendanceRule/isCity',
                async:false,
                data:{
                    "itude":itude
                },
                success:function(data){
                    if(data!=areaName){
                        parent.layer.msg("该地点不在所选城市范围内!", {icon: 5});
                        return false;
					}else{
                        $("#"+_placeName).val(address);
                        $("#"+_itude).val(itude);
					}
                }
            });

        }

        //打开对话框(查看)
        function openDialogInfo(title,url,width,height,name){
			var areaName = $(name+"_areaName").val();
			var itude = $(name+"_itude").val();
            if(areaName == null || areaName == '' || areaName == undefined ){
                parent.layer.msg("请先输入城市！",{icon:5});
                return;
            }
            url += encodeURIComponent(areaName+"&itude="+itude);
            if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端，就使用自适应大小弹窗
                width='auto';
                height='auto';
            }else{//如果是PC端，根据用户设置的width和height显示。

            }
            top.layer.open({
                type: 2,
                skin: 'one-btn',
                area: [width, height],
                title: title,
                maxmin: true, //开启最大化最小化按钮
                content: url ,
                btn: ['关闭'],
                cancel: function(index){
                }
            });
        }

        function dispSimpleName(val) {
            if(val == '1'){
                $("#notWorkNeed1").show();
                $("#notWorkType1").show();
                $("#notWorkVacation1").show();
                $("#notWorkVacationRead").hide();
                $("#notWorkNeedRead").hide();
                $("#notWorkTypeRead").hide();
            }else {
                $("#notWorkNeed").val("");
                $("#notWorkType").val("");
                $("#notWorkVacation").val("");
                $("#notWorkNeedRead").show();
                $("#notWorkTypeRead").show();
                $("#notWorkVacationRead").show();
                $("#notWorkNeed1").hide();
                $("#notWorkType1").hide();
                $("#notWorkVacation1").hide();
            }
        }
        function dispSimpleInfo(val) {
            if(val == '2'){
                $("#startTime1").show();
                $("#endime1").show();
                $("#startTime2").hide();
                $("#endime2").hide();
                $("#notWorkCount1").show();
                $("#notWorkCount2").hide();
            }else if(val == '1') {
                $("#startTime").val("");
                $("#endTime").val("");
                $("#startTime1").hide();
                $("#endime1").hide();
                $("#startTime2").show();
                $("#endime2").show();
                $("#notWorkCount1").show();
                $("#notWorkCount2").hide();
            }else {
                dispSimpleName();
                $("#notWorkCount").val("");
                $("#startTime").val("");
                $("#endTime").val("");
                $("#notWorkCount1").hide();
                $("#notWorkCount2").show();
                $("#startTime1").hide();
                $("#endime1").hide();
                $("#startTime2").show();
                $("#endime2").show();
            }
        }
        function addInfo() {
            parent.layer.msg("请先选择分公司!", {icon: 5});
        }
        function changeBtn(obj) {
            if(obj == null || obj == '' || obj == undefined){
                $("#userId1").hide();
                $("#officeId1").hide();
                $("#userId2").show();
                $("#officeId2").show();
            }else {
                $("#userId1").show();
                $("#officeId1").show();
                $("#userId2").hide();
                $("#officeId2").hide();
            }

        }

        function isSave(id,officeIds,userIds) {
            var save = false;
            var branchOffice = $("#branchOfficeId").val();
            $.ajax({
                type:'post',
                url:'${ctx}/workattendance/workAttendanceRule/isSave',
                data:{
                    "id":id,"officeIds":officeIds,"userIds":userIds,"branchOffice":branchOffice
                },
                async: false,
                success:function(data){
                    if(!data.success){
                        parent.layer.msg(data.msg,{icon:5});
                    }
                    save = data.success;
                }
            })
			return save;
        }
	</script>

</head>
<body >
<div class="single-form">
	<div class="container">
		<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">
						<sys:treeselectChange id="branchOffice" name="branchOffice.id" value="${workAttendanceRule.branchOffice.id}" labelName="branchOffice.name"  labelValue="${workAttendanceRule.branchOffice.name}"
										title="部门" url="/sys/office/treeDataCompanyDSF?type=2" cssClass="form-control required layui-input" allowClear="true" />

					</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="number" htmlEscape="false"  minlength="1" maxlength="3" class="form-control number 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">
						<form:input path="name" htmlEscape="false"  maxlength="30" class="form-control layui-input required"/>
					</div>
				</div>
			</div>
			<div class="form-group layui-row">
				<div class="form-group-label"><h2>办公区域</h2></div>
				<div class="layui-item nav-btns">
					<a class="nav-btn nav-btn-add" onclick="addRow('#workAttendancePlaces', workAttendancePlacesRowIdx, workAttendancePlacesTpl);workAttendancePlacesRowIdx = workAttendancePlacesRowIdx + 1;" title="新增"><i class="fa fa-plus"></i>&nbsp;新增</a>
				</div>
				<div class="layui-item layui-col-xs12 form-table-container">
					<table id="contentTable2" class="table table-bordered table-condensed can-edit">
						<thead>
						<tr>
							<th width="15%">城市</th>
							<th>地理位置</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">
										<input id="workAttendancePlaces${index.index}_id" name="workAttendancePlaces[${index.index}].id" type="hidden" value="${workAttendancePlaces.id}"/>
										<input id="workAttendancePlaces${index.index}_delFlag" name="workAttendancePlaces[${index.index}].delFlag" type="hidden" value="0"/>
									</td>
									<td>
										<sys:treeselect id="workAttendancePlaces${index.index}_area" name="workAttendancePlaces[${index.index}].area.id" value="${workAttendancePlaces.area.id}" labelName="workAttendancePlaces[${index.index}].area.name" labelValue="${workAttendancePlaces.area.name}"
														title="城市" url="/sys/area/treeData" rule="rule" cssClass="form-control layui-input required" allowClear="true" notAllowSelectParent="false"/>
									</td>

									<td>
										<input id="workAttendancePlaces${index.index}_placeName" readonly="true" name="workAttendancePlaces[${index.index}].placeName" type="text" maxlength="32" value="${workAttendancePlaces.placeName}"  class="form-control "/>
									</td>
									<td>
										<input id="workAttendancePlaces${index.index}_itude" readonly="true" name="workAttendancePlaces[${index.index}].itude" type="text" maxlength="32" value="${workAttendancePlaces.itude}" class="form-control "/>
									</td>
									<td>
										<c:choose>
											<c:when test="${not empty workAttendanceRule.workAttendancePlaces}">
												<input id="workAttendancePlaces${index.index}_placeScope" name="workAttendancePlaces[${index.index}].placeScope" type="text" minlength="1" maxlength="6" value="${workAttendancePlaces.placeScope}" class="form-control number "/>
											</c:when>
											<c:otherwise>
												<input id="workAttendancePlaces${index.index}_placeScope" name="workAttendancePlaces[${index.index}].placeScope" readonly="true" type="text" minlength="1" maxlength="6" value="${workAttendancePlaces.placeScope}" class="form-control number "/>
											</c:otherwise>
										</c:choose>
									</td>
									<td>
										<input id="workAttendancePlaces${index.index}_wifi" readonly="true" name="workAttendancePlaces[${index.index}].wifi" type="text" maxlength="32" value="${workAttendancePlaces.wifi}" class="form-control "/>
									</td>
									<td>
										<input id="workAttendancePlaces${index.index}_wifiName" readonly="true" name="workAttendancePlaces[${index.index}].wifiName"  type="text" maxlength="32" value="${workAttendancePlaces.wifi}" class="form-control "/>
									</td>
									<td class="text-center op-td">
										<c:if test="${empty workAttendancePlaces.wifi}">
											<span onclick="openDialogInfo('选择地址','${ctx}/workattendance/workAttendanceRule/baidiApi?name=workAttendancePlaces${index.index}&city=','80%','80%','#workAttendancePlaces${index.index}')" class="op-btn op-btn-add" ><i class="fa fa-plus"></i>&nbsp;选择</span>
										</c:if>
										<span class="op-btn op-btn-delete" onclick="delRow(this, '#workAttendancePlaces${index.index}')" title="删除"><i class="glyphicon glyphicon-remove"></i>&nbsp;删除</span>
									</td>
								</tr>
							</c:forEach>
						</c:if>
						</tbody>
					</table>
					<script type="text/template" id="workAttendancePlacesTpl">//<!--
                                    <tr id="workAttendancePlaces{{idx}}">
                                        <td class="hide">
											<input id="workAttendancePlaces{{idx}}_id" name="workAttendancePlaces[{{idx}}].id" type="hidden" value="{{row.id}}"/>
											<input id="workAttendancePlaces{{idx}}_delFlag" name="workAttendancePlaces[{{idx}}].delFlag" type="hidden" value="0"/>
										</td>
										<td>
											<sys:treeselect id="workAttendancePlaces{{idx}}_area" name="workAttendancePlaces[{{idx}}].area.id" value="${workAttendanceRule.area.id}" labelName="workAttendancePlaces[{{idx}}].area.name" labelValue="${workAttendanceRule.area.name}"
															title="城市" url="/sys/area/treeData" rule="rule" cssClass="form-control layui-input required" allowClear="true" notAllowSelectParent="true"/>
										</td>

										<td>
											<input id="workAttendancePlaces{{idx}}_placeName" readonly="true"name="workAttendancePlaces[{{idx}}].placeName" type="text" maxlength="32" value=""  class="form-control "/>
										</td>
										<td>
											<input id="workAttendancePlaces{{idx}}_itude" readonly="true" name="workAttendancePlaces[{{idx}}].itude" type="text" maxlength="32" value="" class="form-control "/>
										</td>
										<td>
											<input id="workAttendancePlaces{{idx}}_placeScope" name="workAttendancePlaces[{{idx}}].placeScope" minlength="1" maxlength="6" type="text" maxlength="32" value="" class="form-control number "/>
										</td>
										<td>
											<input id="workAttendancePlaces{{idx}}_wifi" readonly="true" name="workAttendancePlaces[{{idx}}].wifi" type="text" maxlength="32" value="" class="form-control "/>
										</td>
										<td>
											<input id="workAttendancePlaces{{idx}}_wifiName" readonly="true" name="workAttendancePlaces[{{idx}}].wifiName" type="text" maxlength="32" value="" class="form-control  "/>
										</td>
										<td class="text-center op-td">
											<span onclick="openDialogInfo('选择地址','${ctx}/workattendance/workAttendanceRule/baidiApi?name=workAttendancePlaces{{idx}}&city=','80%','80%','#workAttendancePlaces{{idx}}')" class="op-btn op-btn-add" ><i class="fa fa-plus"></i>&nbsp;选择</span>
											<span class="op-btn op-btn-delete" onclick="delRow(this, '#workAttendancePlaces{{idx}}')" title="删除"><i class="glyphicon glyphicon-remove"></i>&nbsp;删除</span>
										</td>
                                    </tr>//-->
					</script>
					<script type="text/javascript">
                        var workAttendancePlacesRowIdx = 0, workAttendancePlacesTpl = $("#workAttendancePlacesTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                        if($("#id").val()){
                            workAttendancePlacesRowIdx = ${fn:length(workAttendanceRule.workAttendancePlaces)};
                        }
                        $(document).ready(function() {
                            /*var data = ${fns:toJson(workAttendanceRule.workAttendancePlaces)};
                    for (var i=0; i<data.length; i++){
                        addRow('#workAttendancePlaces', workAttendancePlacesRowIdx, workAttendancePlacesTpl, data[i]);
                        workAttendancePlacesRowIdx = workAttendancePlacesRowIdx + 1;
                    }*/
                        });
					</script>
				</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">
						<form:select path="type" class="form-control required simple-select" onchange="dispSimpleInfo(this.value);">
                            <form:option value="" label=""/>
							<form:options items="${fns:getDictList('attendance_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</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"  style="display:none">
						<input id="startTime" name="startTime" style="background-color: #ffffff;" readonly="true" htmlEscape="false"  class="laydate-icondate form-control layer-date layui-input laydate-icon required"
							   value="<fmt:formatDate value="${workAttendanceRule.startTime}" pattern="HH:mm:ss"/>"/>
					</div>
					<div id="startTime2" class="layui-input-block"  style="display:none">
                        <form:input path="" htmlEscape="false" readonly="true" minlength="1" maxlength="3" 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 id="endime1" class="layui-input-block">
						<input id="endTime" name="endTime" style="background-color: #ffffff;" readonly="true" htmlEscape="false"  class="laydate-icondate form-control layer-date layui-input laydate-icon required"
							   value="<fmt:formatDate value="${workAttendanceRule.endTime}" pattern="HH:mm:ss"/>"/>
					</div>
                    <div id="endime2" class="layui-input-block"  style="display:none">
                        <form:input path="" htmlEscape="false" readonly="true" minlength="1" maxlength="3" class="form-control layui-input"/>
                    </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 id="notWorkCount1" class="layui-input-block">
                        <form:select path="notWorkCount" class="form-control required simple-select" onchange="dispSimpleName(this.value);">
                            <form:option value="" label=""/>
                            <form:options items="${fns:getDictList('not_work_count')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
                        </form:select>
                    </div>
                    <div id="notWorkCount2" class="layui-input-block" style="display:none">
						<form:input path="" htmlEscape="false" readonly="true" minlength="1" maxlength="3" class="form-control layui-input"/>
                    </div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label double-line">非工作日加班需要申请:</label>
                    <div id="notWorkNeed1" class="layui-input-block"  style="display:none">
                        <form:select path="notWorkNeed" class="form-control required simple-select">
							<form:option value="" label=""/>
                            <form:options items="${fns:getDictList('not_work_need')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
                        </form:select>
                    </div>
                    <div id="notWorkNeedRead" class="layui-input-block">
                        <form:input path="" htmlEscape="false" readonly="true" minlength="1" maxlength="3" class="form-control layui-input"/>
                    </div>
                </div>
                <div class="layui-item layui-col-sm6">
                    <label class="layui-form-label double-line">非工作日加班处理方式:</label>
                    <div id="notWorkType1" class="layui-input-block"  style="display:none">
                        <form:select path="notWorkType" class="form-control required simple-select">
							<form:option value="" label=""/>
                            <form:options items="${fns:getDictList('not_work_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
                        </form:select>
                    </div>
                    <div id="notWorkTypeRead" class="layui-input-block">
                        <form:input path="" htmlEscape="false" readonly="true" minlength="1" maxlength="3" class="form-control layui-input "/>
                    </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 with-icon" style="display:none">
						<sys:treeLeave id="leaveType" name="leaveType" value="${workAttendanceRule.leaveType}" labelName="leaveTypeName" labelValue="${workAttendanceRule.leaveTypeName}"
									   title="调休请假类型" url="/leavetype/leaveType/treeData?typeId=1" isAll="true"  cssClass="form-control required layui-input" notAllowSelectParent="true"/>

					</div>
                    <div id="notWorkVacationRead" class="layui-input-block">
                        <form:input path="" htmlEscape="false" readonly="true" minlength="1" maxlength="3" class="form-control layui-input"/>
                    </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" style="display:none">
					<sys:treeselectofficesChange 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"  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"/>
                            <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(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){
                        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>