{% extends 'app_doc/manage_base.html' %}
{% load static %}
{% block title %}个人设置{% endblock %}
{% block content %}
    <div class="layui-card-header" style="margin-bottom: 10px;">
      <div class="layui-row">
          <span style="font-size:18px;">我的个人资料
          </span>
      </div>
  </div>
  <div class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
        <input type="text" name="username" disabled autocomplete="off" class="layui-input" value="{{user.username}}" >
      </div>
      <div class="layui-form-mid layui-word-aux">不可修改</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
          <input type="text" name="firstname" id="first_name" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input" value="{{user.first_name}}">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">电子邮箱</label>
        <div class="layui-input-inline">
          <input type="email" name="email" id="email" required  lay-verify="required" placeholder="请输入电子邮箱地址" autocomplete="off" class="layui-input" value="{{user.email}}">
        </div>
      </div>
    <div class="layui-form-item">
      <label class="layui-form-label">新密码</label>
      <div class="layui-form-mid layui-word-aux"><button class="layui-btn layui-btn-primary layui-btn-xs" onclick="changePwd();">点击修改密码</button></div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">编辑器</label>
      <div class="layui-input-block">
        {% if user_opt.editor_mode == 2 %}
        <input type="radio" name="editor_mode" value="1" title="EditorMD" >
        <input type="radio" name="editor_mode" value="2" title="Vditor" checked>
        {% else %}
        <input type="radio" name="editor_mode" value="1" title="EditorMD" checked>
        <input type="radio" name="editor_mode" value="2" title="Vditor" >
        {% endif %}
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn layui-btn-normal" onclick="updateUser();">更新个人资料</button>
      </div>
    </div>
</div>
{% endblock %}
{% block custom_script %}
<script>
    //修改用户密码
    changePwd = function(){
        layer.open({
            type:1,
            title:'修改密码',
            area:'300px;',
            id:'changePwd',
            content:'<div style="padding:10px 0 0 20px;">修改用户密码：</div><div style="padding: 20px;"><input class="layui-input" type="password" id="newPwd1" style="margin-bottom:10px;" placeholder="输入新密码" required  lay-verify="required"><input class="layui-input" type="password" id="newPwd2" placeholder="再次确认新密码" required  lay-verify="required"></div>',
            btn:['确认修改','取消'],
            yes:function (index,layero) {
                layer.load(1);
                data = {
                    'password':$("#newPwd1").val(),
                    'password2':$("#newPwd2").val(),
                }
                $.post("{% url 'modify_pwd' %}",data,function(r){
                    layer.closeAll("loading");
                    if(r.status){
                        //修改成功
                        // window.location.reload();
                        layer.close(index)
                        layer.msg("修改成功")
                    }else{
                        //修改失败，提示
                        //console.log(r)
                        layer.msg(r.data)
                    }
                })
            },
        })
    };
    // 更新用户选项
    updateUser = function(){
        layer.load(1)
        data = {
            'first_name':$("#first_name").val(),
            'email':$("#email").val(),
            'editor_mode':$(':radio[name="editor_mode"]:checked').val()
        }
        $.post("{% url 'manage_self' %}",data,function(r){
            layer.closeAll("loading");
            if(r.status){
                //修改成功
                layer.msg("修改成功",function(){
                    window.location.reload();
                })
            }else{
                //修改失败，提示
                //console.log(r)
                layer.msg(r.data)
            }
        })
    }
</script>
{% endblock %}