<!--
 * @Author: wen 1454560336@qq.com
 * @Date: 2024-01-15 16:58:52
 * @LastEditors: wenjie 1454560336@qq.com
 * @LastEditTime: 2024-07-24 20:03:53
 * @FilePath: \admin-manage\src\views\updatePassword\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div class="updatePassword app-container">
        <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-form">
            <el-form-item label="原始密码" prop="old">
                <el-input type="text" :maxlength="16" class="item-width-300" v-model="form.old" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新的密码" prop="pwd">
                <el-input type="text" :maxlength="16" class="item-width-300" v-model="form.pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="pwd1">
                <el-input type="text"  :maxlength="16" class="item-width-300" v-model="form.pwd1" autocomplete="off"></el-input>

            </el-form-item>
            <el-form-item>
                <el-button @click="resetForm('form')">取消</el-button>
                <el-button :loading="loading" type="primary" @click="submitForm('form')">确认</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {updateLoginPassword} from '@/api/auth'
import { removeToken } from '@/utils/auth'

    export default {
        data() {
            const validatePassword = (rule, value, callback) => {
                let reg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}/
                if (reg.test(value)) {
                    callback()
                }else if(value != this.form.pwd1){
                    callback(new Error('两次密码不一致'))
                }
                 else {
                    callback(new Error('密码长度应在8-16，并且需要包含字母、数字、符号'))
                }
            }
            const validatePassword1 = (rule, value, callback) => {
                let reg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}/
                if (reg.test(value)) {
                    callback()
                }else if(value != this.form.pwd){
                    callback(new Error('两次密码不一致'))
                }
                else {
                    callback(new Error('密码长度应在8-16，并且需要包含字母、数字、符号'))
                }
            }
            return {
                loading:false,
                form: {
                    old:'',
                    pwd:'',
                    pwd1:'',
                },
                rules: {
                    old:[
                        { required:true,message:'请填写旧密码', trigger: 'blur' }
                    ],
                    pwd: [
                        { validator: validatePassword, trigger: 'blur' }
                    ],
                    pwd1: [
                        { validator: validatePassword1, trigger: 'blur' }
                    ],
                    
                },
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((v) => {
                    if(v){
                        this.loading = true
                        updateLoginPassword(this.form).then(res=>{
                            this.loading = false
                            if(res.state == 'Success'){
                                this.$notify({
                                    title: '成功',
                                    message: '操作成功',
                                    type: 'success'
                                });
                                this.resetForm('form')
                                 removeToken() // must remove  token  first
                                window.localStorage.clear()
                                this.$router.go(0)
                            }
                        })
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
  
    }
</script>

<style lang="scss" scoped>
.updatePassword{

}
</style>