<template>
  <div class="pl-5">
    <b-row>
      <b-col class="d-block">
        <img :src="ibsLogo" />
      </b-col>
    </b-row>
    <b-row class="mt-4">
      <b-col v-if="reprintData !== null && reprintData.transactionDetails === 'Fund Withdrawal'">
        <label class="font-weight-bold">
          {{ $t('EWallet.GlobalWords.Reprint.FundWithdrawal') }}
        </label>
      </b-col>
      <b-col v-else>
        <label class="font-weight-bold">
          {{ $t('EWallet.GlobalWords.Reprint.FundTransfer') }}
        </label>
      </b-col>
    </b-row>
    <b-row class="mt-3">
      <b-col class="col-3"> {{ $t('Common.Status') }}: </b-col>
      <b-col v-if="reprintData !== null && reprintData.hasOwnProperty('transactionStatus')">
        <label
          :class="{
            'text-info': reprintData.transactionStatus === 'Successful',
            'text-warning': reprintData.transactionStatus !== 'Successful',
          }"
        >
          {{ reprintData.transactionStatus }}
        </label>
      </b-col>
    </b-row>
    <b-row class="mt-2">
      <b-col class="col-3"> {{ $t('EWallet.TransactionForm.TransactionNumber') }}: </b-col>
      <b-col v-if="reprintData !== null && reprintData.hasOwnProperty('transactionNumber')">
        {{ reprintData.transactionNumber }}
      </b-col>
    </b-row>
    <b-row class="mt-2">
      <b-col class="col-3"> {{ $t('Common.Sales.TransactionDate') }}: </b-col>
      <b-col v-if="reprintData !== null && reprintData.hasOwnProperty('transactionDate')">
        {{ reprintData.transactionDate }}
      </b-col>
    </b-row>
    <b-row class="mt-2">
      <b-col class="col-3"> {{ $t('EWallet.TransactionForm.TransactionTime') }}: </b-col>
      <b-col v-if="reprintData !== null && reprintData.hasOwnProperty('transactionTime')">
        {{ reprintData.transactionTime }}
      </b-col>
    </b-row>

    <b-row class="mt-4">
      <b-col class="col-3"> {{ $t('EWallet.Amount') }} : </b-col>
      <b-col v-if="reprintData !== null && reprintData.hasOwnProperty('amount')">
        {{ reprintData.amount }}
      </b-col>
    </b-row>
    <b-row class="mt-2">
      <b-col class="col-3"> {{ $t('Common.From') }} : </b-col>
      <b-col v-if="reprintData !== null && reprintData.hasOwnProperty('from')">
        {{ reprintData.from }}
      </b-col>
    </b-row>
    <!--<b-row class="mt-2"> <b-col> {{$t('EWallet.GlobalWords.EWalletBalance')}} : </b-col> <b-col v-if="reprintData !== null && reprintData.hasOwnProperty('afterBalance')"> {{reprintData.afterBalance}} </b-col></b-row>-->

    <div
      v-if="
        reprintData !== null && reprintData.paymentInfo !== null && reprintData.transactionDetails === 'Fund Withdrawal'
      "
      class="mt-4"
    >
      <div v-if="reprintData.paymentInfo.selected === 1">
        <b-row class="mt-2">
          <b-col class="col-3"> {{ $t('EWallet.FundWithdrawal.BankName') }}: </b-col>
          <b-col> {{ reprintData.paymentInfo.bankData.bankName }} </b-col>
        </b-row>
        <b-row class="mt-2">
          <b-col class="col-3"> {{ $t('EWallet.FundWithdrawal.AccountNo') }}: </b-col>
          <b-col> {{ reprintData.paymentInfo.bankData.accountNumber }} </b-col>
        </b-row>
        <b-row class="mt-2">
          <b-col class="col-3"> {{ $t('EWallet.FundWithdrawal.AccountHolderName') }}: </b-col>
          <b-col> {{ reprintData.paymentInfo.bankData.accountName }} </b-col>
        </b-row>
      </div>
      <div v-else>
        <b-row class="mt-2">
          <b-col class="col-3"> {{ $t('EWallet.FundWithdrawal.MPay.CHN') }}: </b-col>
          <b-col> {{ reprintData.paymentInfo.cardData.cardHolderName }} </b-col>
        </b-row>
        <b-row class="mt-2">
          <b-col class="col-3"> {{ $t('EWallet.FundWithdrawal.MPay.CardNumber') }}: </b-col>
          <b-col> {{ reprintData.paymentInfo.cardData.cardNumber }} </b-col>
        </b-row>
        <b-row class="mt-2">
          <b-col class="col-3"> {{ $t('EWallet.FundWithdrawal.MPay.CED') }}: </b-col>
          <b-col> {{ reprintData.paymentInfo.cardData.cardExpDate }} </b-col>
        </b-row>
      </div>
    </div>
    <div v-else class="mt-4">
      <b-row class="mt-2">
        <b-col class="col-3"> {{ $t('EWallet.FundTransfer.TOI') }}: </b-col>
        <b-col v-if="reprintData !== null && reprintData.hasOwnProperty('toOtherIbo')">
          {{ reprintData.toOtherIbo }}
        </b-col>
      </b-row>
      <b-row class="mt-2">
        <b-col class="col-3"> {{ $t('EWallet.TransactionForm.RecipientEmail') }}: </b-col>
        <b-col v-if="reprintData !== null && reprintData.hasOwnProperty('recEmail')">
          {{ reprintData.recEmail }}
        </b-col>
      </b-row>
      <b-row class="mt-2">
        <b-col class="col-3"> {{ $t('EWallet.TransactionForm.RecipientReference') }}: </b-col>
        <b-col v-if="reprintData !== null && reprintData.hasOwnProperty('recReference')">
          {{ reprintData.recReference }}
        </b-col>
      </b-row>
    </div>
  </div>
</template>

<script>
import { EWALLET_PRINT_KEY } from '@/store/utils/localStorageKeys'
import { mapActions } from 'vuex'
export default {
  name: 'ReprintPage',
  data() {
    return {
      ibsLogo: this.$const.constImage.COMPANY_PRINT_LOGO,
      reprintData: null,
    }
  },
  async mounted() {
    this.reprintData = await this.retrievePrintData(EWALLET_PRINT_KEY)
    window.onafterprint = () => {
      this.removePrintData(EWALLET_PRINT_KEY)
      window.close()
    }
  },
  watch: {
    reprintData() {
      if (this.reprintData !== null && this.reprintData.amount !== '' && this.reprintData.transactionDetails !== '') {
        window.print()
      }
    },
  },
  methods: {
    ...mapActions(['retrievePrintData', 'removePrintData']),
  },
}
</script>

<style scoped>
@page {
  size: 25cm 35.7cm;
  margin: 20mm 15mm 15mm 15mm;
}
</style>
