<template>

    <div id="payment">
        <img v-bind:src="payreqURI" />
        <canvas id="canvas" hidden>
    </div>

</template>

<script charset="utf-8">
import QRCode from 'qrcode';

import GetWorker from './workerInterface.js';
const Worker = GetWorker('main');


export default {
    data() {
        return {
            uploadId: 0,
            invoice: {},
            payreqURI: "",
        }
    },
    mounted () {
        let self = this
        this.worker = Worker;


        this.worker.listenTo('upload-invoice', (e) => {
            console.log("received invoice ", e.data)
            self.invoice = e.data.invoice
            self.uploadId = e.data.id

        })
    },
    methods:{
        makeLnQR(payreq) {
            let canvas = this.$el.querySelector('#canvas')

            QRCode.toDataURL(canvas, payreq.toUpperCase(), {
                margin: 4,
                width: 340,
                errorCorrectionLevel: 'H',
                type: 'png',
                renderOpts:{
                    quality: 1,
                }
                })
                .then(url => {
                    this.payreqURI = url;
                })
                .catch(err =>{
                    console.error(err);
                })
        }
    },
    watch: {
        invoice: function(val) {
            this.makeLnQR(val.payreq)
        }
    },

}

</script>

<style>
img{
    width: 340px;
    height: 340px;
}
</style>
