<template>
  <div>
    <b-table
      hover
      outlined
      show-empty
      stacked="lg"
      responsive=""
      :busy="isBusy"
      head-variant="light"
      :fields="getTableField"
      :items="getOrderDetails"
    >
      <template v-slot:empty>
        <div class="text-center text-primary my-2">
          <h5>{{ $t('Common.Table.NoRecords.Msg') }}</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>
    </b-table>
  </div>
</template>

<script>
export default {
  name: 'ITokenOrderCompletionTable',
  props: {
    currencySymbol: { type: String, default: '' },
    orderDetails: { type: Object, required: true },
    isBusy: { type: Boolean, default: false },
  },
  computed: {
    getOrderDetails() {
      return (Object.keys(this.orderDetails).length && [this.orderDetails]) || []
    },
    getTableField() {
      return [
        { key: 'transactionDate', label: this.$t('Common.Sales.TransactionDate') },
        { key: 'campaign', label: this.$t('Common.Campaign') },
        { key: 'voucherNo', label: this.$t('Common.Voucher.VoucherNo') },
        { key: 'paymentMethod', label: this.$t('Common.Sales.PaymentMethod') },
        { key: 'shippingMethod', label: this.$t('Common.ShippingMethod') },
        { key: 'totalPointsRedeemed', label: this.$t('Itoken.Redemption.TotalPoints'), class: ['text-right'] },
        {
          key: 'price',
          label: this.$t('Common.TotalAmount.WithCurrency', { currency: this.currencySymbol }),
          class: ['text-right'],
        },
        { key: 'status', label: this.$t('Common.Status') },
      ]
    },
  },
}
</script>
