<template>
  <div class="column is-4">
    <h3 class="is-size-4 mb-4">Panel de Administración</h3>

    <div class="columns">
      <div class="column">
        <b-field label="Responsable">
          <b-input type="text" v-model="responsable" />
        </b-field>

        <b-field label="Correo">
          <b-input type="email" v-model="correo" />
        </b-field>

        <b-field label="Telefono">
          <b-input type="tel" v-model="telefono" />
        </b-field>

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

        <b-field>
          <b-button
            type="is-info"
            :disabled="!responsable && !correo && !telefono && !ubicacion"
            @click="actualizarDatos()"
            expanded
          >
            Guardar
          </b-button>
        </b-field>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    buscar: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
    admin: { type: Object, required: true },
    institucion: { type: Object, required: true },
  },
  data() {
    return {
      correo: '',
      responsable: '',
      telefono: '',
      ubicacion: '',
    }
  },
  methods: {
    activar() {},
    actualizarDatos() {
      const data = { id_institucion: this.institucion.id_institucion }

      this.updateIsLoading(true)
      if (this.correo) data.correo = this.correo
      if (this.responsable) data.responsable = this.responsable
      if (this.telefono) data.telefono = this.telefono
      if (this.ubicacion) data.ubicacion = this.ubicacion
      axios
        .put(`${process.env.api}/institucion`, data)
        .then((res) => {
          this.updateIsLoading(false)
          this.buscar()
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
}
</script>

<style></style>
