<template>
    <el-dialog :visible="dialogVisible" width="30%" :before-close="handleClose" lock-scroll>
        <el-form ref="pwdForm" :model="pwdForm" :label-width="labelWidth" :rules="pwdRules" class="form" size="small"
            v-loading="loading">
            <!-- <el-form-item label="旧密码" prop="oldPwd">
                <el-input v-model="pwdForm.oldPwd" type="password"></el-input>
            </el-form-item> -->
            <el-form-item label="新密码" prop="password">
                <el-input v-model="pwdForm.password" clearable type="text">
                    <el-button @click.native="handleClickReset" slot="append" icon="el-icon-refresh-left">重置为初始密码</el-button>
                </el-input>

            </el-form-item>
            <!-- <el-form-item label="确认密码" prop="checkPass" > 
                <el-input v-model="pwdForm.checkPass" type="password" show-password></el-input>
            </el-form-item> -->
            <!-- <el-form-item>
                <el-button type="primary" icon="el-icon-circle-check" @click.native="handleSubmitPwd">保存</el-button>
                <el-button type="primary" @click.native="handleCancelChangePwd">取消</el-button>
            </el-form-item> -->
        </el-form>
        <div class="buttons">
            <el-button type="primary" icon="el-icon-circle-check" @click.native="handleSubmitPwd" size="small">保存
            </el-button>
            <el-button @click.native="handleCancelChangePwd" size="mini">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { upadateUser } from "@/api/user";
export default {
    name: 'EditPassword',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        id: {
            type: String,
            default: null,
        },
    },
    watch: {
        visible: {
            handler: function (value) {
                this.dialogVisible = value;
            },
            deep: true,
            immediate: true,
        },
    },
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入新密码"));
            } else {
                var pattern =
                    /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$/;
                if (!pattern.test(value)) {
                    callback(
                        new Error(
                            "密码长度至少8位，至少含数字,大写字母,小写字母,特殊符其中三种"
                        )
                    );
                }
                // if (this.pwdForm.checkPass !== "") {
                //     this.$refs.pwdForm.validateField("checkPass");
                // }
                callback();
            }
        };

        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.pwdForm.newPwd) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            dialogVisible: false,
            labelWidth: "100px",
            pwdForm: {
                // oldPwd: "",
                password: "",
                // checkPass: "",
            },
            pwdRules: {
                // oldPwd: [
                //     { trigger: "blur", required: true, message: "请输入当前密码" },
                // ],
                password: [{ validator: validatePass, trigger: "blur", required: true }],
                // checkPass: [
                //     { validator: validatePass2, trigger: "blur", required: true },
                // ],
            },
            loading: false
        }
    },
    methods: {
        handleSubmitPwd() {
            this.$refs.pwdForm.validate(async (valid) => {
                if (valid) {
                    this.loading = true
                    // const { newPwd, oldPwd } = this.pwdForm;
                    const params = {
                        // newPwd,
                        // oldPwd,
                        password: this.pwdForm.password,
                        id: this.id
                    };
                    // console.log(params);
                    // return
                    let res = await upadateUser(params);

                    if (res.code == "0") {
                        this.$message.success("修改成功！");
                        this.$emit("handleClose");
                        this.$refs.pwdForm.resetFields()

                    }
                    this.loading = false
                }
                this.loading = false
            });
        },
        handleClickReset() {
            this.pwdForm.password = 'qwe@1234'
        },
        handleCancelChangePwd() {
            this.handleClose()
        },
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    // done();
                    this.$emit("handleClose");
                    this.$refs.pwdForm.resetFields()
                })
                .catch((_) => { });
        },
    }
}
</script>

<style lang="scss" scoped>
.title {
    display: flex;
    margin-bottom: 16px;

    .divider {
        width: 8px;
        border-left: 4px solid #409eff;
        margin-right: 8px;
    }

    .label {
        font-weight: bold;
    }
}

.dialog-content {
    padding: 0 32px;

    // display: flex;
    .basic-info {
        flex: 1;
        margin-right: 48px;
    }
}

.dialog-footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.form {
    padding-right: 60px;
}

.buttons {
    padding: 40px 60px 0;
    display: flex;
    justify-content: flex-end;
}
</style>