<template>
  <b-container fluid>
    <b-row>
      <b-col sm="5">
        <label class="required">
          {{ $t('EWallet.FundWithdrawal.BankName') }}
        </label>
      </b-col>
      <b-col sm="7">
        <select
          v-model="bankInfo"
          data-vv-scope="bankScope"
          v-validate="'required'"
          name="Bank Name"
          @click="resetError"
          @change="updateModel"
          :class="{ 'border-danger': errors.has('bankScope.Bank Name') }"
        >
          <option selected data-default disabled>
            {{ $t('EWallet.GlobalWords.PleaseSelect') }}
          </option>
          <option
            @click="resetError"
            v-for="(bank, bankIdx) in getEwalletBankInfo"
            :value="{ bId: bank.bankId, bankName: bank.bankName, swiftCode: bank.bankSwiftCode }"
            :key="bankIdx"
          >
            {{ bank.bankName }} {{ bank.bankId }}
          </option>
        </select>
        <span v-show="errors.has('bankScope.Bank Name')" class="help text-danger">
          {{ $t('EWallet.GlobalWords.FieldRequired') }}
        </span>
      </b-col>
    </b-row>
    <b-row>
      <b-col sm="5">
        <label class="required">
          {{ $t('EWallet.FundWithdrawal.Bank.SwiftCode') }}
        </label>
      </b-col>
      <b-col sm="5">
        <b-form-input
          size="sm"
          type="text"
          name="Swift Code"
          disabled
          :value="bankInfo.swiftCode"
          :class="{ 'border-danger': errors.has('bankScope.Bank Name') }"
        />
        <span v-show="errors.has('bankScope.Bank Name')" class="help text-danger">
          {{ $t('EWallet.GlobalWords.FieldRequired') }}
        </span>
      </b-col>
    </b-row>
    <b-row>
      <b-col sm="5">
        <label class="required">
          {{ $t('EWallet.GlobalWords.AccountNumber') }}
        </label>
      </b-col>
      <b-col sm="5">
        <b-form-input
          data-vv-scope="bankScope"
          name="account number"
          v-validate="'required|decimal'"
          v-model="accountNumber"
          :class="{ input: true, 'border-danger': errors.has('bankScope.account number') }"
          size="sm"
          @change="updateModel"
          type="text"
        />
        <span v-show="errors.has('bankScope.account number')" class="help text-danger">
          {{ checkError(errors, 'account number') }}
        </span>
      </b-col>
    </b-row>
    <b-row>
      <b-col sm="5">
        <label size="sm" class="required">
          {{ $t('EWallet.FundWithdrawal.AccountHolderName') }}
        </label>
      </b-col>
      <b-col sm="5">
        <b-form-input
          data-vv-scope="bankScope"
          v-validate="'required'"
          size="sm"
          name="Account Holder Name"
          :class="{ input: true, 'border-danger': errors.has('bankScope.Account Holder Name') }"
          disabled
          :value="getMyAccountMemberDetails.details.user.name"
          type="text"
        />
        <span v-show="errors.has('bankScope.Account Holder Name')" class="help text-danger">
          {{ errors.first('bankScope.Account Holder Name') }}
        </span>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import Vue from 'vue'
export default {
  name: 'MbankComponent',
  inject: ['$validator'],
  components: {},
  data() {
    return {
      selected: 'Please select',
      bankInfo: '',
      accountNumber: '',
      yesnooptions: [
        { text: 'Yes', value: 'yes' },
        { text: 'No', value: 'no' },
      ],
      bankError: {
        status: false,
        msg: '',
      },
    }
  },
  mounted() {},
  methods: {
    ...mapActions(['updateMemberDetails']),
    checkError(errorObj, field) {
      if (errorObj.items.length > 0) {
        let i
        for (i = 0; i < errorObj.items.length; i++) {
          if (errorObj.items[i].field === field) {
            if (errorObj.items[i].rule === 'required') {
              return Vue.i18n.translate('EWallet.GlobalWords.AmountRequiredError')
            } else {
              return Vue.i18n.translate('EWallet.GlobalWords.SecurityPinErrorFormat')
            }
          }
        }
      }
    },
    resetError() {
      this.bankError.status = false
    },
    updateModel() {
      this.$emit('input', {
        bankInfo: this.bankInfo,
        accountNumber: this.accountNumber,
        accountHolderName: this.getMyAccountMemberDetails.details.user.name,
      })
    },
  },
  computed: {
    ...mapGetters(['getEwalletBankInfo', 'getEwalletPaymentType', 'getMyAccountMemberDetails']),
  },
}
</script>
