<template>
    <el-dialog class="client-data-dialog" title="创建转账还款单" width="40%" :visible.sync="visible" :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="140px" class="demo-ruleForm">
            <el-form-item label="还款银行账号" prop="bankAccount">
                <el-col :span="20"><el-input v-model="ruleForm.bankAccount" placeholder="请输入还款银行账号"></el-input></el-col>
            </el-form-item>
            <el-form-item label="还款银行账户名称" prop="bankOwner">
                <el-col :span="20"><el-input v-model="ruleForm.bankOwner" placeholder="请输入还款银行账户名称"></el-input></el-col>
            </el-form-item>
            <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-item label="还款凭证" prop="attach">
                <el-upload
                        list-type="picture-card"
                        :multiple="oss.multiple"
                        :action="oss.action"
                        :data="oss.data"
                        accept=".jpeg,.jpg,.png"
                        :before-upload="handleBeforeApplyUpload"
                        :on-success="handleLoanApplySuccess"
                        :on-remove="handleLoanApplyRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="backedTransfer('ruleForm')">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "TransferByhBackedDialog",
        props: {
            dialogVisible: {
                type: Boolean,
                required: true
            },
            orderNo: {
                type: String
            },
            periodNo: {
                type: Number
            },
            planNo: {
                type: Number
            },
        },

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

                ruleForm: {
                    orderNo: '',
                    periodNo: '',
                    creator: '',
                    attach: '',
                    bankAccount: '',
                    bankOwner: '',
                    backedAmt:'',
                    planNo:'',
                },
                rules: {
                    bankAccount: [{required: true, message: '请输入还款银行账号', trigger: 'blur'}],
                    bankOwner: [{required: true, message: '请输入还款银行账户名称', trigger: 'blur'}],
                    backedAmt: [{required: true, message: '请输入还款金额', trigger: 'blur'}],
                    attach: [{required: true, message: '请添加还款凭证', trigger: 'blur'}],
                },
                loginName:'',
                oss: {
                    action: '',
                    data: {},
                    multiple: false,
                },
            }
        },

        created() {
            this.ruleForm = {
                orderNo: this.orderNo,
                planNo: this.planNo,
                periodNo: this.periodNo,
            }
        },

        mounted() {
            this.loginName = localStorage.getItem("loginName");
        },

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

            handleBeforeApplyUpload(file) {
                var attachType = 'BYH_LOAN_BACK_APPLY'
                return this.$$get(`/oss/signature/` + attachType + "/" + file.name).then(res => {
                    if (res.data.code < 1) {
                        this.$message.error(res.data.msg);
                        return
                    }
                    const result = res.data.data;
                    const data = {};
                    const tempOss = {};
                    data.OSSAccessKeyId = result.accessId;
                    data.policy = result.policy;
                    data.Signature = result.signature;
                    data.key = result.dir;
                    tempOss.action = result.host;
                    tempOss.data = data;
                    this.oss = tempOss;
                    this.ruleForm.attach = result.dir
                });
            },

            handleLoanApplySuccess(res, file, fileList) {
                this.$notify({title: '成功', message: file.name + ",上传成功", type: 'success'});
            },

            handleLoanApplyRemove(res, file, fileList) {

            },

            //参数
            buildParam() {
                var return_hash = {
                    orderNo: this.ruleForm.orderNo ,
                    periodNo: this.ruleForm.periodNo,
                    planNo: this.ruleForm.planNo,
                    creator: this.loginName,
                    attach: this.ruleForm.attach,
                    bankAccount: this.ruleForm.bankAccount,
                    bankOwner: this.ruleForm.bankOwner,
                    backedAmt: this.ruleForm.backedAmt,
                };
                return return_hash;
            },

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

<style scoped>

</style>
