<template>
  <div>
    <div class="ewallet-fund-step-title d-print-none">
      {{ $t('EWallet.GlobalWords.Step3') }}
      {{ $t('EWallet.FundWithdrawal.Step3Text') }}
    </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(getEwalletFundWithdrawalInfo.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">
                  {{ getEwalletFundWithdrawalInfo.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>
            <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 v-if="false">
              <b-col class="ew-lbl">
                <label size="sm"> {{ $t('EWallet.GlobalWords.EffectiveDate') }}: </label>
              </b-col>
              <b-col class="ew-cnt">
                <label class="label-content">
                  {{ $t('EWallet.GlobalWords.Today') }} {{ getEwalletFundTransferResponseInfo.effectiveDate }}
                </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">
                  {{ getEwalletFundWithdrawalInfo.recRef }}
                </label>
              </b-col>
            </b-row>
          </b-col>
        </b-row>
        <b-row class="fund-first-step-footer">
          <b-btn class="fund-last-step-print d-print-none" @click="printDocument">
            {{ $t('Common.Print') }}
          </b-btn>
          <b-btn class="fund-last-step-done d-print-none" @click="finishFundWithdrawal('fundFirstStep')">
            {{ $t('Common.Done') }}
          </b-btn>
        </b-row>
      </b-container>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } 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: 'FundwithdrawalThirdStep',
  components: {},
  data() {
    return {
      items: [
        { text: 'eWallet', href: '#' },
        { text: 'Fund Withdrawal', href: '#' },
      ],
      printStatus: false,
    }
  },
  mounted() {},
  methods: {
    ...mapActions(['cancelFundStep', 'finishFundWithdrawal', 'setPrintData']),
    printDocument: function() {
      // window.print()
      let paymentData = {}
      if (this.getEwalletSelectedPayment === 'bank') {
        paymentData = {
          selected: 1,
          bankData: {
            accountName: this.getEwalletFundWithdrawalInfo.accountHolderName,
            accountNumber: this.getEwalletFundWithdrawalInfo.accountNo,
            bankName: this.getEwalletFundWithdrawalInfo.bankName,
          },
        }
      } else if (this.getEwalletSelectedPayment === 'mpay') {
        paymentData = {
          selected: 2,
          cardData: {
            cardHolderName: this.getEwalletFundWithdrawalInfo.accountHolderName,
            cardNumber: this.getEwalletFundWithdrawalInfo.cardNumber,
            cardExpDate:
              this.getEwalletFundWithdrawalInfo.expiryDate.mm +
              ' -  ' +
              this.getEwalletFundWithdrawalInfo.expiryDate.yy,
          },
        }
      }
      let inputData = {
        paymentInfo: paymentData,
        afterBalance: this.getEWalletBalance,
        amount: this.$helpers.getCurrencyValue(this.getEwalletFundWithdrawalInfo.amount),
        statusReference: this.getEwalletFundTransferResponseInfo.transactionStatus,
        transactionDate: this.getEwalletFundTransferResponseInfo.transactionDate,
        transactionDetails: Vue.i18n.translate('EWallet.FundWithdrawal'),
        transactionNumber: this.getEwalletFundTransferResponseInfo.transactionNumber,
        transactionStatus: this.getEwalletFundTransferResponseInfo.transactionStatus,
        transactionTime: this.getEwalletFundTransferResponseInfo.transactionTime,
        from: this.getEwalletFundWithdrawalInfo.from,
        recReference: this.getEwalletFundWithdrawalInfo.recRef,
      }
      this.setPrintData({ key: EWALLET_PRINT_KEY, data: inputData })
      window.open(EWALLET_REPRINT_PAGE, '_blank')
    },
  },
  computed: {
    ...mapGetters([
      'getEwalletFundWithdrawalInfo',
      'getEwalletFundTransferResponseInfo',
      'getEWalletBalance',
      'getEwalletSelectedPayment',
    ]),
  },
}
</script>
