<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<%@include file="/views/common.jsp"%>
<link rel="stylesheet" href="${path}/static/css/formSelects-v4.css">
<style>
.layui-input,.layui-input-inline{
	width:350px
}
.layui-form-select .layui-edge{
	right:-150px;
}
</style>
</head>
<body>
	<div class="layui-input-block layui-form" lay-filter="addUser"
		style="margin-top: 30px">
		<form class="layui-form " action="">
			<input type="hidden" name="userId" id="userId">
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-inline">
					<input type="text" name="username" lay-verify="username" readonly="readonly"
						placeholder="请输入用户名" class="layui-input" id="username">
				</div>
				<div class="layui-form-mid layui-word-aux">不可修改</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-inline">
					<input type="password" name="password" placeholder="请输入密码"
						autocomplete="off" class="layui-input" id="password"
						lay-verify="password">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">真实姓名</label>
					<div class="layui-input-inline">
						<input type="text" name="realname" id="realnameUpdate"
							autocomplete="off" class="layui-input" placeholder="请输入真实姓名" lay-verify="required">
					</div>
				</div>
			</div>
			<input type="hidden" id="ROLE" class="layui-input" >
			<div class="layui-form-item">
				<label class="layui-form-label">角色</label>
				<div class="layui-input-inline">
					<div id="roleUpdate" style="width: 350px;"></div>
				</div>
			</div>	
			<c:if test = "${ sessionScope.USER_SESSION.role eq '1' or sessionScope.USER_SESSION.role.contains('1,2') }">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">Ip状态</label>
						<div class="layui-input-inline">
							<select name="needIp" id="needIp">
							<option value="0">否</option>
							<option value="1">是</option>
							<option value="2">不需要</option>
						</select>
						</div>
					</div>
				</div>
			</c:if>
			<!--<c:if test = "${ sessionScope.USER_SESSION.role eq '1' or sessionScope.USER_SESSION.role.contains('1,2') 
					or sessionScope.USER_SESSION.role.contains('888')}">
				<div class="layui-form-item">
					<label class="layui-form-label">系统状态</label>
					<div class="layui-input-inline">
						<select name="sysStatus" id="sysStatusUpdate">
							<option value="0">新用户</option>
							<option value="1">第一阶段</option>
							<option value="2">测试通过</option>
						</select>
					</div>
				</div>
			</c:if>-->
			<div class="layui-form-item">
				<!-- <label class="layui-form-label">状态</label>
				<div class="layui-input-block" >
					<input type="radio" name="userStatus" value="1" title="启用" >
					<input type="radio" name="userStatus" value="0" title="禁用">
				</div> -->
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="enadd">确认修改</button>
				</div>
			</div>
		</form>
	</div>
	<script type="text/javascript">
		//全局定义一次, 加载formSelects
	    layui.config({
	        base: '${path}/static/js/' //js文件的路径
	    }).extend({
	        formSelects: 'formSelects-v4',
	        xmSelect: 'xm-select'
	    });
		layui.use([ 'table', 'laydate', 'form','layer','formSelects','xmSelect' ], function() {
			var $ = layui.jquery;
			var table = layui.table;
			var laydate = layui.laydate;
			var form = layui.form;
			var layer = layui.layer;
			var formSelects = layui.formSelects;
			var xmSelect = layui.xmSelect;
			
			layui.form.render("select");
			$('#password').blur(function() {
				var reg = /^[\S]{3,12}$/;
				var con = $(this).val();
				var result = reg.test(con);
				if (result) {
					layer.tips('密码符合规范','#password',{tips : [2,'#009688' ],time : 1500});
				} else {
					layer.tips('密码必须3到12位，且不能出现空格','#password',{tips : [2,'#009688' ],time : 0});
				}
			});
			form.on('submit(enadd)',function(data){
				$.ajax({
					url:'${path}/updateUser',
					dataType : 'json',
					data:$(data.form).serialize(),
					type : 'post',
					success:function(data){
						if (data.code == 200) {
							layer.msg('修改成功！',{icon:6,offset:"auto",time:2000});//提示框
						}else  {
							layer.msg('修改失败！',{icon:5,offset:"auto",time:2000});//提示框
						}
						setTimeout(function(){
							var index = parent.layer.getFrameIndex(window.name);//获取窗口索引
							parent.layer.close(index);//关闭弹出层
							parent.layui.table.reload("userTableAll"); //重新加载页面表格
						}, 2100);
					}
				})
				return false;
			});
			
			// 获取角色
			$.ajax({
				// 获取所有角色
				// url : '${path}/getRoleList',
				// 获取用户拥有的角色
				url : '${path}/getUserRoles',
				dataType : 'json',
				data : {
				},
				type : 'post',
				success : function(data) {
					// 获取所有角色
					// var datas = data.data.allRoleList
					// 获取用户拥有的角色
					var datas = data.data.userRoleList
					var dataArr = [];
					$.each(datas, function(index, item) {
						var data1 = {};
						data1.name  = item.roleName;
						data1.value = item.roleId;
						dataArr.push(data1);
					});
					var role = xmSelect.render({
					    el: '#roleUpdate',
					    data: dataArr, 		//数据
					    name: 'role',		//表单提交的name属性
					    repeat:true,
					    toolbar: {
					    	show: true		//开启头部工具栏
					    },
					    height: '200px',	//高度
					    paging: true,		//分页
					    filterable: true,	//搜索
						searchTips: '搜索角色名称',
						max: 15,			//选择上限
						autoRow: true,		//自动换行
						direction: 'down',	//方向
					})
					var snData = [];
					for(let role of $("#ROLE").val().split(",")){
						snData.push(role);
                    }
					role.setValue(snData);
				}
			});
		})
	</script>
</body>
</html>