<template>
    <el-form ref="form" :model="user" :rules="rules" label-width="80px">
        <el-form-item label="旧密码" prop="oldPassword">
            <el-input
                v-model="user.oldPassword"
                placeholder="请输入旧密码"
                type="password"
                show-password
            />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
            <el-input
                v-model="user.newPassword"
                placeholder="请输入新密码"
                type="password"
                show-password
            />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
                v-model="user.confirmPassword"
                placeholder="请确认新密码"
                type="password"
                show-password
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="mini" @click="submit"
                >保存</el-button
            >
            <el-button type="danger" size="mini" @click="close">关闭</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { updateUserPwd } from '@/api/system/user'
import { validPassword } from '@/utils/validate'
import { encrypt } from '@/utils/jsencrypt.js'

export default {
    data() {
        const passwordRegex = (rule, value, callback) => {
            if (
                value.length < 8 ||
                value.length > 16 ||
                !validPassword(value)
            ) {
                callback(
                    new Error(
                        '请设置8到16位，由字母、数字、特殊字符3种组合，且数字不可连续的密码',
                    ),
                )
                return false
            } else if (this.user.oldPassword === value) {
                callback(new Error('新密码不能与旧密码相同'))
            } else {
                callback()
            }
        }
        const equalToPassword = (rule, value, callback) => {
            if (this.user.newPassword !== value) {
                callback(new Error('两次输入的密码不一致'))
            } else {
                callback()
            }
        }
        return {
            user: {
                oldPassword: undefined,
                newPassword: undefined,
                confirmPassword: undefined,
            },
            // 表单校验
            rules: {
                oldPassword: [
                    {
                        required: true,
                        message: '旧密码不能为空',
                        trigger: 'blur',
                    },
                ],
                newPassword: [
                    {
                        required: true,
                        message: '新密码不能为空',
                        trigger: 'blur',
                    },
                    {
                        required: true,
                        validator: passwordRegex,
                        trigger: 'blur',
                    },
                ],
                confirmPassword: [
                    {
                        required: true,
                        message: '确认密码不能为空',
                        trigger: 'blur',
                    },
                    {
                        required: true,
                        validator: equalToPassword,
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        submit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    const oldPassword = encrypt(this.user.oldPassword)
                    const newPassword = encrypt(this.user.newPassword)
                    updateUserPwd(oldPassword, newPassword).then((response) => {
                        this.$modal.msgSuccess('修改成功')
                    })
                }
            })
        },
        close() {
            this.$tab.closePage()
        },
    },
}
</script>
