<%@ 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);
					}
				}
			});
			
		});
	</script>
</head>
<body>
<div class="single-form">
    <div class="container">
		<form:form id="inputForm" modelAttribute="workCommonGroup" action="${ctx}/workcommongroup/workCommonGroup/save" method="post" class="form-horizontal">
            <form:hidden path="id"/>
            <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 double-line"><span class="require-item">*</span>常用组名称：</label>
                    <div class="layui-input-block">
                        <form:input path="name" htmlEscape="false"    class="form-control  layui-input required"/>
                    </div>
                </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">
                        <form:input path="num" htmlEscape="false" maxlength="2" class="form-control  layui-input digits required"/>
                    </div>
                </div>
            </div>
            <div class="form-group layui-row">
                <div class="form-group-label"><h2>常用组成员</h2></div>
                <div class="layui-item nav-btns">
                    <sys:treeselectusers id="users" name="" value="" labelName="memberNameStr" labelValue=""
                                         retnParent="true" title="用户" url="/sys/office/treeData?type=3" checked="true" cssClass="form-control required" allowClear="true" notAllowSelectParent="true"/>
                </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">
                                    <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,"");

                    $(document).ready(function() {
                        var dataBank = ${fns:toJson(workCommonGroup.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 = $("#userTableList 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();
                    }

                    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 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;
                            }
                            var obj = {'id':id,'name':split2[i],'officeName':parents[i]};
                            addRow('#userTableList',userIdx,userTpl,obj);
                            userIdx+=1;
                        }
                    }
                </script>
            </div>
	    </form:form>
    </div>
</div>
</body>
</html>