<template>
  <b-table
    :data="multas"
    :loading="isLoadingTable"
    :row-class="(row, index) => 'pointer'"
    class="mb-6"
    :per-page="25"
    @page-change="onPageChange"
    show-detail-icon
    paginated
    detailed
  >
    <b-table-column
      field="usuario"
      label="Número de cuenta/trabajador"
      v-slot="props"
      v-if="columnaUsuario"
      centered
    >
      <span>{{ props.row.prestamo.usuario.usuario }}</span>
    </b-table-column>

    <b-table-column
      field="fechaInicio"
      label="Fecha Inicio"
      v-slot="props"
      centered
    >
      <span>{{ fechaHora(props.row.fecha_inicio) }}</span>
    </b-table-column>

    <b-table-column field="fechaFin" label="Fecha Fin" v-slot="props" centered>
      <span>{{ fechaHora(props.row.fecha_fin) }}</span>
    </b-table-column>

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

    <template #detail="props">
      <div class="columns">
        <div class="column is-1"></div>
        <div class="column has-text-centered is-size-5 detail-item">
          <b>Descripción:</b>
        </div>
        <div class="column has-text-centered is-size-5 detail-item">
          <b>Infracción extra:</b>
        </div>
        <div class="column has-text-centered is-size-5 detail-item">
          <b>Retraso:</b>
        </div>
      </div>
      <div class="container columns">
        <div class="column is-1"></div>
        <div class="column has-text-centered is-size-6 detail-item">
          {{ props.row.descripcion }}
        </div>
        <div
          v-if="props.row.institucionInfraccion.infraccion.infraccion"
          class="column has-text-centered is-size-6 detail-item"
        >
          {{ props.row.institucionInfraccion.infraccion.infraccion }}
        </div>
        <div v-else class="column has-text-centered is-size-6 detail-item">
          No hay infracción adicional
        </div>
        <div class="column has-text-centered is-size-6 detail-item">
          <span class="is-size-6 tag" :class="choooseTag(props.row.retraso)">{{
            props.row.retraso ? 'Verdadero' : 'Falso'
          }}</span>
        </div>
      </div>
    </template>
    <template #empty>
      <div class="has-text-centered">
        <p class="is-size-6">No hay usuarios</p>
      </div>
    </template>
  </b-table>
</template>

<script>
import moment from 'moment'
import TablaEquiCarritos from '@/components/operador/TablaEquiCarritos'

export default {
  components: { TablaEquiCarritos },
  props: {
    operador: { type: Object, required: true },
    multas: { type: Array, required: true },
    page: { type: Number, required: true },
    total: { type: Number, required: true },
    onPageChange: { type: Function, required: true },
    isLoadingTable: { type: Boolean, required: true },
    columnaUsuario: { type: Boolean, required: true },
  },
  data() {
    return {
      selectedMulta: {},
    }
  },
  methods: {
    choooseTag(activo) {
      const style = {
        false: 'is-danger',
        true: 'is-success',
      }
      return style[activo]
    },
    fechaHora(date) {
      const fecha = moment(date)

      return fecha.isValid() ? fecha.format('YYYY-MM-DD HH:mm') : ''
    },
  },
}
</script>

<style>
.pointer {
  cursor: pointer;
}

.detail-item {
  padding: 0;
}
</style>
