<template>
    <el-dialog class="client-data-dialog" title="银行卡新增" :visible.sync="visible" :before-close="handleClose">

        <el-form :model="ruleForm">
            <table style="width: 100%">
                <tr>
                    <th>银行卡类型</th>
                    <td>
                        <el-select v-model="ruleForm.relationType" placeholder="银行卡类型">
                            <el-option v-for="item in cardTypes" :key="item.value" :label="item.name"
                                       :value="item.value"></el-option>
                        </el-select>
                    </td>
                    <th>业务组：</th>
                    <td>
                        {{ruleForm.relationNo}}
                        <!--<v-model="ruleForm.relationNo"></>-->
                    </td>
                </tr>
                <tr>
                    <th>账户名称</th>
                    <td>
                        <el-input v-model="ruleForm.ownerName"></el-input>
                    </td>
                    <th>银行卡号</th>
                    <td>
                        <el-input v-model="ruleForm.bankAccount"></el-input>
                    </td>
                </tr>

                <tr>
                    <th>预留手机号码</th>
                    <td>
                        <el-input v-model="ruleForm.ownerMobile"></el-input>
                    </td>
                    <th>银行</th>
                    <td>
                        <el-input v-model="ruleForm.openBankName"></el-input>
                    </td>
                </tr>

                <tr>
                    <th>支行信息</th>
                    <td colspan="3">
                        <el-input v-model="ruleForm.openSubBankName"></el-input>
                    </td>
                </tr>
            </table>
        </el-form>

        <div slot="footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submitClick" :loading="ui.submitLoading">编 辑</el-button>
        </div>
    </el-dialog>
</template>

<script type="text/ecmascript-6">


    export default {
        name: 'EditLendBankCardDialog',
        props: {
            dialogVisible: {
                type: Boolean,
                required: true
            },
            relationType: {
                type: String
            },
            relationNo: {
                type: String
            },
            ownerName: {
                type: String
            },
            bankAccount: {
                type: String
            },
            ownerMobile: {
                type: String
            },
            openBankName: {
                type: String
            },
            openSubBankName: {
                type: String
            },
        },
        data() {
            return {
                ui: {
                    submitLoading: false
                },
                visible: this.$props.dialogVisible,
                cardTypes: [
                    {name: '出借卡', value: 'LEND'},
                ],
                ruleForm: {
                    relationType: '',
                    relationNo: '',
                    ownerName: '',
                    bankAccount: '',
                    ownerMobile: '',
                    openBankName: '',
                    openSubBankName: '',
                },
            }
        },

        created() {
            this.ruleForm = {
                relationType: this.relationType,
                relationNo: this.relationNo,
                ownerName: this.ownerName,
                bankAccount: this.bankAccount,
                ownerMobile: this.ownerMobile,
                openBankName: this.openBankName,
                openSubBankName: this.openSubBankName,
            }
        },

        methods: {

            /** 提交点击 */
            async submitClick() {
                this.$$post('/card/editCard', {
                    relationType: this.ruleForm.relationType,
                    relationNo: this.ruleForm.relationNo,
                    ownerName: this.ruleForm.ownerName,
                    bankAccount: this.ruleForm.bankAccount,
                    ownerMobile: this.ruleForm.ownerMobile,
                    openBankName: this.ruleForm.openBankName,
                    openSubBankName: this.ruleForm.openSubBankName,
                    bindStatus: 'ENABLED'
                })
                    .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 => {
                        this.showErrorAlert(err)
                    })
            },

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