<template>
  <div>
    <CrearPremiacion :updateIsLoading="updateIsLoading" />
    <h2 class="has-text-centered mt-5 is-size-3">
      Administración de premiaciones
    </h2>
    <TablaPremiaciones
      :data="data"
      :isLoadingTable="isLoadingTable"
      :onPageChange="onPageChange"
      :total="total"
      :current-page="page"
      :page="page"
    />
  </div>
</template>

<script>
import TablaPremiaciones from './TablaPremiaciones.vue'
import CrearPremiacion from './CrearPremiacion.vue'
import axios from 'axios'
export default {
  components: {
    TablaPremiaciones,
    CrearPremiacion,
  },
  props: {
    updateIsLoading: {
      type: Function,
      required: true,
      default: () => {},
    },
  },
  data() {
    return {
      data: [],
      isLoadingTable: false,
      page: 1,
      total: 0,
    }
  },
  methods: {
    onPageChange(page) {
      this.page = page
      this.obtenerData()
    },
    obtenerData() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/premiacion/premiacionesPaginacion?pagina=${this.page}`,
          {
            headers: {
              token: localStorage.getItem('token'),
            },
          }
        )
        .then((res) => {
          if (res) {
            this.data = res.data.rows
            this.total = res.data.count
          }
          this.updateIsLoading(false)
        })
        .catch((err) => {
          console.log(err.response.data.message)
          this.updateIsLoading(false)
        })
    },
  },
  created() {
    this.obtenerData()
  },
}
</script>
