<template>
  <div class="column is-4">
    <h3 class="is-size-4 mb-4">Alta del administrador</h3>

    <div class="columns">
      <div class="column">
        <b-field
          label="Responsable"
          v-show="admin.tipoUsuario.id_tipo_usuario === 2"
        >
          <b-input
            type="text"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.responsable"
            :disabled="!institucion.id_institucion"
            v-model="responsable"
          />
        </b-field>

        <b-field
          label="Correo"
          v-show="admin.tipoUsuario.id_tipo_usuario === 2"
        >
          <b-input
            type="email"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.correo"
            :disabled="!institucion.id_institucion"
            v-model="correo"
          />
        </b-field>

        <b-field
          label="Telefono"
          v-show="admin.tipoUsuario.id_tipo_usuario === 2"
        >
          <b-input
            type="tel"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.telefono"
            :disabled="!institucion.id_institucion"
            v-model="telefono"
          />
        </b-field>

        <b-field
          label="Ubicación"
          v-show="admin.tipoUsuario.id_tipo_usuario === 2"
        >
          <b-input
            type="text"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.ubicacion"
            :disabled="!institucion.id_institucion"
            v-model="ubicacion"
          />
        </b-field>

        <b-field
          label="Dominio"
          v-show="admin.tipoUsuario.id_tipo_usuario === 3"
        >
          <b-input
            type="text"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.ubicacion"
            :disabled="!institucion.id_institucion"
            v-model="dominio"
          />
        </b-field>

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

        <b-field v-show="admin.tipoUsuario.id_tipo_usuario === 2">
          <b-button type="is-link" @click="activarDesactivar()" expanded>
            Activar/Desactivar
          </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: '',
      dominio: '',
    }
  },
  methods: {
    activarDesactivar() {
      const data = {
        id_institucion: this.institucion.id_institucion,
        activo: !this.institucion.activo,
      }

      this.updateIsLoading(true)
      console.log(data)
      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)
        })
    },
    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
      // if (this.dominio) {
      //   data.email_institucional = true
      //   data.dominio = this.dominio
      // } else if ((!this.dominio, this.admin.institucion.id_institucion === 3)) {
      //   data.email_institucional = false
      //   data.dominio = this.dominio
      // }
      axios
        .put(`${process.env.api}/institucion`, data)
        .then((res) => {
          if (this.correo) this.correo = ''
          if (this.responsable) this.responsable = ''
          if (this.telefono) this.telefono = ''
          if (this.ubicacion) this.ubicacion = ''
          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>
