<template>
  <QrcodeStream @decode="onDecode"> </QrcodeStream>
</template>

<script>
import { QrcodeStream } from 'vue-qrcode-reader'

export default {
  components: { QrcodeStream },
  props: {
    enviar: { type: Function, required: true },
  },
  data() {
    return {
      idProfesor: '',
      idPremiacion: '',
      leyendo: false,
      isLoading: false,
    }
  },
  methods: {
    onDecode(decodedString) {
      try {
        const data = JSON.parse(decodedString)
        this.idProfesor = data.idProfesor
        this.idPremiacion = data.idPremiacion
      } catch (err) {
        this.idProfesor = ''
        this.idPremiacion = ''
        console.log(err)
        this.errorMessage()
      }
      if (this.idProfesor && this.idPremiacion) {
        this.enviar(this.idProfesor, this.idPremiacion)
      }
    },
    errorMessage() {
      this.$swal({
        title: 'El QR ingresado no es válido.',
        type: 'error',
        timer: 5000,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      })
    },
  },
}
</script>

<style>
video {
  width: 100%;
}

.laser,
.overlay-element {
  display: none;
}
</style>
