<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增用户</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<script src="../../../admin/index.js" door type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.ui-required:before {
				content: "*";
				color: red;
				vertical-align: middle;
			}

			#roleSelectViwe .layui-form-item {
				margin-bottom: 0
			}

			#roleSelectViwe .layui-input-inline {
				width: calc(100% - 110px);
				margin-right: 0;
			}

			.region {
				padding-left: 10px;
				height: 38px;
				line-height: 38px;
				background-color: #fff;
				border-radius: 2px;
				border: 1px solid #e6e6e6;
				width: 100% !important;
				width: calc(100% - 132px) !important;
			}

			.userTip {
				color: #666;
				font-size: 12px;
			}

			.userTip b {
				color: #333;
			}
		</style>
		<script type="text/html" id="typeHtmlTpl">
			<option value="">请选择</option>
		{{# if(!d.list){d.list = []}; layui.each(d.list, function(index, item){ }}
		<option value="{{item.id}}">{{item.name}}</option>
		{{# }); }}
	</script>
	</head>

	<body>
		<form class="layui-form" action="" lay-filter="addForm" style="padding: 20px 30px 0 0">
			<div class="layui-form-item" style="margin-bottom:5px">
				<div class="layui-input-block" style="min-height: 20px;">
					<span class="userTip">为避免账号名称重复，建议账号名称增加单位或区域的字母缩写，例如：<b>James_GY</b></span>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label ui-required">账号</label>
				<div class="layui-input-block">
					<input type="text" name="name" lay-verify="required|nickname|checkName" maxlength="30" placeholder="请输入账号"
					 autocomplete="on" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label ui-required">姓名</label>
					<div class="layui-input-inline">
						<input type="text" name="realName" lay-verify="required" maxlength="10" placeholder="请输入姓名" autocomplete="on"
						 class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-inline">
						<input type="radio" name="sex" value="男" title="男" checked />
						<input type="radio" name="sex" value="女" title="女" />
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label ui-required">角色</label>
				<div class="layui-input-block">
					<select name="roles" lay-verify="required" lay-filter="roles" id="rolesView" placeholder="请选择"></select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">手机号码</label>
				<div class="layui-input-block">
					<input type="text" name="phone" lay-verify="phoneNumber" placeholder="请输入手机号码" maxLength="11" autocomplete="on"
					 class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label ui-required">登录密码</label>
				<div class="layui-input-block">
					<input type="password" id="L_pass" name="pwd" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label ui-required">确认密码</label>
				<div class="layui-input-block">
					<input type="password" lay-verify="resspaword" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item layui-hide">
				<button class="layui-btn" lay-submit lay-filter="formSubmit" id="formSubmit">保存</button>
			</div>
		</form>
		<script type="text/javascript">
			layui.config({
				base: "../../../admin/js/layuiPlugins/"
			}).use(["form", 'layer', 'cascade', 'laytpl', 'jquery'], function() {
				var form = layui.form,
					$ = layui.$,
					layer = layui.layer,
					laytpl = layui.laytpl,
					$ = layui.jquery,
					cascade = layui.cascade;
				var user = {
					id: (JSON.stringify(location.searchObj()) != "{}") ? location.searchObj().id || null : null, //带参传入ID
					roleTableDataId: "roleDataList", //数据ID
					currentUser: {}, //当前表单数据
					roleDataListPort: {
						roles: "roleDataList"
					}, //角色数据接口
					update_user: "userAddNew", //新增修改接口
					select_user: "select_user", //查询用户
					roleSelectView: "#roleSelectViwe", //角色列表下拉容器
					formLayFilter: "addForm", //表单容器
					closeModal: function() { //关闭当前窗口
						parent.layer.close(parent.layer.getFrameIndex(window.name));
					}
				};
				//类型下拉列表模板		
				function typeTpl(obj) {
					laytpl(typeHtmlTpl.innerHTML).render(obj, function(html) {
						$(obj.elem).html(html);
						form.render();
					});
				}
				//初始化
				user.main = function() {
					var _this = this;
					if (this.id) {
						_this.getCurrent(_this.id); //获取并初始化表单角色信息
					} else {
						_this.initialization();

					}
					return this;
				};

				//初始化
				user.initialization = function() {
					var _this = this;
					//初始化角色权限下拉
					$.ajax({
						url: _this.roleDataListPort.roles + '?flag=1',
						success: function(res) {
							typeTpl({
								elem: "#rolesView",
								list: res.data
							});
							form.val(_this.formLayFilter, _this.currentUser);
						}
					});
					//监听提交
					form.on('submit(formSubmit)', function(obj) {
						//必须return false;
						return _this.fusionData(obj.field).submitInfo(); //获取选中权限变数组,提交变化===下拉
					});
					return _this;
				};
				//获取当前信息
				user.getCurrent = function(id) {
					var _this = this;
					$.ajax({
						url: this.select_user,
						data: {
							id: id || this.id //当前ID
						},
						success: function(res) {
							$('#provinceId').text(res.data[0].provinceName || '');
							$('#cityId').text(res.data[0].cityName || '');
							$('#countyId').text(res.data[0].countyName || '');
							_this.currentUser = res.data[0];
							_this.initialization().formVal();
						}
					});
					return this;
				};
				//表单赋值
				user.formVal = function() {
					var _this = this;
					form.val(this.formLayFilter, this.currentUser);
					return this;
				};
				//合并表单内容
				user.fusionData = function(obj) {
					this.currentUser = $.extend(this.currentUser, obj);
					if (this.currentUser.id) {
						delete this.currentUser.password;
					}
					this.currentUser.roles = [this.currentUser.roles];
					return this;
				};
				//提交新增修改
				user.submitInfo = function() {
					var _this = this;
					this.currentUser.userId = this.currentUser.id;
					$.ajax({
						type: this.id ? 'PUT' : 'POST',
						url: this.update_user,
						data: JSON.stringify(this.currentUser),
						contentType: 'application/json',
						success: function(res) {
							if (!(res.code - 0)) {
								parent.layer.msg(res.msg, {
									icon: 1
								});
								parent.layui.table.reload('userDataTable');
								_this.closeModal();
							} else {
								layer.msg(res.msg, {
									icon: 2
								});
							}
						}
					});
					return false;
				};
				user.main();
				//验证规则
				form.verify({
					nickname: function(value) {
						if (!new RegExp("^[a-zA-Z][a-zA-Z0-9_]*$").test(value)) {
							return '用户名必须以英文字母开头，只能包含英文字母、数字、下划线';
						}
						if (/(^\_)|(\__)|(\_+$)/.test(value)) {
							return '用户名首尾不能出现下划线\'_\'';
						}
					},
					checkName: function(value) {
						if (user.currentUser.name != value) {
							var msg = '用户名已经存在',
								code = false;
							$.ajax({
								url: "userList",
								async: false,
								timeout: 10000,
								data: {
									name: value
								},
								success: function(res) {
									if ((res.code - 0) == 7) {
										parent.window.location.href = window.hywa.jumpPage.login;
									}
									code = !!res.total;
								}
							});
							if (code) {
								return msg;
							}
						}
					},
					phoneNumber: function(value) {
						if (value) {
							if (!(/^1[3|4|5|7|8]\d{9}$/).test(value)) {
								return '请输入正确的手机号码';
							}
						}
						return false;
					},
					password: function(value) {
						if (location.searchObj().id) {
							if (value) {
								if (!(/^[\S]{6,12}$/).test(value)) {
									return '密码必须6到12位，且不能出现空格';
								}
							}
							return false;
						}
						if (!(/^[\S]{6,12}$/).test(value)) {
							return '密码必须6到12位，且不能出现空格';
						}
					},
					resspaword: function(value) {
						var pass = $('#L_pass').val();
						if (value != pass) {
							return '两次密码不一致';
						}
					},
					ageLength: [
						/^[0-9]{0,2}$/,
						'年龄必须0到2位，且只能是数字'
					],
					jobLength: [
						/^[a-z\A-Z\u4e00-\u9fa5_]{0,10}$/,
						'职务必须是0-10位,且不包含特殊字符与数字'
					],
					workUnit: [
						/^[0-9\a-z\A-Z\u4e00-\u9fa5_]{0,25}$/,
						'工作单位必须是0-25位,且不包含特殊字符'
					],
					vcode: [
						/^[\w]{4,5}$/,
						'验证码不符合规则'
					]
				});
			});
		</script>
	</body>

</html>
