<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
<head>
    <meta charset="UTF-8"/>
    <title>管理员编辑页</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/public.css"/>
</head>
<body class="child-body">
<div class="child-nav">
    <span class="layui-breadcrumb">
         <a>系统管理</a>
         <a href="/admin/user/list">用户列表</a>
         <a><cite th:text="${#strings.equals(user.id,null)?'新增用户':'修改用户'}"></cite></a>
    </span>
    <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新"
       style="float:right;margin-top: 3px"><i class="layui-icon" style="line-height:30px">&#x1002;</i></a>
</div>
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header" th:text="${#strings.equals(user.id,null)?'新增用户':'修改用户'}"></div>
        <div class="layui-card-body">
            <form class="layui-form" action="/admin/user/save" method="post">
                <input type="hidden" id="userId" name="id" th:value="${user.id}">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userName" lay-verify="required" lay-vertype="tips" placeholder="请输入用户名"
                               th:value="${user.userName}" autocomplete="off" class="layui-input"
                               th:readonly="${user.id!=null&&user.id!=currentId}">
                    </div>
                    <div class="layui-form-mid layui-word-aux" th:if="${user.id==null}">新增用户默认密码为：123456</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">真实姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="realName" lay-verify="required" lay-vertype="tips"
                               placeholder="请输入真实姓名" th:value="${user.realName}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status" lay-verify="required">
                            <option value="0" th:selected="${user.status==0}">激活</option>
                            <option value="1" th:selected="${user.status==1}">禁用</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">头像</label>
                    <div class="layui-input-inline">
                        <input type="text" name="avatar" id="af" class="layui-input" th:value="${user.avatar}" readonly>
                    </div>
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="avatar">
                            <i class="layui-icon">&#xe681;</i>上传图片
                        </button>
                        <div class="layui-upload-list" style="padding-left: 110px">
                            <img class="layui-upload-img" style="max-width: 120px;max-height: 120px" id="avatar-view"
                                 th:src="${user.avatar}">
                            <p id="demoText"></p>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block" th:if="${not #strings.equals(user.id,currentId)}">
                        <input type="checkbox" name="roleIds" th:each="role:${roles}"
                               th:checked="${#strings.contains(checkRoleId, role.id)}" th:value="${role.id}"
                               th:title="${role.roleName}">
                    </div>
                    <div class="layui-input-block" th:if="${#strings.equals(user.id,currentId)}">
                        <input type="checkbox" name="roleIds" th:each="role:${user.roles}" th:title="${role.roleName}"
                               th:value="${role.id}" checked="checked" disabled>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="save"
                                th:text="${#strings.equals(user.id,null)?'保存':'修改'}"></button>
                        <a href="javascript:history.back()" type="button" class="layui-btn layui-btn-primary">返回</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/plugins/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['element', 'form', 'laydate', 'upload'], function () {
        $ = layui.jquery;
        var form = layui.form,
            upload = layui.upload;

        //上传文件
        var uploadInst = upload.render({
            elem: '#avatar',
            url: '/upload/file',
            size: 600, //限制文件大小，单位 KB,
            accept: 'images', //普通文件,
            exts: 'jpg|jpeg|png', //只允许上传图片,
            acceptMime: 'image/*',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                this.data = {
                    "[[${_csrf.parameterName}]]": "[[${_csrf.token}]]"
                },
                    obj.preview(function (index, file, result) {
                        $('#avatar-view').attr('src', result); //图片链接（base64）
                    });
            },
            done: function (res) {
                if (res.code == 0) {
                    $('#af').val(res.data);
                } else {
                    return layer.msg('上传失败');
                }
            }
        });

        //监听提交
        form.on('submit(save)', function (data) {
            var headers = {};
            headers['X-CSRF-TOKEN'] = "[[${_csrf.token}]]";
            $.ajax({
                url: data.form.action,
                type: data.form.method,
                headers: headers,
                data: data.field,
                dataType: 'json',
                success: function (data) {
                    if (data.code == 0) {
                        layer.msg(data.msg, {icon: 1, time: 1000}, function () {
                            location.href = "/admin/user/list";
                        });
                    } else {
                        layer.msg(data.msg, {time: 1000});
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>