<template>
  <div class="columns is-justify-content-center">
    <div v-if="activo" class="column">
      <div class="columns">
        <b-field class="column">
          <b-input type="number" v-model="diasMulta" />
        </b-field>

        <BotonGuardar
          :disabled="institucionInfraccion.dias_multa == diasMulta"
          :guardar="guardar"
          msjWarning="¿Estás seguro de querer actualizar los días de multa de esta infracción?"
          :column="true"
        />
      </div>
    </div>

    <BotonEditar :editar="editar" :columnSize="'is-3'" :column="true" />
  </div>
</template>

<script>
import axios from 'axios'
import BotonEditar from '@/components/botones/BotonEditar'
import BotonGuardar from '@/components/botones/BotonGuardar'

export default {
  components: { BotonEditar, BotonGuardar },
  props: {
    updateIsLoading: { type: Function, required: true, default: () => {} },
    obtenerInfracciones: { type: Function, required: true, default: () => {} },
    institucionInfraccion: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },
  data() {
    return { diasMulta: 0, activo: false }
  },
  methods: {
    editar() {
      this.activo = !this.activo
    },
    guardar() {
      const data = {
        id_institucion_infraccion: this.institucionInfraccion
          .id_institucion_infraccion,
        dias_multa: Number(this.diasMulta),
      }

      this.updateIsLoading(true)
      axios
        .put(
          `${process.env.api}/institucion-infraccion/`,
          data,
          this.$getToken.token()
        )
        .then((res) => {
          this.obtenerInfracciones()
          this.activo = false
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
  },
  watch: {},
  created() {
    this.diasMulta = this.institucionInfraccion.dias_multa
  },
}
</script>
