<template>
  <b-tab-item label="Incidencias">
    <TablaMultas
      :multas="multas"
      :page="page"
      :total="total"
      :isLoadingTable="isLoadingTable"
      :onPageChange="onPageChange"
    />
  </b-tab-item>
</template>

<script>
import axios from 'axios'
import TablaMultas from '@/components/tablas/TablaMultas'

export default {
  components: { TablaMultas },
  props: {
    usuario: { type: Object, required: true, default: () => ({}) },
  },
  data() {
    return {
      multas: [],
      page: 1,
      total: 0,
      isLoadingTable: false,
    }
  },
  methods: {
    onPageChange(page) {
      this.page = page
      this.obtenerMultas()
    },
    obtenerMultas() {
      this.isLoadingTable = true
      return axios
        .get(
          `${process.env.api}/multa/multas-usuario?pagina=${this.page}&id_usuario=${this.usuario.id_usuario}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.multas = res.data[0]
          this.total = res.data[1]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
        })
    },
  },
  watch: {
    usuario() {
      this.obtenerMultas()
    },
  },
}
</script>

<style></style>
