<template>
  <div class="dashboard-panel-element rounded-0 px-3">
    <b-table
      hover
      bordered
      show-empty
      stacked="md"
      responsive=""
      :items="getVoucherList"
      :fields="getTableFields"
      :busy="isLoading(['loadingITokenVoucherList'])"
    >
      <template v-slot:empty>
        <div class="text-center text-primary my-2">
          <strong class="h4">{{ $t('Common.RecordNotFound') }}</strong>
        </div>
      </template>

      <template v-slot:table-busy>
        <div class="text-center text-primary my-2">
          <b-spinner class="mx-2" />
          <strong class="h4">{{ $t('Common.Loading') }}</strong>
        </div>
      </template>
      <!--table columns-->
      <template v-slot:cell(index)="row">
        {{ row.index + 1 }}
      </template>

      <template v-slot:cell(is_redeemable)="row">
        <b-button
          v-if="row.value && hasRedeemPermission"
          variant="primary"
          :to="{ name: 'iTokenRedemptionProcessStart', params: { voucherId: row.item.id } }"
        >
          {{ $t('Common.Redeem') }}
        </b-button>
        <div v-else>-N/A-</div>
      </template>
    </b-table>

    <div v-show="getPaginationMeta.total" class="eshop">
      <pagination
        name="i-token-camping-listing"
        :total="getPaginationMeta.total"
        class="eshop-pagination text-center"
        :per-page="getPaginationMeta.perPage"
        :disabled="isLoading('loadingITokenVoucherList')"
        data-qa-prefix="iToken-iTokenCampingListing"
      />
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import Pagination from '@/app/_global/components/elements/Pagination'

export default {
  name: 'ITokenRedemptionListing',
  components: { Pagination },
  props: {
    page: { type: [String, Number], required: true },
  },
  data() {
    return {
      voucherList: [],
      paginationMeta: {
        perPage: 20,
        total: 0,
      },
    }
  },
  watch: {
    '$route.params.page': {
      handler(page) {
        this.loadAvailableVoucherList(page)
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(['isLoading']),
    getTableFields() {
      return [
        { key: 'index', label: this.$t('Common.Table.No') },
        { key: 'campaign', label: this.$t('Common.Campaign'), formatter: val => val.name || '-' },
        { key: 'voucher_no', label: this.$t('Common.Voucher.VoucherNo') },
        { key: 'voucher_point', label: this.$t('Common.Voucher.VoucherPoints'), class: ['text-md-right'] },
        { key: 'issued_at', label: this.$t('Common.Voucher.IssuedDate') },
        { key: 'expiry_date', label: this.$t('Common.ExpiryDate') },
        { key: 'status', label: this.$t('Common.Status'), formatter: val => val.title || '-' },
        { key: 'is_redeemable', label: this.$t('Common.Voucher.Selection'), class: ['text-md-center'] },
      ]
    },
    getVoucherList() {
      return this.voucherList || []
    },
    getPaginationMeta() {
      return this.paginationMeta || {}
    },
    hasRedeemPermission() {
      return this.$security.policy.can('itoken', 'update')
    },
  },
  methods: {
    ...mapActions('itoken', ['loadITokenVoucherList']),
    loadAvailableVoucherList(page = 1) {
      this.loadITokenVoucherList({
        offset: this.getPaginationMeta.perPage * ((page || 1) - 1),
        limit: this.getPaginationMeta.perPage,
      }).then(result => {
        this.voucherList = this.$helpers.getValue(result, 'data', [])
        this.paginationMeta.total = this.$helpers.getValue(result, 'total', 0)
      })
    },
  },
}
</script>
