<template>
  <div class="column is-8">
    <h3 class="is-size-4 mb-4">Datos del módulo</h3>

    <div class="columns">
      <div class="column">
        <b-field label="Nombre del Módulo">
          <p class="input">{{ modulo.modulo }}</p>
        </b-field>
      </div>

      <div class="column">
        <BotonDesactivar
          :disabled="
            admin.tipoUsuario.id_tipo_usuario != 3 || !modulo.id_modulo
          "
          :activarDesactivar="activarDesactivar"
          :row="modulo"
          :msjWarning="`¿Estas segur@ de querer ${
            modulo.activo ? 'desactivar' : 'activar'
          } este módulo?`"
          labelDisabled
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import BotonDesactivar from '@/components/botones/BotonDesactivar'

export default {
  components: { BotonDesactivar },
  props: {
    admin: { type: Object, required: true },
    modulo: { type: Object, required: true },
    buscar: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      statusActivo: [
        {
          texto: 'Activo',
          tagType: 'is-success',
          activo: true,
        },
        { texto: 'Inactivo', tagType: 'is-danger', activo: false },
      ],
    }
  },
  methods: {
    activarDesactivar() {
      const data = {
        id_modulo: this.modulo.id_modulo,
        activo: !this.modulo.activo,
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/modulo`, data, this.$getToken.token())
        .then((res) => {
          this.buscar()
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, this.$router, err)
        })
    },
  },
}
</script>

<style></style>
