<template>
  <div>
    <div class="ewallet-fund-step-title">
      {{ $t('EWallet.GlobalWords.Step2') }}
      {{ $t('EWallet.FundWithdrawal.ConfirmationFormStepDescription') }}
    </div>
    <div id="ewallet-fund-body">
      <b-container fluid>
        <div class="fund-first-step-body">
          <b-row>
            <b-col class="ew-lbl">
              <label> {{ $t('EWallet.Amount') }}: </label>
            </b-col>
            <b-col class="ew-cnt">
              <label class="label-content">
                {{ $helpers.getCurrencyValue(getEwalletFundWithdrawalInfo.amount) }}
              </label>
            </b-col>
          </b-row>
          <b-row>
            <b-col class="ew-lbl">
              <label> {{ $t('Common.From') }}: </label>
            </b-col>
            <b-col class="ew-cnt">
              <label class="label-content"> {{ 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">
                <label class="label-content">
                  {{ getEwalletFundWithdrawalInfo.bankName }}
                </label>
              </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">
                <label class="label-content">
                  {{ getEwalletFundWithdrawalInfo.accountNo }}
                </label>
              </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">
                <label class="label-content">
                  {{ getEwalletFundWithdrawalInfo.accountHolderName }}
                </label>
              </b-col>
            </b-row>
          </div>
          <div v-else-if="getEwalletSelectedPayment === 'mpay'">
            <b-row>
              <b-col class="ew-lbl">
                <label> {{ $t('EWallet.FundWithdrawal.MPay.CHN') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ getEwalletFundWithdrawalInfo.cardHolderName }}
                </label>
              </b-col>
            </b-row>
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('EWallet.FundWithdrawal.MPay.CardNumber') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ getEwalletFundWithdrawalInfo.cardNumber }}
                </label>
              </b-col>
            </b-row>
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('EWallet.FundWithdrawal.MPay.CED') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ getEwalletFundWithdrawalInfo.expiryDate.mm }} - {{ getEwalletFundWithdrawalInfo.expiryDate.yy }}
                </label>
              </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">
              <label class="label-content">
                {{ getEwalletFundWithdrawalInfo.recRef }}
              </label>
            </b-col>
          </b-row>
          <b-row>
            <b-col class="ew-lbl">
              <label class="required"> {{ $t('EWallet.GlobalWords.SecurityPin') }} </label>:
            </b-col>
            <b-col class="ew-cnt">
              <b-form-input
                size="sm"
                type="password"
                v-model="securityPin"
                name="Security Pin"
                v-validate="'required|numeric'"
                @focus.native="resetError"
                :class="{
                  input: true,
                  'is-danger': errors.has('Security Pin') || getEwalletFundTransferStatus || secPinStatus,
                }"
              />
            </b-col>
          </b-row>
          <b-row>
            <b-col class="ew-lbl" />
            <b-col class="ew-cnt">
              <span v-show="errors.has('Security Pin')" class="help is-danger">
                {{ secPinError(errors) }}
              </span>
              <span v-show="secPinStatus" class="help is-danger">
                {{ secPinErrorMsg }}
              </span>
              <span
                v-show="getEwalletFundTransferStatus"
                v-for="(msg, msgIndex) in getEwalletFundTransferMessage"
                class="help is-danger"
                :key="msgIndex"
              >
                {{ msg }}<br />
              </span>
            </b-col>
          </b-row>
          <b-row>
            <b-col class="ew-lbl" />
            <b-col class="ew-cnt">
              <a href="#" v-b-modal.confirm_reset_pin>
                {{ $t('Common.Security.ForgotSecurityPin') }}
              </a>
            </b-col>
          </b-row>
        </div>
        <b-row class="fund-first-step-footer">
          <b-btn @click="cancelFundStep('fundFirstStep')">
            {{ $t('Common.Back') }}
          </b-btn>
          <b-btn class="ml-1" :disabled="isLoading('createEwalletTransaction')" @click="confirmWithdrawal">
            {{ $t('EWallet.GlobalWords.Confirm') }}
          </b-btn>
        </b-row>
        <orderPaymentResetPin />
      </b-container>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import Vue from 'vue'
import orderPaymentResetPin from '@/app/eshop/order/components/blocks/OrderPaymentResetPin'
export default {
  name: 'FundwithdrawalSecondStep',
  $_veeValidate: {
    validator: 'new',
  },
  components: {
    orderPaymentResetPin,
  },
  data() {
    return {
      securityPin: '',
      secPinStatus: false,
      secPinErrorMsg: '',
    }
  },
  mounted() {},
  methods: {
    ...mapActions(['setFundStep', 'cancelFundStep', 'createNewFundWithdrawal']),
    ...mapMutations(['SET_EWALLET_FUND_TRANSFER_STATUS', 'SET_EWALLET_SECURITY_PIN_MODAL']),
    resetError() {
      this.SET_EWALLET_FUND_TRANSFER_STATUS(false)
    },
    secPinError(errorObj) {
      if (errorObj.items.length > 0) {
        if (errorObj.items[0].field === 'Security Pin') {
          if (errorObj.items[0].rule === 'required') {
            return Vue.i18n.translate('EWallet.GlobalWords.AmountRequiredError')
          } else {
            return Vue.i18n.translate('EWallet.GlobalWords.SecurityPinErrorFormat')
          }
        }
      }
    },
    confirmWithdrawal() {
      this.$validator.validateAll().then(valid => {
        if (valid) {
          this.createNewFundWithdrawal(this.$data.securityPin).then(result => {
            if (result) {
              this.setFundStep('fundThirdStep')
            }
          })
        }
      })
    },
  },
  computed: {
    ...mapGetters([
      'isLoading',
      'getEWalletFundStep',
      'getEwalletFundWithdrawalInfo',
      'getEwalletFundTransferStatus',
      'getEwalletFundTransferMessage',
      'getEwalletSelectedPayment',
      'getIboId',
      'getUserName',
    ]),
  },
}
</script>
