<template>
    <div>
        <!-- 选择班级模态框 -->
        <a-modal :visible="visible" @ok="handOK" :confirmLoading="confirmLoading" @cancel="closeBtn" okText="确认"
            cancelText="取消" :maskClosable="false" :destroyOnClose="true" width="700px">
            <span slot="title">
                修改密码
            </span>
            <a-form :form="form" @submit="handOK" layout="horizontal">
                <a-form-item label="原始密码：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                    <a-input-password v-decorator="[
                         'currentPassword',
                         {rules: [{ required: true, message: '此项为必填!' },
                         { pattern:  /^[a-zA-Z0-9]{6,18}$/, message: '密码需由6-18位英文和数组组成!' },
                         ],
                         }
                         ]" />
                </a-form-item>
                <a-form-item label="新密码：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                    <a-input-password v-decorator="[
                         'newPassword',
                         {rules: [{ required: true, message: '此项为必填!' },
                         { pattern:  /^[a-zA-Z0-9]{6,18}$/, message: '密码需由6-18位英文和数组组成!' },
                         ],
                         }
                         ]" />
                </a-form-item>
                <a-form-item label="确认密码：" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                    <a-input-password v-decorator="[
                         'confirm_pwd',
                         {rules: [{ required: true, message: '此项为必填!' },
                         { pattern:  /^[a-zA-Z0-9]{6,18}$/, message: '密码需由6-18位英文和数组组成!' },
                         ],
                         }
                         ]" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script>
    import { UserChangePassword } from '@/api/api'
    export default {
        data() {
            return {
                visible: false,
                confirmLoading: false,
                form: this.$form.createForm(this),
            };
        },
        mounted() {

        },
        methods: {
            showModal() {
                this.visible = true;
            },
            closeBtn() {
                this.visible = false
            },
            handOK(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        if (values.currentPassword == values.newPassword) {
                            this.$message.error('原始密码和新密码不能相同')
                            return;
                        }
                        if (values.newPassword != values.confirm_pwd) {
                            this.$message.error('两次输入的新密码不相同')
                            return;
                        }
                       
                        this.confirmLoading = true;
                        UserChangePassword(values).then(res => {
                            this.confirmLoading = false;
                            this.$message.success('修改成功，请重新登陆')
                            this.visible = false
                            this.$router.push({ name: "login" });
                        }).catch(err => {
                            this.confirmLoading = false;
                        })
                    }
                })
            },
        },
        beforeDestroy() {

        }
    };
</script>
<style scoped>
    .file-row {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }
</style>