<template>
  <!-- eslint-disable max-len -->
  <div>
    <br />
    <div class="col-md-12" style="text-align:centre">
      <div class="myWell">
        <h4>Banking Details</h4>
      </div>
      <div class="form-group row"></div>
      <div class="row" style="text-align:left">
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Bank *</label>
          <prop-field
            :display="bank.bank"
            :editType="'text'"
            :propertyName="'bankID'"
            :mayEdit="true"
            @UpdateValue="UpdateValue"
          />
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Account Number *</label>
          <prop-field
            :display="bank.accNumber"
            :editType="'text'"
            :propertyName="'accountNumber'"
            :mayEdit="true"
            @UpdateValue="UpdateValue"
          />
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Account Holder *</label>
          <prop-field
            :display="bank.accHolder"
            :editType="'text'"
            :propertyName="'accountHolder'"
            :mayEdit="true"
            @UpdateValue="UpdateValue"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import propField from '../property/propertyFieldEditor.vue';

export default {
  name: 'BankAccount',
  components: {
    propField,
  },
  props: {
    bank: {
      bank: undefined,
      accNumber: undefined,
      accHolder: undefined,
    },
  },
  methods: {
    UpdateValue(item) {
      if (item.fieldName) {
        if (item.fieldName === 'bank') {
          this.bank.bank = item.value;
        }
        if (item.fieldName === 'accNumber') {
          this.bank.accNumber = item.value;
        }
        if (item.fieldName === 'accHolder') {
          this.bank.accHolder = item.value;
        }
      }
    },
  },
};
</script>

<style>
.goDown {
  margin-top: 150px;
}
</style>
