<template>
  <main class="qrcode">
    <div class="form">
      <input
        type="text"
        v-model="data.value"
        placeholder="请在这里输入要生成的内容！"
        @change="changeValue"
      />
      <JImageUpload
        text="上传LOGO"
        ref="uploadRef"
        v-model:value="data.logoImage"
        @change="upFile"
      />
    </div>

    <div class="code" ref="code">
      <QRCodeVue3
        margin="5"
        width="400"
        height="400"
        :key="qrCodeKey"
        :value="data.value"
        :logo="data.logoImage"
      />
    </div>
  </main>
</template>

<script lang="ts" name="qrcode" setup>
import {computed, nextTick, reactive, ref} from "vue";
import { QRCodeVue3 } from '/@/components/QrcodeVue3';
import { JImageUpload } from '/@/components/Form/index';
import image from "@/assets/images/logo.png";

const uploadUrl = ref('');
const data = reactive({
  value: 'www.baidu.com',
  logoImage: image,
})

// const qrCodeKey = ref(0);

const qrCodeKey = computed(()=>data.value.length + data.logoImage.length);
// console.log(qrCodeKey.value);

function upFile(){
  // console.log(data.logoImage);
  // qrCodeKey.value = qrCodeKey.value + 1;
  // console.log(qrCodeKey.value);
}

function changeValue(){
  // qrCodeKey.value = qrCodeKey.value + 1;
}

</script>


<style lang="less">
.qrcode {
  .form {
    margin: 30px auto;
    width: 86%;

    input {
      box-sizing: border-box;
      padding: 0 10px;
      width: 80%;
      height: 50px;
      font-size: 18px;
      border: 1px solid #767676;
      border-radius: 6px 0 0 6px;
    }

    button {
      box-sizing: border-box;
      position: relative;
      width: 20%;
      height: 50px;
      font-size: 18px;
      vertical-align: top;
      color: white;
      background: #42b983;
      border: 1px solid #767676;
      border-radius: 0 6px 6px 0;
      border-left: none;
      overflow: hidden;
      cursor: pointer;

      input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
      }
    }
  }

  .code {
    margin: auto;
    padding: 8px;
    width: 360px;
    height: 360px;
    border-radius: 6px;
    border: 1px solid gray;
  }
}
</style>
