<%@ 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"%>
<style type="text/css">
	.layui-table-cell{
		height:32px;
		line-height:32px;
	}
	.layui-table td, .layui-table th,.layui-table-header, .layui-table-page,.layui-table-tool, .layui-table-total, .layui-table-view{
		border-color:#6666;
		font-size:16px;
	}
	.ztree *{
        font-size: 20px;
    }
    .edge .layui-edge{
	right:35px;
}
</style> 
</head>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container demoTable">
	<!-- 超管或者管理员能看到新增、修改IP按钮 -->
    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle-fine" style="font-size:20px;font-weight:bold"></i> 新增用户</button>
	<c:if test = "${ sessionScope.USER_SESSION.role eq '1' or sessionScope.USER_SESSION.role.contains('1,2') }">
    	<button class="layui-btn layui-btn-sm" lay-event="editAllIp"><i class="layui-icon layui-icon-add-circle-fine" style="font-size:20px;font-weight:bold"></i>判断IP</button>
	</c:if>
  </div>
</script>
<script type="text/html" id="barDemo">
  	<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"style="color:white;font-size:20px"></i>编辑</a>
	<a class="layui-btn layui-btn-xs layui-btn-danger"" lay-event="del"><i class="layui-icon layui-icon-delete" ></i>删除</a>
</script>
<script type="text/html" id="userStatusTpl">
  <input type="checkbox" name="userStatus" value="{{d.userId}}"  lay-skin="switch" lay-text="启用|禁用" lay-filter="userStatusDemo" {{ d.userStatus == '1'? 'checked' : '' }}>
</script>
<body>
	<br>
	<form class="layui-form" action="">
		<div class="layui-inline">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-inline">
				<input type="text" id="username" name="username" placeholder="请输入用户名"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">真实姓名</label>
			<div class="layui-input-inline">
				<input type="text" id="realname" name="realname" placeholder="请输入真实姓名"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-inline edge">
				<select name="userStatus" id="userStatus">
					<option value=""></option>
					<option value="1">启用</option>
					<option value="0">禁用</option>
				</select>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">所属店铺</label>
			<div class="layui-input-inline edge">
				<select name="roleSearch" id="roleSearch" lay-search></select>
			</div>
			<!-- <label class="layui-form-label">用户角色</label>
			<div class="layui-input-inline">
				<div id="roleSearch" style="width: 350px;"></div>
			</div> -->
			<input type="hidden" id="role" name="role" value="${sessionScope.USER_SESSION.role}" >
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline">
				<button class="layui-btn" id="searchBtn" lay-submit lay-filter="formDemo" style="margin-left: 15px">
					<i class="layui-icon layui-icon-search"></i> 查询
				</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	
	<div class="layui-fluid">
		<div class="layui-row">
			<table class="layui-hide" id="userTable"lay-data="userTable" lay-filter="userTable"></table>
			 <div class="layui-col-md12" id="editPers" style="display:none;">
	            <h3>角色权限</h3>
	            <hr>
	            <ul id="treeDemo" class="ztree"></ul>
	            <hr>
	            <button onclick="assignPers();" class="layui-btn layui-btn-fluid">授权</button>
	        </div>
		</div>
	</div>
<script type="text/javascript">
	//全局定义一次, 加载xm-select
	layui.config({
	    base: '${path}/static/js/' //js文件的路径
	}).extend({
		xmSelect: 'xm-select'
	});
	
	//角色名称转换(放在layui.use里面js页面读取不到)
	var roleData = {};
	$.ajax({
		url : '${path}/changeRoleName',
		dataType : 'json',
		data : {
		}, 
		type : 'post',
		success : function(data) {
			roleData = data;
		}
	});
	
	// 下拉框第一列添加空的option
	$('#roleSearch').append(new Option("",""));
	layui.use([ 'form', 'layer','xmSelect' ],function() {
		var $ = layui.$,
		form = layui.form, 
		layer = layui.layer, 
		xmSelect = layui.xmSelect;
		
		// 获取角色
		$.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
				$.each(datas, function(index, item) {
					$('#roleSearch').append(
							new Option(item.roleName, item.roleId));// 下拉菜单里添加元素
					});
				form.render("select");
			}
		})
	
		/* $.ajax({
			url : '${path}/getRoleList',
			dataType : 'json',
			data : {
			},
			type : 'post',
			success : function(data) {
				var datas = data.data.roleList.list
				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: '#roleSearch',
				    data: dataArr, 		//数据
				    name: 'role',		//表单提交的name属性
				    repeat:true,
				    toolbar: {
				    	show: true		//开启头部工具栏
				    },
				    height: '200px',	//高度
				    paging: true,		//分页
				    filterable: true,	//搜索
					searchTips: '搜索店铺名称',
					max: 10,			//选择上限
					autoRow: true,		//自动换行
					direction: 'down',	//方向
				})
			}
		}); */
	})	
</script>
<script src="${path}/js/user.js" charset="utf-8"></script>

</body>
</html>