{% extends 'app_doc/user/user_base.html' %}
{% load static %}
{% load i18n %}
{% block title %}{% trans "个人设置" %}{% endblock %}
{% block content %}
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-form">
            <div class="layui-form-item">
            <label class="layui-form-label">{% trans "用户名" %}</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">{% trans "不可修改" %}</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{% trans "昵称" %}</label>
                <div class="layui-input-inline">
                <input type="text" name="firstname" id="first_name" required  lay-verify="required" placeholder="{% trans '请输入昵称' %}" autocomplete="off" class="layui-input" value="{{user.first_name}}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{% trans "电子邮箱" %}</label>
                <div class="layui-input-inline">
                <input type="email" name="email" id="email" required  lay-verify="required" placeholder="{% trans '请输入电子邮箱地址' %}" autocomplete="off" class="layui-input" value="{{user.email}}">
                </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">{% trans "新密码" %}</label>
            <div class="layui-form-mid layui-word-aux"><button class="layui-btn layui-btn-primary layui-btn-xs" onclick="changePwd();">{% trans "点击修改密码" %}</button></div>
            </div>

            <div class="layui-form-item">
            <label class="layui-form-label">{% trans "编辑器" %}</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();">{% trans "更新个人资料" %}</button>
            </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block custom_script %}
<script>
    layui.use(['table', 'form', 'jquery', 'dtree'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
        //修改用户密码
        changePwd = function(){
            layer.open({
                type:1,
                title:'{% trans "修改密码" %}',
                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:['{% trans "确认修改" %}','{% trans "取消" %}'],
                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("{% trans '修改成功' %}")
                        }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("{% trans '修改成功' %}",function(){
                        window.location.reload();
                    })
                }else{
                    //修改失败，提示
                    //console.log(r)
                    layer.msg(r.data)
                }
            })
        }

    });
</script>
{% endblock %}