<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:type="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>个人资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/resources/css/public.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form layui-row" method="post">
    <div class="layui-col-md3 layui-col-xs12 user_right">
        <div class="layui-upload-list userFace">
            <input type="hidden" name="imgpath" id="imgpath">
            <img class="layui-upload-img layui-circle userFaceBtn userAvatar" id="userFace">
        </div>
        <button type="button" class="layui-btn layui-btn-primary userFaceBtn"><i class="layui-icon">&#xe67c;</i> 掐指一算，我要换一个头像了</button>
        <p>由于是纯静态页面，所以只能显示一张随机的图片</p>
    </div>
    <div class="layui-col-md6 layui-col-xs12">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="hidden" class="id" name="id">
                <input type="text" value="" id="name" th:value="${session.user.name}" disabled class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登陆名</label>
            <div class="layui-input-block">
                <input type="text" value="" id="loginname" th:value="${session.user.loginname}" disabled class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户备注</label>
            <div class="layui-input-block">
                <input type="text" value="" id="remark" disabled class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户地址</label>
            <div class="layui-input-block">
                <input type="text" value="" id="address" disabled class="layui-input layui-disabled">
            </div>
        </div>
        <!--<div class="layui-form-item" pane="">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block userSex">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="0" title="女">
            </div>
        </div>-->
        <!--<div class="layui-form-item">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-block">
                <input type="tel" value="" placeholder="请输入手机号码" lay-verify="phone" class="layui-input userPhone">
            </div>
        </div>-->
        <!--<div class="layui-form-item">
            <label class="layui-form-label">出生年月</label>
            <div class="layui-input-block">
                <input type="text" value="" placeholder="请输入出生年月" lay-verify="userBirthday" readonly class="layui-input userBirthday">
            </div>
        </div>-->
        <!--<div class="layui-form-item userAddress">
            <label class="layui-form-label">家庭住址</label>
            <div class="layui-input-inline">
                <select name="province" lay-filter="province" class="province">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="city" lay-filter="city" disabled>
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="area" lay-filter="area" disabled>
                    <option value="">请选择县/区</option>
                </select>
            </div>
        </div>-->
        <!--<div class="layui-form-item">
            <label class="layui-form-label">掌握技术</label>
            <div class="layui-input-block userHobby">
                <input type="checkbox" name="like[javascript]" title="Javascript">
                <input type="checkbox" name="like[C#]" title="C#">
                <input type="checkbox" name="like[php]" title="PHP">
                <input type="checkbox" name="like[html]" title="HTML(5)">
                <input type="checkbox" name="like[css]" title="CSS(3)">
                <input type="checkbox" name="like[.net]" title=".net">
                <input type="checkbox" name="like[ASP]" title="ASP">
                <input type="checkbox" name="like[Angular]" title="Angular">
                <input type="checkbox" name="like[VUE]" title="VUE">
                <input type="checkbox" name="like[XML]" title="XML">
            </div>
        </div>-->
        <!--<div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" value="" placeholder="请输入邮箱" lay-verify="email" class="layui-input userEmail">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">自我评价</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea myself"></textarea>
            </div>
        </div>-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="changeUser">立即提交</button>
                <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<!--<script type="text/javascript" src="/resources/page/user/userInfo.js"></script>-->
<!--<script type="text/javascript" src="/resources/js/cacheUserInfo.js"></script>-->

<script type="text/javascript">

    layui.use(['jquery', 'upload', 'form'], function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        var form = layui.form;

        // 获取当前用户的登录名
        var loginname = $("#loginname");
        $.get('/user/getNowUser', function (res) {
            // 设置表单中的值
            var name = $("#name");
            name.val(res.name); // 设置用户名
            var id = $(".id");
            id.val(res.id); // 设置用户ID
            var loginname = $("#loginname");
            loginname.val(res.loginname); // 设置登录名
            var remark = $("#remark");
            remark.val(res.remark); // 设置备注信息
            var address = $("#address");
            address.val(res.address); // 设置地址

            // 显示用户头像
            var imgpath = res.imgpath;
            $('#userFace').attr('src', '/file/showImageByPath?path=' + imgpath);
        });

        // 上传头像功能
        upload.render({
            elem: '.userFaceBtn', // 绑定元素
            url: '/file/uploadImage', // 上传接口
            acceptMime: 'image/*', // 允许上传的文件类型
            field: 'mf', // 文件字段名
            method: "post", // 请求方式
            done: function (res, index, upload) {
                var path = res.path; // 获取返回的图片路径
                $('#userFace').attr('src', '/file/showImageByPath?path=' + path); // 更新页面上的头像图片
                $('.userFace').css("background", "#fff"); // 修改背景颜色
                $("#imgpath").val(path); // 给隐藏域赋值，用于提交表单时携带图片路径
            }
        });

        // 提交个人资料表单
        form.on("submit(changeUser)", function (data) {
            var index = layer.msg('提交中，请稍候', { icon: 16, time: false, shade: 0.8 }); // 显示加载提示
            $.post("/user/updateUserInfo", data.field, function (res) {
                layer.msg(res.msg); // 显示服务器返回的消息
            });
            setTimeout(function () {
                layer.close(index); // 关闭加载提示
                layer.msg("提交成功！"); // 显示提交成功消息
            }, 2000);
            return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });



</script>

</body>
</html>