<template>
  <div>
    <div class="ewallet-fund-step-title">
      {{ $t('EWallet.GlobalWords.Step1') }}
      {{ $t('EWallet.FundWithdrawal.ApplicationFormStepDescription') }}
    </div>
    <div id="ewallet-fund-body">
      <b-container fluid>
        <div class="fund-first-step-body">
          <b-row>
            <b-col class="ew-lbl">
              <label class="required"> {{ $t('EWallet.Amount') }} </label>:
            </b-col>
            <b-col class="ew-cnt">
              <b-form-input
                size="sm"
                type="text"
                v-model="amount"
                name="Amount"
                v-validate="'required|decimal'"
                :class="{ input: true, 'is-danger': errors.has('Amount') || amountStatus }"
                @focus.native="resetError"
                @keyup.native="checkAmount"
              />
              <span v-show="errors.has('Amount')" class="help is-danger">
                {{ amountError(errors) }}
              </span>
              <span v-show="amountStatus" class="help is-danger">
                {{ amountErrorMsg }}
              </span>
            </b-col>
          </b-row>
          <b-row>
            <b-col class="ew-lbl">
              <label> {{ $t('Common.From') }}: </label>
            </b-col>
            <b-col class="ew-cnt ewallet-first-step-left-align">
              <label> {{ getIboId }}-{{ getUserName }} </label>
            </b-col>
          </b-row>
          <div v-if="getEwalletSelectedPayment === 'bank'">
            <b-row>
              <b-col class="ew-lbl">
                <label> {{ $t('EWallet.FundWithdrawal.BankName') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <b-form-input
                  size="sm"
                  type="text"
                  name="bankName"
                  :value="getBankName(getSelectedBankInfo.bankName)"
                  disabled
                />
              </b-col>
            </b-row>
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('EWallet.FundWithdrawal.AccountNo') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <b-form-input
                  size="sm"
                  type="text"
                  v-model="accountNo"
                  name="accountNo"
                  :value="getSelectedBankInfo.bankAccountNumber"
                  disabled
                />
              </b-col>
            </b-row>
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('EWallet.FundWithdrawal.AccountHolderName') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <b-form-input
                  size="sm"
                  type="text"
                  v-model="accountHolderName"
                  :value="getSelectedBankInfo.bankAccountHolderName"
                  disabled
                />
              </b-col>
            </b-row>
          </div>
          <div v-else-if="getEwalletSelectedPayment === 'mpay'">
            <b-row>
              <b-col class="ew-lbl pt-1">
                <label> {{ $t('EWallet.FundWithdrawal.MPay.CHN') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <b-form-input size="sm" type="text" :value="getSelectedMPayInfo.eWalletCardHolderName" disabled />
              </b-col>
            </b-row>
            <b-row>
              <b-col class="ew-lbl pt-1">
                <label size="sm"> {{ $t('EWallet.FundWithdrawal.MPay.CardNumber') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <b-form-input size="sm" type="text" :value="getSelectedMPayInfo.eWalletCardNumber" disabled />
              </b-col>
            </b-row>
            <b-row>
              <b-col class="ew-lbl pt-3">
                <label size="sm"> {{ $t('EWallet.FundWithdrawal.MPay.CED') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <b-row>
                  <b-col class="pl-0">
                    <b-form-input
                      size="sm"
                      type="text"
                      :value="getSelectedMPayInfo.eWalletCardExpiryDate.mm"
                      disabled
                    />
                  </b-col>
                  <b-col class="pl-0">
                    <b-form-input
                      size="sm"
                      type="text"
                      :value="getSelectedMPayInfo.eWalletCardExpiryDate.yy"
                      disabled
                    />
                  </b-col>
                </b-row>
              </b-col>
            </b-row>
          </div>
          <b-row>
            <b-col class="ew-lbl">
              <label size="sm"> {{ $t('EWallet.TransactionForm.RecipientReference') }}: </label>
            </b-col>
            <b-col class="ew-cnt">
              <b-form-input
                size="sm"
                type="text"
                name="Recipient Reference"
                v-validate="'max:76'"
                :placeholder="$t('EWallet.TransactionForm.Placeholder.Optional')"
                v-model="recRef"
              />
              <span v-show="errors.has('Recipient Reference')" class="help is-danger">
                {{ errors.first('Recipient Reference') }}
              </span>
            </b-col>
          </b-row>
        </div>
        <b-row class="fund-first-step-footer">
          <b-btn @click="backToEwalletHome">
            {{ $t('EWallet.GlobalWords.Cancel') }}
          </b-btn>
          <b-btn class="ml-1" :disabled="isLoading('amountFundWithdrawalChecking')" @click="next">
            {{ $t('EWallet.GlobalWords.Continue') }}
          </b-btn>
        </b-row>
      </b-container>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import Vue from 'vue'
import router from '@/router'
import { EWALLET_HOME } from '@/config/url-prefix'
export default {
  name: 'FundwithdrawalFirstStep',
  $_veeValidate: {
    validator: 'new',
  },
  data() {
    return {
      amount: '',
      from: '',
      bankName: '',
      accountHolderName: '',
      accountNo: '',
      recipientEmail: '',
      recRef: '',
      amountStatus: false,
      amountErrorMsg: '',
      cardNumber: '',
      cardHolderName: '',
      expiryDate: { mm: '', yy: '' },
    }
  },
  mounted() {
    this.loadEwalletBalance()
  },
  methods: {
    ...mapActions([
      'setFundStep',
      'cancelFundStep',
      'fundWithdrawalInfo',
      'loadEwalletBalance',
      'checkAmountFundWithdrawal',
    ]),
    ...mapMutations(['CANCEL_FUND_STEP']),
    next() {
      this.$validator.validateAll().then(valid => {
        if (valid) {
          if (!this.amountStatus) {
            this.$data.from = this.getIboId + '-' + this.getUserName
            if (this.getEwalletSelectedPayment === 'bank') {
              this.$data.bankName = this.getBankName(this.getSelectedBankInfo.bankName)
              this.$data.accountNo = this.getSelectedBankInfo.bankAccountNumber
              this.$data.accountHolderName = this.getSelectedBankInfo.bankAccountHolderName
            } else {
              this.$data.cardNumber = this.getSelectedMPayInfo.eWalletCardNumber
              this.$data.cardHolderName = this.getSelectedMPayInfo.eWalletCardHolderName
              this.$data.expiryDate = {
                mm: this.getSelectedMPayInfo.eWalletCardExpiryDate.mm,
                yy: this.getSelectedMPayInfo.eWalletCardExpiryDate.yy,
              }
            }
            this.fundWithdrawalInfo(this.$data)
            this.checkAmountFundWithdrawal().then(res => {
              if (res.status) {
                this.setFundStep('fundSecondStep')
              } else {
                this.amountStatus = true
                this.amountErrorMsg = res.msg
              }
            })
          }
        }
      })
    },
    resetError() {
      this.amountStatus = false
      this.amountErrorMsg = ''
    },
    checkAmount() {
      if (parseFloat(this.amount) < 0.01) {
        this.amountStatus = true
        this.amountErrorMsg = Vue.i18n.translate('EWallet.GlobalWords.RangeFundError')
      } else if (parseFloat(this.amount) > parseFloat(this.getEwalletBalanceInt)) {
        this.amountStatus = true
        this.amountErrorMsg = Vue.i18n.translate('EWallet.Transaction.InsufficientFund')
      } else {
        this.amountStatus = false
        this.amountErrorMsg = ''
      }
    },
    amountError(errorObj) {
      if (errorObj.items.length > 0) {
        if (errorObj.items[0].field === 'Amount') {
          if (errorObj.items[0].rule === 'required') {
            return Vue.i18n.translate('EWallet.GlobalWords.AmountRequiredError')
          } else {
            return Vue.i18n.translate('EWallet.GlobalWords.AmountDecimalError')
          }
        }
      }
    },
    backToEwalletHome() {
      router.push(EWALLET_HOME)
      this.CANCEL_FUND_STEP('')
    },
  },
  computed: {
    ...mapGetters([
      'isLoading',
      'getEWalletFundStep',
      'getMemberName',
      'getEwalletSelectedPayment',
      'getSelectedBankInfo',
      'getSelectedMPayInfo',
      'getEwalletRangeFund',
      'getEwalletInsufficientFund',
      'getEwalletBalanceInt',
      'getBankName',
      'getIboId',
      'getUserName',
    ]),
  },
}
</script>
