<template>
  <div class="full-h">
    <h2 class="has-text-centered is-size-2">Creación de Operadores</h2>
    <div class="is-flex is-justify-content-center">
      <form class="box">
        <b-field label="Usuario">
          <b-input
            type="text"
            placeholder="Digite el usuario"
            v-model="usuario"
          />
        </b-field>

        <b-field label="Contraseña">
          <b-input
            type="password"
            placeholder="Digite la contraseña"
            v-model="password"
            password-reveal
          />
        </b-field>

        <b-field label="Confirmar contraseña">
          <b-input
            type="password"
            placeholder="Digite la contraseña de nuevo"
            v-model="confirmarPassword"
            password-reveal
          />
        </b-field>

        <div class="has-text-centered">
          <b-button
            @click="confirmarEnviar()"
            type="is-success"
            :disabled="
              !(usuario && password && confirmarPassword) || !sonIguales
            "
          >
            Crear operador
          </b-button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    updateIsLoading: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      usuario: '',
      password: '',
      confirmarPassword: '',
      sonIguales: false,
    }
  },
  methods: {
    confirmarEnviar() {
      this.$swal({
        title: '¿Estás seguro de querer crear este operador?',
        type: 'question',
        timer: 9000,
        showCancelButton: true,
        cancelButtonColor: '#d33',
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      }).then((res) => {
        if (res.value) {
          this.crear()
        }
      })
    },
    success() {
      this.$swal({
        title: 'Se ha creado el operador con éxito.',
        type: 'success',
        timer: 5000,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      })
    },
    errorMessage(err) {
      this.$swal({
        title: err,
        type: 'error',
        timer: 5000,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      })
    },
    reset() {
      this.usuario = ''
      this.password = ''
      this.confirmarPassword = ''
    },
    crear() {
      this.updateIsLoading(true)
      const data = {
        usuario: this.usuario,
        password: this.password,
      }
      axios
        .post(`${process.env.api}/usuario/nuevoOperador`, data, {
          headers: {
            token: localStorage.getItem('token'),
          },
        })
        .then((res) => {
          this.updateIsLoading(false)
          this.success()
          this.reset()
        })
        .catch((err) => {
          this.error = 'is-danger'
          this.updateIsLoading(false)
          this.errorMessage(err.response.data.message)
          this.reset()
        })
    },
  },
  watch: {
    confirmarPassword() {
      if (this.password === this.confirmarPassword) this.sonIguales = true
      else this.sonIguales = false
    },
  },
}
</script>

<style scoped>
form {
  width: 80%;
}
</style>
