<script setup>
import { shallowRef } from "vue";
import { JsvQrcode } from "jsview";
import { useRouter } from "vue-router";

const router = useRouter();
let qrUrl = shallowRef("http://www.baidu.com/");
const size = 200;
const fgColor = "#0000FF";
const bgColor = "#ffff00";
const level = "H"; // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
const includeImage = true;
const imageH = 64;
const imageW = 64;
const imageSrc =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/QrcodeDemo/App/0fdcdc8b258fe7baac16b73f58f8989d.jpg";
const tipsInfo = `功能：二维码展示可配置项：

1.前景色

2.背景色

3.指定小图标

4.容错级别：'L', 'M', 'Q', 'H'

5.按OK刷新:上图为异步(不影响操作)，下图为同步`;
const onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1); // 有router时，是从DemoHomepage进入，回退
  } else if (ev.keyCode == 13) {
    qrUrl.value = qrUrl.value + "a";
    console.log("new url=" + qrUrl.value);
  }
  return true;
};
</script>

<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown: onKeyDown,
    }"
  >
    <div :style="{ width: 1280, height: 720, backgroundColor: '#D8D8D8' }">
      <div
        :style="{
          textAlign: 'left',
          fontSize: 25,
          lineHeight: 30,
          color: '#ffffff',
          left: 200 + 420,
          top: 100,
          width: 400,
          height: 50 * 8,
          backgroundColor: 'rgba(27,38,151,0.8)',
        }"
      >
        {{ tipsInfo }}
      </div>
      <div :style="{ left: 200, top: 100 }">
        <jsv-qrcode
          :key="qrUrl"
          :value="qrUrl"
          :size="size"
          :fgColor="fgColor"
          :bgColor="bgColor"
          :level="level"
          :imageSettings="
            includeImage
              ? { src: imageSrc, height: imageH, width: imageW }
              : null
          "
        />
      </div>
      <div :style="{ left: 200, top: 310 }">
        <jsv-qrcode
          :key="qrUrl"
          :value="qrUrl"
          :size="size"
          :fgColor="fgColor"
          :bgColor="bgColor"
          :level="level"
          sync="sync"
          :imageSettings="
            includeImage
              ? { src: imageSrc, height: imageH, width: imageW }
              : null
          "
        />
      </div>
    </div>
  </jsv-focus-block>
</template>
