<form id="user-form" lay-filter="user-form" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input name="username" placeholder="请输入账号" type="text" class="layui-input layui-disabled" maxlength="20"
                   lay-verify="required" disabled="disabled" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input name="nickname" placeholder="请输入用户名" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input name="mobile" placeholder="请输入手机号" type="text" class="layui-input" lay-verify="required|mobile"
                   required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="0" title="ç”·" checked/>
            <input type="radio" name="sex" value="1" title="女"/>
        </div>
    </div>

    <div class="layui-upload">
        <label class="layui-form-label">头像:</label>
        <div class="layui-upload layui-input-block">
            <input type="hidden" name="headImgUrl" required lay-verify="required" />
            <button type="button" class="layui-btn layui-btn-primary" id="fileBtn"><i class="layui-icon">&#xe67c;</i>选择文件</button>
        </div>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
        </blockquote>
    </div>

    <div class="layui-form-item model-form-footer">
        <button class="layui-btn" lay-filter="user-form-submit" lay-submit>保存</button>
    </div>
</form>

<script>
    layui.use(['layer', 'admin', 'form', 'formSelects','index','config','upload'], function () {
        var layer = layui.layer;
        var admin = layui.admin;
        var form = layui.form;
        var config = layui.config;
        var upload = layui.upload;

        form.render('radio');

        admin.req('api-user/users/current', {}, function (data) {
            // 回显user数据
            if (data && data.code === 0) {
                let user = data.data;
                user.sex = user.sex.toString();
                form.val('user-form', user);
                $('#user-form').attr('method', 'PUT');
            }
        }, 'GET');

        // 表单提交事件
        form.on('submit(user-form-submit)', function (data) {
            layer.load(2);
            admin.req('api-user/users/saveOrUpdate', JSON.stringify(data.field), function (data) {
                if (data.code == 0) {
                    layer.closeAll('loading');
                    $(".layui-nav-img").attr("src",$("[name=headImgUrl]").val());
                    layer.msg("操作成功", {icon: 1, time: 500});

                    form.val('user-form',data.data);
                } else {
                    layer.msg(data.msg, {icon: 2, time: 500});
                }
            }, 'POST');
            return false;
        });

        //文件上传
        upload.render({
            elem: '#fileBtn' ,
            url:  config.base_server + 'api-file/files-anon',
            accept: 'file' ,
            auto: true ,
            headers: {"Authorization" : "Bearer " + config.getToken().access_token},
            before: function(obj){
                layer.load(); //上传loading
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $(".layui-upload-img").remove();
                    $('#demo2').append('<img src="' + result + '" width="50px" height="50px" alt="' + file.name + '" class="layui-upload-img">')
                });
            },
            done: function(data){
                layer.closeAll('loading');
                console.log(data);
                $("[name=headImgUrl]").val(data.url);
            },
            error: function (data) {
                layer.closeAll('loading');
            }
        });

    });
</script>