<template>
  <order-history tabs-rendering-only>
    <div class="mt-3">
      <b-table
        hover
        bordered
        show-empty
        stacked="lg"
        responsive=""
        :fields="getTableFields"
        thead-class="text-capitalize"
        :items="getBonusAdjustmentList"
        :busy="isLoading('loadingBonusAdjustmentList')"
      >
        <template v-slot:empty>
          <div class="text-center my-2">
            <h5 class="text-primary">{{ $t('Common.RecordNotFound') }}</h5>
          </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>

        <template v-slot:cell(index)="row">
          {{ row.index + 1 }}
        </template>

        <template v-slot:cell(bonus_value)="row">
          <span :class="[`text-${(row.value >= 0 && 'green') || 'danger'}`]">{{ row.value }}</span>
        </template>
      </b-table>
    </div>

    <div>
      <div v-show="getPaginationMeta.total" class="eshop">
        <pagination
          name="bonus-adjustment-listing"
          :total="getPaginationMeta.total"
          class="eshop-pagination text-center"
          :per-page="getPaginationMeta.perPage"
          :disabled="isLoading('loadingBonusAdjustmentList')"
          data-qa-prefix="orderHistory-bonusAdjustmentListing"
        />
      </div>
    </div>
  </order-history>
</template>

<script>
import moment from 'moment'
import { mapActions, mapGetters } from 'vuex'
import Pagination from '@/app/_global/components/elements/Pagination'
import OrderHistory from '@/app/order-history/dashboard/components/OrderHistory'

export default {
  name: 'BonusAdjustmentList',
  components: { OrderHistory, Pagination },
  props: {
    page: { type: [String, Number], required: true },
  },
  data() {
    return {
      bonusAdjustmentList: [],
      paginationMeta: {
        perPage: 20,
        total: 0,
      },
    }
  },
  watch: {
    page: {
      handler(val) {
        this.loadBonusAdjustmentRecords(Number.parseInt(val) || 1)
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(['isLoading']),
    getPaginationMeta() {
      return this.paginationMeta
    },
    getBonusAdjustmentList() {
      return this.bonusAdjustmentList
    },
    getTableFields() {
      return [
        { key: 'index', label: this.$t('Common.Table.No') },
        { key: 'updated_at', label: this.$t('Common.Date'), formatter: date => moment(date).format('YYYY-MM-DD') },
        { key: 'cw', label: this.$t('Common.Terminology.PayCycle'), formatter: cw => (cw && cw.cw_name) || '-' },
        {
          key: 'bonus_type',
          label: this.$t('OrderHistory.AdjustmentHistory.BonusValueType'),
          formatter: type => {
            type = type || { title: '' }
            return this.$helpers.getValue(type, 'translated_title.content', type.title)
          },
        },
        {
          key: 'cbp_country',
          label: this.$t('OrderHistory.AdjustmentHistory.CbpPointCountry'),
          formatter: type => {
            type = type || { name: '-' }
            return this.$helpers.getValue(type, 'translated_name.content', type.name)
          },
        },
        {
          key: 'bonus_value',
          label: this.$t('OrderHistory.AdjustmentHistory.Value'),
          class: ['text-lg-right'],
        },
        { key: 'remark', label: this.$t('OrderHistory.AdjustmentHistory.Remark') },
      ]
    },
  },
  methods: {
    ...mapActions('orderhistory', ['loadBonusAdjustmentList']),
    loadBonusAdjustmentRecords(page = 1) {
      let payload = {
        sort_by: 'cw_id',
        order_by: 'DESC',
        limit: this.getPaginationMeta.perPage,
        offset: this.getPaginationMeta.perPage * (page - 1),
      }
      this.loadBonusAdjustmentList(payload).then(result => {
        result = result || { data: [], total: 0 }
        this.bonusAdjustmentList = result.data
        this.paginationMeta.total = result.total
      })
    },
  },
}
</script>
