pcpuma_unam_operador/components/operador/BotonDesactivar.vue

<template>
  <b-field>
    <b-button
      :type="data.activo || data.mostrar ? 'is-success' : 'is-danger'"
      @click="
        $alertsGenericos.imprimirWarning(
          $buefy,
          mensajeWarning,
          llamarCambiarStatus
        )
      "
      expanded
    >
      {{ data.activo || data.mostrar ? 'Activo' : 'Inactivo' }}
    </b-button>
  </b-field>
</template>

<script>
export default {
  props: {
    admin: { type: Object, required: true },
    data: { type: Object, required: true },
    tipo: { type: String, required: true },
    cambiarStatus: { type: Function, required: true },
  },
  deta() {
    return {
      mensajeWarning: '',
    }
  },
  methods: {
    //Al tener un componente global, la data hace referencia ya sea al módulo, carrito o equipo"
    llamarCambiarStatus() {
      if (this.data.activo || this.data.mostrar)
        this.cambiarStatus(this.data, false)
      else this.cambiarStatus(this.data, true)
    },
    crearMensajeWarning() {
      this.data.activo || this.data.mostrar
        ? (this.mensajeWarning = `¿Estás segur@ de querer desactivar este ${this.tipo}?`)
        : (this.mensajeWarning = `¿Estás segur@ de querer activar este ${this.tipo}?`)
    },
  },
  watch: {
    data() {
      this.crearMensajeWarning()
    },
  },
  created() {
    this.crearMensajeWarning()
  },
}
</script>