<template>
  <div>
    <b-row>
      <b-col cols="6" md="4" lg="3" xl="2" class="pr-1">
        <custom-date-picker
          v-model="fromDate"
          name="fromDateField"
          display-date-format="yyyy-MM-dd"
          :placeholder="$t('Common.FromDate')"
          :disable-date-range="getAvailableFromDate"
          data-qa="eWallet-TransactionHistory-fromDate-select"
        />
      </b-col>
      <b-col cols="6" md="4" lg="3" xl="2" class="pl-1">
        <custom-date-picker
          v-model="toDate"
          name="toDateField"
          display-date-format="yyyy-MM-dd"
          :placeholder="$t('Common.ToDate')"
          :disable-date-range="getAvailableToDate"
          :wrapper-class="['to-date-picker']"
          :calendar-class="['calender-container']"
          data-qa="eWallet-TransactionHistory-toDate-select"
        />
      </b-col>
    </b-row>

    <b-row class="mt-3">
      <b-col>
        <b-table
          hover
          bordered
          show-empty
          :responsive="true"
          no-border-collapse
          :items="transactionData"
          :fields="transactionFields"
          :busy="isLoading('loadEWalletTransactionRecord')"
          :striped="!isLoading('loadEWalletTransactionRecord') && Boolean(transactionData.length)"
        >
          <template v-slot:table-busy>
            <div class="text-center text-primary my-5">
              <b-spinner class="mx-2" />
              <strong class="h4">{{ $t('Common.Loading') }}</strong>
            </div>
          </template>

          <template v-slot:empty>
            <div class="text-center mt-5 mb-4">
              <template v-if="toDate || fromDate">
                <h4>{{ $t('Common.RecordNotFound') }}</h4>
              </template>
              <template v-else>
                <h4 class="mt-0">{{ $t('EWallet.EmptyTransaction') }}</h4>
                <p>{{ $t('EWallet.EmptyTransaction.HelpText') }}</p>
              </template>
              <b-img :src="emptyRecordArt" class="icon-size-5 mt-2"></b-img>
            </div>
          </template>
        </b-table>

        <b-pagination
          v-if="paginationMeta.totalRecord > paginationMeta.perPage"
          align="center"
          v-model="currentPage"
          hide-goto-end-buttons
          :per-page="paginationMeta.perPage"
          :total-rows="paginationMeta.totalRecord"
          :limit="paginationMeta.paginatorOptionsLimit"
          class="d-print-none font-size-5 mt-4"
          :next-text="$t('Common.Paginator.Next')"
          :prev-text="$t('Common.Paginator.Previous.Short')"
        />
      </b-col>
    </b-row>
  </div>
</template>

<script>
import TransactionMixin from '@/app/ewallet/dashboard/mixins/transactionrecordTableMixin'
import CustomDatePicker from '@/elements/common/components/CustomDatePicker'

export default {
  name: 'EWalletTransactionHistory',
  mixins: [TransactionMixin],
  components: { CustomDatePicker },
  data() {
    return {
      transactionFields: [
        {
          key: 'created_at',
          stickyColumn: true,
          formatter: this.dateFormatter,
          thClass: ['bg-light-extra', 'lighten-10'],
          label: this.$t('Common.Sales.TransactionDate'),
        },
        { key: 'transaction_details', label: this.$t('Common.Sales.TransactionDetails') },
        {
          key: 'debit_amount',
          class: ['text-right'],
          label: this.$t('EWallet.TransactionHistory.TableHeader.Debit'),
        },
        {
          key: 'credit_amount',
          class: ['text-right'],
          label: this.$t('EWallet.TransactionHistory.TableHeader.Credit'),
        },
        {
          key: 'after_balance',
          class: ['text-right'],
          label: this.$t('EWallet.TransactionHistory.TableHeader.Balance'),
        },
      ],
    }
  },
  watch: {
    fromDate() {
      this.currentPage === 1 ? this.loadTransactionRecord() : (this.currentPage = 1)
    },
    toDate() {
      this.currentPage === 1 ? this.loadTransactionRecord() : (this.currentPage = 1)
    },
    currentPage: {
      handler(val) {
        this.loadTransactionRecord(val - 1)
      },
      immediate: true,
    },
  },
}
</script>
