<template>
    <div class="updatePwd">
        <el-dialog :append-to-body="true" width="30%" title="修改密码" :visible.sync="updatePwdData.dialogVisible">
            <el-form :rules="rules" label-width="80px" ref="ruleForm" :model="formData">
                <el-form-item label="旧密码" prop="password">
                    <el-input v-model="formData.password"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="formData.newPassword"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="updatePwd">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: {
        updatePwdData: {
            type: Object,
            default: {}
        }
    },
    created(){      
        this.formData.id = parseInt(localStorage.getItem("id"))
    },
    data() {
        return {
            formData: {
                id: null,
                password: "",
                newPassword: ""
            },
            rules: {
                password: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
                newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }]
            }
        }
    },
    methods: {
        cancel() {
            this.updatePwdData.dialogVisible = false
            this.formData = {
                id: null,
                password: "",
                newPassword: ""
            }
        },
        updatePwd(){
            this.$refs.ruleForm.validate(valid => {
                if(valid) {
                    this.$emit("updatePwdBtn",this.formData)
                }
            })
        }
    }
}
</script>