<template>
  <div>
    <div class="columns is-centered">
      <div class="column is-4">
        <b-field label="Nombre de la Institución">
          <b-select v-model="idInstitucion" expanded>
            <option value="" disabled>Institución</option>
            <option
              v-for="institucion in instituciones"
              :value="institucion.id_institucion"
              :key="institucion.id_insitucion"
            >
              {{ institucion.institucion }}
            </option>
          </b-select>
        </b-field>

        <b-field label="Ubicación">
          <b-input v-model="ubicacion" />
        </b-field>
      </div>

      <div class="column is-4">
        <b-field label="Nombre del responsable">
          <b-input v-model="responsable" />
        </b-field>

        <b-field label="Teléfono">
          <b-input type="number" v-model="telefono" />
        </b-field>
      </div>
    </div>

    <div class="has-text-centered">
      <b-button
        class="my-5"
        type="is-success"
        @click="activarInstitucion"
        v-if="idInstitucion && responsable && ubicacion && telefono"
        >Activar</b-button
      >
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    admin: { type: Object, required: true },
    obtenerCatalogoInstitucionesAc: { type: Function, require: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      idInstitucion: '',
      instituciones: [],
      institucion: {},

      ubicacion: '',
      responsable: '',
      telefono: '',
      dominio: '',
    }
  },
  methods: {
    obtenerCatalogoInstituciones() {
      axios
        .get(`${process.env.api}/institucion`)
        .then((res) => {
          this.instituciones = res.data
        })
        .catch((err) => {
          this.imprimirError(err)
        })
    },
    activarInstitucion() {
      const data = {
        id_institucion: Number(this.idInstitucion),
        activo: true,
        dias_multa_retraso: 7,
        responsable: this.responsable,
        telefono: this.telefono,
        tiempo_entrega: 15,
        tiempo_prestamo: 120,
        tiempo_recoger: 15,
        ubicacion: this.ubicacion,
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/institucion`, data)
        .then((res) => {
          this.institucion = res.data
          this.updateIsLoading(false)
          this.obtenerCatalogoInstitucionesAc()
          this.imprimirMensaje(res.data.message)
          this.clear()
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    clear() {
      this.dominio = ''
      this.responsable = ''
      this.telefono = ''
      this.ubicacion = ''
    },
  },
  created() {
    this.obtenerCatalogoInstituciones()
  },
}
</script>
