<template>
  <div class="columns is-vcentered">
    <b-field class="column is-8 m-0">
      <b-input
        type="password"
        placeholder="Contraseña Nueva"
        icon="lock"
        @keyup.enter.native="
          $alertsGenericos.imprimirWarning(
            $buefy,
            '¿Esta segur@ de querer camibar la contraseña de este operador?',
            updatePassword
          )
        "
        v-model="newPassword"
        rounded
        password-reveal
      />
    </b-field>

    <div class="column">
      <b-button
        type="is-info"
        :disabled="!newPassword"
        @click="
          $alertsGenericos.imprimirWarning(
            $buefy,
            '¿Esta segur@ de querer camibar la contraseña de este operador?',
            updatePassword
          )
        "
        expanded
        rounded
      >
        Cambiar
      </b-button>
    </div>

    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      newPassword: '',
      isLoading: false,
    }
  },
  props: {
    admin: { type: Object, required: true },
    updateIsLoading: { type: Function, required: true },
    operador: { type: Object, required: true },
  },
  methods: {
    updatePassword() {
      if (this.newPassword) {
        const data = {
          idOperador: this.operador.idOperador,
          password: this.newPassword,
        }

        this.isLoading = true
        axios
          .put(`${process.env.api}/operador/update`, data, this.admin.token)
          .then((res) => {
            this.newPassword = ''
            this.isLoading = false
            this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
          })
          .catch((err) => {
            this.isLoading = false
            this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
          })
      }
    },
  },
}
</script>

<style></style>
