<template>
    <el-dialog class="client-data-dialog" title="创建还款单" width="30%" :visible.sync="visible" :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="80px" class="demo-ruleForm">
            <el-form-item label="还款金额" prop="backedAmt">
                <el-col :span="20"><el-input v-model="ruleForm.backedAmt" placeholder="请输入还款金额"></el-input></el-col>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "CollectBackedDialog",
        props: {
            dialogVisible: {
                type: Boolean,
                required: true
            },
            creator: {
                type: String
            },
            loanNo: {
                type: String
            },
            backedAmt: {
                type: Number
            },
        },

        data() {
            /*验证还款金额*/
            var validatebackedAmt = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('还款金额'));
                }
                setTimeout(() => {
                    const reg2=/^\d+\.?\d{0,2}$/;
                    if (!reg2.test(value)) {
                        callback(new Error('还款金额只支持数字'));
                    } else {
                        callback();
                    }
                }, 1000);
            };

            return {
                ui: {
                    submitLoading: false
                },
                visible: this.$props.dialogVisible,

                ruleForm: {
                    backedAmt: '',
                    loanNo: '',
                    creator: '',
                },
                rules: {
                    backedAmt: [
                        { required: true,validator: validatebackedAmt, trigger: 'blur' }
                    ]
                },
            }
        },

        created() {
            this.ruleForm = {
                backedAmt: this.backedAmt,
                loanNo: this.loanNo,
                creator: this.creator,
            }
        },

        methods: {
            /** 提交点击 */
            submitForm() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (!valid) {
                        return false
                    }
                        this.$$post('/repayRemind/backedApply', {backedAmt: this.ruleForm.backedAmt, loanNo: this.ruleForm.loanNo, creator:this.ruleForm.creator,
                        }).then(res => {
                            if (res.data.code != 1) {
                                this.$message.error(res.data.msg);
                                return
                            }
                            this.handleClose();
                            this.$message({message: '操作成功', type: 'success'});
                            window.location.reload();
                        })
                         .catch(err => {
                             alert("error!")
                         })
                });
            },

            /** 关闭处理 */
            handleClose() {
                this.visible = false;
                setTimeout(() => {
                    this.$emit('update:dialogVisible', false)
                }, 300);
            },
        }
    }
</script>

<style scoped>

</style>