<template>
  <section class="mb-6">
    <h3 class="is-size-4 mb-3">Crear Administradores</h3>

    <div class="box">
      <div class="columns is-align-items-flex-end pl-0 pb-4">
        <InstitucionSelect
          :idInstitucion="
            typeof idInstitucion === 'undefined' ? 0 : idInstitucion
          "
          :updateIdInstitucion="updateIdInstitucion"
        />

        <b-field class="column mb-0 pb-0" label="Administrador">
          <b-input
            type="text"
            placeholder="Administrador"
            icon="account"
            @keyup.enter.native="
              $alertsGenericos.imprimirWarning(
                $buefy,
                '¿Esta segur@ de querer crear este admin?',
                crearAdmin
              )
            "
            v-model="operador"
            rounded
          />
        </b-field>

        <b-field class="column mb-0 pb-0" label="Correo">
          <b-input
            icon="mail"
            placeholder="Correo"
            type="email"
            @keyup.enter.native="
              $alertsGenericos.imprimirWarning(
                $buefy,
                '¿Esta segur@ de querer crear este admin?',
                crearAdmin
              )
            "
            v-model="correo"
            rounded
          />
        </b-field>

        <b-field class="column mb-0 pb-0" label="Nombre">
          <b-input
            icon="account"
            placeholder="Nombre"
            type="text"
            @keyup.enter.native="
              $alertsGenericos.imprimirWarning(
                $buefy,
                '¿Esta segur@ de querer crear este admin?',
                crearAdmin
              )
            "
            v-model="nombre"
            rounded
          />
        </b-field>

        <b-field class="column">
          <b-button
            type="is-info"
            @click="
              $alertsGenericos.imprimirWarning(
                $buefy,
                '¿Esta segur@ de querer crear este admin?',
                crearAdmin
              )
            "
            :disabled="!operador || !idInstitucion || !correo || !nombre"
            expanded
            rounded
          >
            Crear
          </b-button>
        </b-field>
      </div>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
import InstitucionSelect from '@/components/admin/InstitucionSelect'

export default {
  components: { InstitucionSelect },
  props: {
    admin: { type: Object, required: true },
    updateActualizarTabla: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      correo: '',
      idInstitucion: 0,
      nombre: '',
      operador: '',
    }
  },
  methods: {
    crearAdmin() {
      if (this.operador && this.idInstitucion && this.correo && this.nombre) {
        const data = {
          correo: this.correo,
          id_institucion: this.idInstitucion,
          id_tipo_usuario: 3,
          nombre: this.nombre,
          operador: this.operador,
        }

        console.log('Hola')
        console.log(data)

        this.updateIsLoading(true)
        axios
          .post(`${process.env.api}/operador`, data, this.$getToken.token())
          .then((res) => {
            this.idInstitucion = 0
            this.operador = ''
            this.correo = ''
            this.nombre = ''
            this.updateIsLoading(false)
            this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
            this.updateActualizarTabla(true)
          })
          .catch((err) => {
            this.updateIsLoading(false)
            this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
          })
      }
    },
    updateIdInstitucion(idInstitucion) {
      this.idInstitucion = idInstitucion
    },
  },
}
</script>

<style></style>
