<template>
  <div>
    <b-table hover outlined :busy="isBusy" show-empty responsive="" :fields="getTableField" :items="getRedeemProducts">
      <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:empty>
        <div class="text-center text-primary my-2">
          <h5>{{ $t('Eshop.Product.NotFound') }}</h5>
        </div>
      </template>

      <template v-slot:cell(index)="row">
        <div>
          <span>{{ row.index + 1 }}</span>
          <b-img
            rounded
            width="60px"
            class="ml-3 d-none d-xl-inline-block border"
            :src="row.item.image || imagePlaceHolder"
          />
        </div>
      </template>

      <template v-slot:custom-foot>
        <tr v-if="getRedeemProducts.length">
          <td colspan="6" class="text-danger py-2">
            {{ $t('Itoken.Redemption.RedeemDisclaimer') }}
          </td>
        </tr>
      </template>
    </b-table>
  </div>
</template>

<script>
import ImagePlaceholder from '@/assets/img/image-placeholder.svg'

export default {
  name: 'ITokenSelectedProductsTable',
  props: {
    selectedItems: { type: Array, required: true },
    isBusy: { type: Boolean, required: false },
    currency: { type: String, required: true },
  },
  data() {
    return {
      imagePlaceHolder: ImagePlaceholder,
    }
  },
  computed: {
    getTableField() {
      return [
        { key: 'index', label: this.$t('Common.Table.No') },
        { key: 'sku', label: this.$t('Common.ProductCode') },
        { key: 'name', label: this.$t('Common.Product.ProductName') },
        { key: 'quantity', label: this.$t('Common.Quantity'), class: 'text-right' },
        { key: 'unit_point', label: this.$t('Itoken.Redemption.Product.UnitPoints'), class: 'text-right' },
        { key: 'price', label: `${this.$t('Common.Sales.UnitPrice')} (${this.currency})`, class: ['text-right'] },
      ]
    },
    getRedeemProducts() {
      return (this.selectedItems || []).filter(data => data.quantity > 0)
    },
  },
}
</script>
