<template>
  <div>
    <div class="ewallet-fund-step-title d-print-none">
      {{ $t('EWallet.GlobalWords.Step3') }}
      {{ $t('EWallet.FundTransfer.ReceiptFormStepDescription') }}
    </div>
    <div id="ewallet-fund-body">
      <b-container fluid>
        <b-row>
          <b-col sm="12" lg="6">
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('EWallet.Amount') }} : </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ $helpers.getCurrencyValue(getEwalletFundTransferInfo.amount) }}
                </label>
              </b-col>
            </b-row>
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('Common.From') }} : </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ getEwalletFundTransferInfo.from }}
                </label>
              </b-col>
            </b-row>
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('EWallet.EWalletBalance') }} : </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ getEWalletBalance }}
                </label>
              </b-col>
            </b-row>
          </b-col>
          <b-col sm="12" lg="6">
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('Common.Status') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <label
                  :class="{
                    'text-warning': getEwalletFundTransferResponseInfo.transactionStatus === 'In Process',
                    'text-info-green': getEwalletFundTransferResponseInfo.transactionStatus === 'Successful',
                  }"
                >
                  {{ getEwalletFundTransferResponseInfo.transactionStatus }}
                </label>
              </b-col>
            </b-row>
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('EWallet.TransactionForm.TransactionNumber') }} : </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ getEwalletFundTransferResponseInfo.transactionNumber }}
                </label>
              </b-col>
            </b-row>
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('Common.Sales.TransactionDate') }} : </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ getEwalletFundTransferResponseInfo.transactionDate }}
                </label>
              </b-col>
            </b-row>
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('EWallet.TransactionForm.TransactionTime') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ getEwalletFundTransferResponseInfo.transactionTime }}
                </label>
              </b-col>
            </b-row>
          </b-col>
        </b-row>
        <b-row>
          <b-col sm="12" lg="6">
            <b-row class="ewallet-to-recipient">
              <label>{{ $t('Common.To') }}: </label> <span />
              <label class="ewallet-thirdstep-recipient">
                {{ $t('EWallet.GlobalWords.Recipient') }}
              </label>
              <label class="hline" />
            </b-row>
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('EWallet.FundTransfer.TOI') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ getEwalletFundTransferInfo.TOI }}-{{ getEwalletFundTransferInfo.TOI2 }}
                </label>
              </b-col>
            </b-row>
            <b-row>
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('EWallet.GlobalWords.EffectiveDate') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ getEwalletFundTransferResponseInfo.effectiveDate }}
                </label>
              </b-col>
            </b-row>
            <b-row>
              <b-col sclass="ew-lbl">
                <label size="sm"> {{ $t('EWallet.TransactionForm.RecipientEmail') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ getEwalletFundTransferInfo.recipientEmail }}
                </label>
              </b-col>
            </b-row>
            <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">
                  {{ getEwalletFundTransferInfo.recRef }}
                </label>
              </b-col>
            </b-row>
          </b-col>
        </b-row>
        <b-row v-if="!printStatus" class="justify-content-center justify-content-lg-end no-gutters">
          <b-col class="col offset-xl-6 offset-md-4 offset-0" />
          <b-col class="col text-right">
            <b-btn @click="testPrint" variant="outline-primary" class="px-2 d-print-none">
              {{ $t('Common.Print') }}
            </b-btn>
          </b-col>
          <b-col class="col ml-2">
            <b-btn variant="outline-primary" @click="cancelFundStep('fundFirstStep')" class="px-2 d-print-none">
              {{ $t('EWallet.FundTransfer.MakeAnotherTransfer') }}
            </b-btn>
          </b-col>
          <b-col class="col ml-2">
            <b-btn @click="finishFundStep('fundFirstStep')" variant="primary" class="px-4 d-print-none">
              {{ $t('Common.Done') }}
            </b-btn>
          </b-col>
        </b-row>
      </b-container>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import { EWALLET_PRINT_KEY } from '@/store/utils/localStorageKeys'
import { EWALLET_REPRINT_PAGE } from '@/config/url-prefix'
import Vue from 'vue'
export default {
  name: 'FundtransferThirdStep',
  components: {},
  data() {
    return {
      printStatus: false,
    }
  },
  mounted() {},
  methods: {
    ...mapActions(['cancelFundStep', 'finishFundStep', 'setPrintData']),
    testPrint: function() {
      let inputData = {
        afterBalance: this.getEWalletBalance,
        amount: this.$helpers.getCurrencyValue(this.getEwalletFundTransferInfo.amount),
        statusReference: this.getEwalletFundTransferResponseInfo.transactionStatus,
        transactionDate: this.getEwalletFundTransferResponseInfo.transactionDate,
        transactionDetails: Vue.i18n.translate('EWallet.FundTransfer.Title.To'),
        transactionNumber: this.getEwalletFundTransferResponseInfo.transactionNumber,
        transactionStatus: this.getEwalletFundTransferResponseInfo.transactionStatus,
        transactionTime: this.getEwalletFundTransferResponseInfo.transactionTime,
        from: this.getEwalletFundTransferInfo.from,
        recReference: this.getEwalletFundTransferInfo.recRef,
        toAccount: this.getEwalletFundTransferInfo.TOI,
        toOtherIbo: this.getEwalletFundTransferInfo.TOI + this.getEwalletFundTransferInfo.TOI2,
        recEmail: this.getEwalletFundTransferInfo.recipientEmail,
      }
      this.setPrintData({ key: EWALLET_PRINT_KEY, data: inputData })
      window.open(EWALLET_REPRINT_PAGE, '_blank')
    },
  },
  computed: {
    ...mapGetters(['getEWalletBalance', 'getEwalletFundTransferInfo', 'getEwalletFundTransferResponseInfo']),
  },
}
</script>
