<template>
  <b-table
    :data="data"
    :total="total"
    :current-page="page"
    :per-page="25"
    :loading="isLoadingTable"
    @page-change="onPageChange"
    class="mb-6"
    hoverable
    striped
    paginated
    backend-pagination
  >
    <b-table-column
      field="idPremiacion"
      label="Id"
      v-slot="props"
      centered
      sortable
    >
      {{ props.row.idPremiacion }}
    </b-table-column>

    <b-table-column
      field="premiacion"
      label="Premiación"
      v-slot="props"
      centered
      sortable
    >
      <span> {{ props.row.premiacion }} </span>
    </b-table-column>

    <b-table-column field="hora" label="Hora" v-slot="props" centered sortable>
      <span v-if="props.row.hora">{{ props.row.hora }}</span>
      <span v-else>-</span>
    </b-table-column>

    <b-table-column
      field="fecha"
      label="Fecha"
      v-slot="props"
      centered
      sortable
    >
      <span v-if="props.row.fecha">
        {{ fecha(props.row.fecha) }}
      </span>

      <span v-else>-</span>
    </b-table-column>

    <b-table-column field="activa" label="Activa" sortable v-slot="props">
      <span class="tag" :class="type(props.row.activa)">
        {{ props.row.activa }}
      </span>
    </b-table-column>

    <b-table-column field="editar" label="Editar" centered v-slot="props">
      <b-button
        type="is-primary"
        v-if="!props.row.folio && !props.row.monto && !props.row.fechaTicket"
        @click="editar(props.row)"
        >Editar</b-button
      >
    </b-table-column>
  </b-table>
</template>

<script>
import moment from 'moment'
export default {
  props: {
    isLoadingTable: {
      type: Boolean,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
    page: {
      type: Number,
      required: true,
    },
    onPageChange: {
      type: Function,
      require: true,
    },
    total: {
      type: Number,
      required: true,
    },
    updateIsLoadingPage: {
      type: Function,
      required: false,
      default: () => {},
    },
  },
  methods: {
    editar(data){
      localStorage.setItem("premiacion", data.premiacion)
      localStorage.setItem("idPremiacion", data.idPremiacion)
      localStorage.setItem("fecha", data.fecha)
      localStorage.setItem("hora", data.hora)
      localStorage.setItem("activa", data.activa)
      this.$router.push("/Admin/EditarPremiacion")
    },
    fecha(date) {
      const fecha = moment(date)

      return fecha.isValid() ? fecha.format('YYYY-MM-DD') : ''
    },
    type(bool) {
      if (bool === false) {
        return 'is-danger'
      } else {
        return 'is-success'
      }
    },
  },
}
</script>

<style>
.retraso {
  background: #ff7373 !important;
}

.retraso:hover {
  background: #e06464 !important;
}

.posible-multa {
  background: #ffe08a !important;
}

.posible-multa:hover {
  background: #fbdb7d !important;
}

.activo {
  background-color: #3fc36d !important;
}

.activo:hover {
  background-color: #35a058 !important;
}
</style>
