<template>
  <b-table
    :data="data"
    :total="total"
    :current-page="page"
    :per-page="25"
    :loading="isLoading"
    @page-change="onPageChange"
    class="mb-6"
    hoverable
    striped
    paginated
    backend-pagination
  >
    <b-table-column
      field="createdAt"
      label="Fecha Reporte"
      v-slot="props"
      centered
    >
      <span>{{ fechaHora(props.row.createdAt) }}</span>
    </b-table-column>

    <b-table-column
      field="descripcion"
      label="Descripcion"
      v-slot="props"
      centered
    >
      <span>{{ props.row.descripcion }}</span>
    </b-table-column>

    <b-table-column
      field="operadorReporte"
      label="Operador Reporte"
      v-slot="props"
      centered
    >
      <span>
        {{ props.row.OperadorMulta.operador }}
      </span>
    </b-table-column>

    <b-table-column
      field="idPrestamo"
      label="Número de Préstamo"
      v-slot="props"
      centered
    >
      <span>{{ props.row.Prestamo.idPrestamo }}</span>
    </b-table-column>
  </b-table>
</template>

<script>
import moment from 'moment'

export default {
  props: {
    isLoading: {
      type: Boolean,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
    page: {
      type: Number,
      required: true,
    },
    onPageChange: {
      type: Function,
      require: true,
    },
    total: {
      type: Number,
      required: true,
    },
  },
  methods: {
    fechaHora(date) {
      return moment(date).format('YYYY-MM-DD HH:MM')
    },
  },
}
</script>

<style></style>
