<template>
  <div class="box">
    <dir class="columns is-align-items-flex-end pl-0 pb-4">
      <b-field class="column mb-0 pb-0" label="Infracción">
        <b-input
          type="text"
          placeholder="Nombre de la infracción"
          v-model="infraccion"
          rounded
          @keyup.enter.native="
            imprimirWarning(
              '¿Está segur@ de querer crear esta infracción?',
              crearInfraccion
            )
          "
        />
      </b-field>

      <b-button
        type="is-info"
        class="column"
        @click="
          imprimirWarning(
            '¿Esta segur@ de querer crear este infracción?',
            crearInfraccion
          )
        "
        :disabled="!infraccion"
        expanded
        rounded
      >
        Crear
      </b-button>
    </dir>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    admin: { type: Object, require: true },
    imprimirMensaje: { type: Function, require: true },
    imprimirWarning: { type: Function, require: true },
    imprimirError: { type: Function, require: true },
    updateIsLoading: { type: Function, required: true },
    updateActualizarTabla: { type: Function, required: true },
  },
  data() {
    return {
      infraccion: '',
    }
  },
  methods: {
    crearInfraccion() {
      const data = {
        infraccion: this.infraccion,
      }
      this.updateIsLoading(true)
      axios
        .post(`${process.env.api}/institucion-infraccion/`, data)
        .then((res) => {
          this.updateActualizarTabla(true)
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
          this.infraccion = ''
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
  },
  created() {},
}
</script>
