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

    <el-form :model="bankCardModel">
      <table style="width: 100%">
        <tr>
          <th>银行卡类型</th>
          <td>
            <el-select v-model="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>
            <el-input v-model="relationNo"></el-input>
          </td>
        </tr>
        <tr>
          <th>账户名称</th>
          <td>
            <el-input v-model="ownerName"></el-input>
          </td>
          <th>银行卡号</th>
          <td>
            <el-input v-model="bankAccount"></el-input>
          </td>
        </tr>

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

        <tr>
          <th>支行信息</th>
          <td colspan="3">
            <el-input v-model="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: 'AddLendBankCardDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
  },
  data() {
    return {
      bankCardModel: {},
      relationType: '',
      relationNo: '',
      ownerName: '',
      bankAccount: '',
      ownerMobile: '',
      openBankName: '',
      openSubBankName: '',
      ui: {
        submitLoading: false
      },
      visible: this.$props.dialogVisible,
      cardTypes: [
        {name: '出借卡', value: 'LEND'},
      ],
    }
  },
  methods: {

    /** 提交点击 */
    async submitClick() {
      this.$$post('/card/addCard', {
        relationType: this.relationType,
        relationNo: this.relationNo,
        ownerName: this.ownerName,
        bankAccount: this.bankAccount,
        ownerMobile: this.ownerMobile,
        openBankName: this.openBankName,
        openSubBankName: this.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>
