<!-- 会话输入框 -->

<template>
  <div class="UqrCode">
    <!-- <canvas id="qrcode" width="200" height="200"></canvas> -->
    <div class="qrcode_center mx-auto flex justify-center items-center">
      <svg id="qrcodesvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
    </div>
  </div>
</template>

<script setup>
import {_list} from '@/api/app'
import {useRoute} from 'vue-router'
import useAppStore from '@store/modules/app'
import UQRCode from 'uqrcodejs' // npm install uqrcodejs
import logo from '@assets/logo/logo.png'

const props = defineProps({
  UqrUrl: {
    type: String,
    default: 'https://www.baidu.com/'
  }
})
const route = useRoute()
const appStore = useAppStore()
const state = reactive({
  mode: 'cyy',
  inputValue: '',
  cyyList: []
})

const onLinke = (data) => {
  // 获取uQRCode实例
  var qr = new UQRCode()
  // 设置二维码内容
  qr.data = props.UqrUrl
  // 设置二维码大小，必须与canvas设置的宽高一致
  qr.size = 200
  // 调用制作二维码方法
  qr.make()
  // 获取canvas元素
  var canvas = document.getElementById('qrcode')
  // 获取canvas上下文
  var canvasContext = canvas.getContext('2d')
  // 设置uQRCode实例的canvas上下文
  qr.canvasContext = canvasContext
  // 调用绘制方法将二维码图案绘制到canvas上
  qr.drawCanvas()
}

const onCode = () => {
  // 获取uQRCode实例
  var qr = new UQRCode()
  // 设置二维码内容
  qr.data = props.UqrUrl
  // 设置二维码大小，必须与canvas设置的宽高一致
  qr.size = 200
  // 设置二维码前景图，可以是路径
  qr.foregroundImageSrc = logo
  // 调用制作二维码方法
  qr.make()

  var drawModules = qr.getDrawModules()
  // 遍历drawModules创建svg元素
  var qrHtml = ''
  for (var i = 0; i < drawModules.length; i++) {
    var drawModule = drawModules[i]
    switch (drawModule.type) {
      case 'tile':
        /* 绘制小块 */
        qrHtml += `<rect x="${drawModule.x}" y="${drawModule.y}" width="${drawModule.width}" height="${drawModule.height}" style="fill: ${drawModule.color};" />`
        break
      case 'image':
        /* 绘制图像 */
        qrHtml += `<image href="${drawModule.imageSrc}" x="${drawModule.x}" y="${drawModule.y}" width="${drawModule.width}" height="${drawModule.height}" style="border: 1px solid red" />`
        break
    }
  }
  document.getElementById('qrcodesvg').innerHTML = qrHtml
}

// onMounted
onMounted(async () => {
  await nextTick()
  onCode()
})

watch(
  () => props.UqrUrl,
  async (val) => {
    console.log('二维码刷新')
    await nextTick()
    onCode()
  },
  {deep: true}
)

defineExpose({})
</script>

<style lang="scss" scoped>
.UqrCode {
  .qrcode_center {
    width: 220px;
    height: 220px;
    border: 2px solid #333;
    border-radius: 2px;
  }
}
</style>
