<template>
  <div v-if="globalStore.finishLoading"> 
    <div v-if="read">
      <div class="stream">
        <qr-stream @decode="onDecode" class="mb">
          <div style="color: red" class="frame"></div>
        </qr-stream>

        <br />
        <qr-capture @decode="onDecode" class="mb"></qr-capture>
      </div>
      <div class="row justify-center q-ma-sm">
        <q-btn
          v-if="data && data.startsWith('http')"
          class="q-ma-sm"
          dense
          color="positive"
          @click="tools.openUrl(data)"
          label="APRI PAGINA"
        >
        </q-btn>
        <br />
        <div v-if="data && data.startsWith('http')" class="result">
          Link: {{ data }}
        </div>
      </div>
    </div>
    <div v-else>
      <div class="q-ma-sm">
        {{ textlink }}<br />
        {{ link }}<br />
        Logo: {{imglogo}}<br />
      </div>
      <qrcode-vue
        :width="250"
        :height="250"
        :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
        :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
        :dotsOptions="{
          type: 'dots',
          color: '#26249a',
          gradient: {
            type: 'linear',
            rotation: 0,
            colorStops: [
              { offset: 0, color: '#26249a' },
              { offset: 1, color: '#26249a' },
            ],
          },
        }"
        :image="imglogo ? imglogo : tools.getimglogo()"
        :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
        :cornersDotOptions="{ type: undefined, color: '#000000' }"
        fileExt="png"
        :download="true"
        :value="link"
        downloadButton="button_download"
        :downloadOptions="{
          name: 'qrcode-riso-' + userStore.my.username,
          extension: 'png',
        }"
      />
    </div>
  </div>
</template>

<script lang="ts" src="./CQRCode.ts">
</script>
<style lang="scss" scoped>
@import './CQRCode.scss';
</style>
