import moment from 'moment'
import { mapGetters, mapActions } from 'vuex'
import EmptyRecordArt from '@/assets/img/empty-transaction-record.svg'

export default {
  data() {
    return {
      emptyRecordArt: EmptyRecordArt,
      fromDate: null,
      toDate: null,
      currentPage: 1,
      paginationMeta: {
        perPage: 20,
        totalRecord: 0,
        paginatorOptionsLimit: 3,
      },
      transactionData: [],
    }
  },
  computed: {
    ...mapGetters(['isLoading']),
    getAvailableFromDate() {
      return {
        from: new Date(this.toDate || Date.now()),
      }
    },
    getAvailableToDate() {
      return {
        to: new Date(this.fromDate),
        from: new Date(),
      }
    },
  },
  async mounted() {
    if (!(await this.isMobile())) {
      this.paginationMeta.paginatorOptionsLimit = 5
    }
  },
  methods: {
    ...mapActions(['loadEWalletTransactionRecords', 'isMobile']),
    dateFormatter(value) {
      return moment(value).format('DD/MM/YYYY')
    },
    async loadTransactionRecord(offset = 0, type = '') {
      let payload = {
        offset: offset,
        amountType: type,
        toTargetDate: this.toDate,
        fromTargetDate: this.fromDate,
        perPage: this.paginationMeta.perPage,
      }

      await this.loadEWalletTransactionRecords(payload).then(result => {
        this.transactionData = result.data || []
        this.paginationMeta.totalRecord = result.total || 0
      })
    },
  },
}
