<title>设置我的资料</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>设置</cite></a>
        <a><cite>我的资料</cite></a>
    </div>
</div>
<style>
    /* 用户信息 */
    .user-info-head { width: 110px; height: 110px; line-height: 110px; position: relative; display: inline-block; border: 2px solid #eee; border-radius: 50%; overflow: hidden; cursor: pointer; margin: 0 auto; }
        .user-info-head:hover:after { content: '\e681'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: #fff; background-color: rgba(0, 0, 0, 0.3); font-size: 28px; padding-top: 2px; font-style: normal; font-family: layui-icon; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        .user-info-head img { width: 110px; height: 110px; }
    .user-info-list-item { position: relative; padding-bottom: 8px; }
        .user-info-list-item > .layui-icon { position: absolute; }
        .user-info-list-item > p { padding-left: 30px; }
    .layui-line-dash { border-bottom: 1px dashed #ccc; margin: 15px 0; }
    /* 基本信息 */
    #userInfoForm .layui-form-item { margin-bottom: 25px; }
    /* 账号绑定 */
    .user-bd-list-item { padding: 14px 60px 14px 10px; border-bottom: 1px solid #e8e8e8; position: relative; }
        .user-bd-list-item .user-bd-list-lable { color: #333; margin-bottom: 4px; }
        .user-bd-list-item .user-bd-list-oper { position: absolute; top: 50%; right: 10px; margin-top: -8px; cursor: pointer; }
        .user-bd-list-item .user-bd-list-img { width: 48px; height: 48px; line-height: 48px; position: absolute; top: 50%; left: 10px; margin-top: -24px; }
            .user-bd-list-item .user-bd-list-img + .user-bd-list-content { margin-left: 68px; }
</style>
<script type="text/html" template lay-type="Post" lay-url="{{ layui.setter.apiUrl }}Api/Tools/GetEditUserInfo" lay-done="layui.data.done(d);">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <!-- 左 -->
            <div class="layui-col-sm12 layui-col-md3">
                <div class="layui-card" style="min-height: 528px;">
                    <div class="layui-card-body" style="padding: 25px;">
                        <div class="text-center layui-text">
                            <div class="user-info-head" id="userInfoHead">
                                {{# if(d.data.avatar){ }}
                                <img src="{{d.data.avatar}}" alt="" />
                                {{# }else{ }}
                                <img src="images/empty.png" />
                                {{# } }}
                            </div>
                            <h2 style="padding-top: 20px;">{{d.data.nickName||''}}</h2>
                            <p style="padding-top: 8px;">{{d.data.introduction||'这家伙很懒，什么都不说~'}}</p>
                        </div>
                        <div class="layui-text" style="padding-top: 30px;">
                            <div class="user-info-list-item">
                                <i class="layui-icon layui-icon-username"></i>
                                <p>登录账号: {{d.data.userName||''}}</p>
                            </div>
                            <div class="user-info-list-item">
                                <i class="layui-icon layui-icon-release"></i>
                                <p>
                                    用户角色:
                                    {{# layui.each(d.data.roles, function(index, item){ }}
                                    <span class="layui-badge layui-badge-gray">{{ item.roleName }}</span>
                                    {{# }); }}
                                </p>
                            </div>
                            <div class="user-info-list-item">
                                <i class="layui-icon layui-icon-flag"></i>
                                <p>组织机构: {{d.data.organizationName||''}}</p>
                            </div>
                        </div>
                        <div class="layui-line-dash"></div>
                        <h3>标签</h3>
                        <div class="layui-badge-list" style="padding-top: 6px;">
                            <span class="layui-badge layui-bg-gray">很有想法的</span>
                            <span class="layui-badge layui-bg-gray">专注设计</span>
                            <span class="layui-badge layui-bg-gray">辣~</span>
                            <span class="layui-badge layui-bg-gray">大长腿</span>
                            <span class="layui-badge layui-bg-gray">川妹子</span>
                            <span class="layui-badge layui-bg-gray">海纳百川</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右 -->
            <div class="layui-col-sm12 layui-col-md9">
                <div class="layui-card">
                    <!-- 选项卡开始 -->
                    <div class="layui-tab layui-tab-brief" lay-filter="userInfoTab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">个人信息</li>
                        </ul>
                        <div class="layui-tab-content">
                            <!-- tab1 -->
                            <div class="layui-tab-item layui-show">
                                <div class="layui-form" id="LAY-app-CoreCmsSms-editLoginUserInfoForm" lay-filter="LAY-app-CoreCmsSms-editLoginUserInfoForm" style="max-width: 400px;padding: 25px 10px 0 0;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label layui-form-required">用户名:</label>
                                        <div class="layui-input-block">
                                            <input name="nickName" value="{{d.data.nickName||''}}" class="layui-input"
                                                   lay-verType="tips" lay-verify="required" required />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label layui-form-required">性别:</label>
                                        <div class="layui-input-block">
                                            <select name="sex" lay-verType="tips" lay-verify="required">
                                                <option value="1" {{d.data.sex==1?'selected="selected"':''}}>男</option>
                                                <option value="2" {{d.data.sex==2?'selected="selected"':''}}>女</option>
                                                <option value="3" {{d.data.sex==3?'selected="selected"':''}}>未知</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">手机号:</label>
                                        <div class="layui-input-block">
                                            <input name="phone" placeholder="请输入手机号" class="layui-input"
                                                   value="{{d.data.phone||''}}" lay-verType="tips" lay-verify="phoneX" />
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label" for="avatar">头像：</label>
                                            <div class="layui-input-inline">
                                                <input name="avatar" type="hidden" id="avatar" value="{{d.data.avatar}}" size="15" autocomplete="off" class="layui-input" lay-reqText="请输入【缩略图】" />
                                            </div>
                                            <div class="layui-input-inline">
                                                <div class="layui-upload">
                                                    <button type="button" class="layui-btn" id="upBtn">上传图片</button>
                                                    <div class="layui-upload-list">
                                                        {{# if(d.data.avatar){ }}
                                                        <img class="layui-upload-img" src="{{d.data.avatar}}" id="viewImgBox">
                                                        {{# }else{ }}
                                                        <img class="layui-upload-img" src="images/empty.png" id="viewImgBox">
                                                        {{# } }}
                                                        <p id="viewTextBox"></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">真实名称:</label>
                                        <div class="layui-input-block">
                                            <input name="trueName" value="{{d.data.trueName||''}}" class="layui-input" placeholder="请输入真实名称" lay-verType="tips" />
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">身份证号码:</label>
                                        <div class="layui-input-block">
                                            <input name="idCard" value="{{d.data.idCard||''}}" class="layui-input" placeholder="请输入身份证号码" lay-verType="tips" />
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">邮箱:</label>
                                        <div class="layui-input-block">
                                            <input name="email" value="{{d.data.email||''}}" class="layui-input" placeholder="请输入邮箱" lay-verType="tips" lay-verify="emailX" />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">个人简介:</label>
                                        <div class="layui-input-block">
                                            <textarea name="introduction" placeholder="请输入个人简介" class="layui-textarea">{{d.data.introduction||''}}</textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="LAY-app-CoreCmsSms-editLoginUserInfo-submit">保存修改</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- //选项卡结束 -->
                </div>
            </div>
        </div>
    </div>
</script>
<script>
    layui.data.done = function (d) {
        console.log(d);
        layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper'],
            function () {
                var $ = layui.$
                    , form = layui.form
                    , admin = layui.admin
                    , laydate = layui.laydate
                    , upload = layui.upload
                    , coreHelper = layui.coreHelper;

                //普通图片上传
                var uploadInst = upload.render({
                    elem: '#upBtn'
                    , url: layui.setter.apiUrl + 'Api/Tools/UploadFiles'
                    , before: function (obj) {
                        obj.preview(function (index, file, result) {
                            $('#viewImgBox').attr('src', result);
                        });
                    }
                    , done: function (res) {
                        if (res.code > 0) { return layer.msg('上传失败'); }
                        layer.msg('上传成功');
                        $("#avatar").val(res.data.fileUrl);
                    }
                    , error: function () {
                        var viewTextBox = $('#viewTextBox');
                        viewTextBox.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                        viewTextBox.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                    }
                });

                //重载form
                form.render(null, 'LAY-app-CoreCmsSms-editLoginUserInfoForm');
                //监听提交
                form.on('submit(LAY-app-CoreCmsSms-editLoginUserInfo-submit)',
                    function (data) {
                        var field = data.field; //获取提交的字段
                        //提交 Ajax 成功后，关闭当前弹层并重载表格
                        coreHelper.Post("Api/Tools/EditLoginUserInfo", field, function (e) {
                            console.log(e)
                            if (e.code === 0) {
                                layer.msg(e.msg, { time: 1000 },
                                    function () {
                                        admin.events.refresh();
                                    });
                            } else {
                                layer.msg(e.msg);
                            }
                        });
                    });

            })
    };
</script>