<script src="/static/django_sohoui/js/vue.js"></script>
<script src="/static/django_sohoui/js/index.js"></script>
<script src="/static/django_sohoui/js/jquery.min.js"></script>
<script src="/static/django_sohoui/js/axios.min.js"></script>
<link rel="stylesheet" href="/static/django_sohoui/css/index.css">
<link rel="stylesheet" href="/static/admin/css/base.css">
<link rel="stylesheet" href="/static/ui_template/css/all.min.css">
{% load i18n static %}
{% load admin_urls %}
<style>
    .goback{
        cursor: pointer;
        text-decoration: none;
        color: #3e9dfb !important;
    }
    .goback:hover{
        text-decoration: none !important;
    }
</style>
{% block content %}
<div id="change_password">
    <el-card>
        <el-page-header @back="goBack" content="修改密码" class="goBack">
        </el-page-header>
        <el-divider></el-divider>
        <div>
            <p>{% blocktranslate with username=original %}Enter a new password for the user <strong>{{ username }}</strong>.{% endblocktranslate %}</p>
            <el-form :model="form" :label-position="labelPosition" method="post" ref="password_form" id="myForm">
                {% csrf_token %}
                <input type="hidden" name="password1" v-model="form.password1">
                <input type="hidden" name="password2" v-model="form.password2">
                <el-row :gutter="20" style="margin-bottom: 20px;">
                    <el-col :xl="3" :lg="6" :md="6" :xs="12" class="custom-column">
                        {{ form.password1.errors }}
                        <el-form-item label="新密码">
                            <el-input v-model="form.password1" type="password"></el-input>
                        </el-form-item>
                        {% if form.password1.help_text %}
                        <div class="help"{% if form.password1.id_for_label %} id="{{ form.password1.id_for_label }}_helptext">{% endif %}{{ form.password1.help_text|safe }}</div>
                        {% endif %}
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-bottom: 20px;">  
                    <el-col :xl="3" :lg="6" :md="6" :xs="12" class="custom-column">
                        {{ form.password2.errors }}
                        <el-form-item label="确认密码">
                            <el-input v-model="form.password2" type="password"></el-input>
                        </el-form-item>
                        {% if form.password2.help_text %}
                        <div class="help"{% if form.password2.id_for_label %} id="{{ form.password2.id_for_label }}_helptext"{% endif %}>{{ form.password2.help_text|safe }}</div>
                        {% endif %}
                    </el-col>
                </el-row>
            </el-form>
            <el-button type="primary" @click="changePassword">修改密码</el-button>
        </div>
    </el-card>
</div>
<script>
    new Vue({
        el: '#change_password',
        data: {
            labelPosition: 'left',
            form: {
                password1: '',
                password2: '',
                csrfmiddlewaretoken: '{{ csrf_token }}'
            }
        },
        methods: {
            changePassword() {
                $('#myForm').submit();
                // 使用 Vue 的 $refs 访问表单元素
                // if (this.$refs.password_form) {
                //     // 获取原生表单元素
                //     const formElement = this.$refs.password_form.$el;
                //     // 设置表单数据
                //     const formData = new FormData();
                //     formData.append('password1', this.form.password1);
                //     formData.append('password2', this.form.password2);
                //     formData.append('csrfmiddlewaretoken', this.form.csrfmiddlewaretoken);
                    
                //     // 使用 axios 提交表单
                //     axios.post(window.location.href, formData)
                //         .then(response => {
                //             // 处理成功响应
                //             console.log(response)
                //             window.location.reload()
                //             // this.$message.success('密码修改成功');
                //             // 可以在这里添加重定向或其他操作
                //         })
                //         .catch(error => {
                //             // 处理错误
                //             this.$message.error('密码修改失败：' + (error.response?.data?.message || '未知错误'));
                //         });
                // } else {
                //     this.$message.error('表单元素未找到');
                // }
            },
            goBack() {
                window.history.back();
            }
        }
    })
</script>
<style>
    #id_password1_helptext li{
        list-style: none !important; 
    }
    #id_password1_helptext ul{
        padding: 0 !important;
    }
</style>
{% endblock %}
