<template>
    <v-layout row justify-center>
      <v-dialog v-model="dialog_scanner" persistent max-width="290">
        
        <v-card>
          <v-card-title class="headline">Arahkan kamera ke QR / Barcode</v-card-title>
          <v-card-text>
            <div id="qr-reader" style="width:200px"></div>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-1" flat @click="startscan">mulai</v-btn>
            <v-btn color="green darken-1" flat @click="dialog_scanner = false">tutup</v-btn>
            
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-layout>
  </template>


<script>
module.exports = {
   components : {
      'one-dialog-info':httpVueLoader('../../common/oneDialogInfo.vue'),
      'one-dialog-alert':httpVueLoader('../../common/oneDialogAlert.vue')
   },
   mounted() {
        
   },
   methods : {
    startscan(){
        this.isScanning = true;
        this.html5QrCode = new Html5Qrcode("qr-reader");
        this.html5QrCode.start(
            { facingMode: "environment" },
            {
            fps: 10,
            qrbox: { width: 250, height: 250 }
            },
            this.qrCodeSuccessCallback)
        .catch(err => {
            console.error(`Error scanning QR code: ${err}`);
            this.isScanning = false;
        });
    },
    qrCodeSuccessCallback(decodedText, decodedResult){
        alert(`QR Code Content: ${decodedText}`);
    },
    
   },
   computed: {
    
      
      dialog_scanner: {
         get() {
            return this.$store.state.patient.dialog_scanner
         },
         set(val) {
            this.$store.commit("patient/update_dialog_scanner",val)
         }
      }
   },
   data() {
        return {
          isDialogVisible: false,
          isScanning: false,
          html5QrCode: null
        }
      },
   watch : {
    dialog_scanner (n, o) {
        console.log('blallal')
            if (n == true) {
                
            } else {
                if (this.isScanning && this.html5QrCode) {
                    this.html5QrCode.stop().then(() => {
                    this.isScanning = false;
                    }).catch(err => {
                    console.error('Failed to stop QR code scanning.', err);
                    });
                }
            }
        },
    }
}
</script>