<template>
  <b-tab-item label="Motivos">
    <div class="has-text-centered">
      <BotonDescargarCatalogo
        campo="reporte"
        :nombreArchivo="`reporte_motivos_${modulo.modulo}`"
        :obtener="obtenerMotivosReporte"
        v-if="admin.tipoUsuario.id_tipo_usuario === 3"
      />
    </div>

    <TablaMotivosModulo
      :motivos="motivos"
      :page="page"
      :total="total"
      :isLoadingTable="isLoadingTable"
      :onPageChange="onPageChange"
    />
  </b-tab-item>
</template>

<script>
import axios from 'axios'
import moment from 'moment'
import BotonDescargarCatalogo from '@/components/botones/BotonDescargarCatalogo'
import TablaMotivosModulo from '@/components/tablas/TablaMotivosModulo'

export default {
  components: { BotonDescargarCatalogo, TablaMotivosModulo },
  props: {
    admin: { type: Object, required: true, default: () => ({}) },
    modulo: { type: Object, required: true, default: () => ({}) },
  },
  data() {
    return { motivos: [], page: 1, total: 0, isLoadingTable: false }
  },
  methods: {
    obtenerMotivos() {
      this.isLoadingTable = true
      return axios
        .get(
          `${process.env.api}/modulo-motivo?pagina=${this.page}&id_modulo=${this.modulo.id_modulo}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.motivos = res.data[0]
          this.total = res.data[1]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
        })
    },
    obtenerMotivosReporte() {
      return axios
        .get(
          `${process.env.api}/modulo-motivo/reporte?id_modulo=${this.modulo.id_modulo}`,
          this.$getToken.token()
        )
        .then((res) => {
          const data = []

          for (let i = 0; i < res.data.length; i++)
            data.push({
              id_motivo: res.data[i].id_motivo,
              fecha_creacion: moment(res.data[i].fecha_creacion).format(
                'DD/MM/YYYY'
              ),
              motivo: res.data[i].motivo,
              numero_alumnos: res.data[i].numero_alumnos,
              operador: res.data[i].operador.operador,
            })
          return data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    onPageChange(page) {
      this.page = page
      this.obtenerMotivos()
    },
  },
  watch: {
    modulo() {
      this.obtenerMotivos()
    },
  },
}
</script>

<style></style>
