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

    <div class="box">
      <dir class="columns is-align-items-flex-end pl-0 pb-4">
        <b-field class="column mb-0 pb-0" label="Operador">
          <b-input
            type="text"
            placeholder="Operador"
            icon="account"
            v-model="operador"
            rounded
            @keyup.enter.native="
              imprimirWarning(
                '¿Esta segur@ de querer crear este operador?',
                crearOperador
              )
            "
          />
        </b-field>

        <b-field class="column mb-0 pb-0" label="Contraseña">
          <b-input
            type="password"
            placeholder="Contraseña"
            icon="lock"
            v-model="password"
            rounded
            @keyup.enter.native="
              imprimirWarning(
                '¿Esta segur@ de querer crear este operador?',
                crearOperador
              )
            "
          />
        </b-field>

        <b-button
          type="is-info"
          class="column"
          @click="
            imprimirWarning(
              '¿Esta segur@ de querer crear este operador?',
              crearOperador
            )
          "
          :disabled="!operador || !password"
          expanded
          rounded
        >
          Crear
        </b-button>
      </dir>
    </div>
  </section>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      operador: '',
      password: '',
    }
  },
  props: {
    admin: { type: Object, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    updateActualizarTabla: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  methods: {
    crearOperador() {
      if (this.password && this.operador) {
        let data = {
          id_institucion: this.admin.institucion.id_institucion,
          id_tipo_usuario: 4,
          operador: this.operador,
          password: this.password,
        }

        this.updateIsLoading(true)
        axios
          .post(`${process.env.api}/operador`, data)
          .then((res) => {
            this.operador = ''
            this.password = ''
            this.updateIsLoading(false)
            this.imprimirMensaje(res.data.message)
            this.updateActualizarTabla(true)
          })
          .catch((err) => {
            this.updateIsLoading(false)
            this.imprimirError(err.response.data)
          })
      }
    },
  },
}
</script>

<style></style>
