<template>
  <div :style="{width: 1280, height: 720, backgroundColor: '#007788'}"></div>
  <div
    :style="{
      left: 100,
      top: 100,
    }"
  >
    <JigsawFull
      :imgInfo="{ src: imageSrc, width: 654, height: 654 }"
      :strokeSrc="strokeSrc"
      :size="{
        width: 327,
        height: 327,
      }"
      :configUrl="jsonSrc"
      :displaySetting="[1, 0, 1, 1]"
    />
  </div>

  <div
    :style="{
      left: 300,
      top: 100,
    }"
  >
    <JigsawSingle
      :imgInfo="{ src: imageSrc, width: 654, height: 654 }"
      :size="{
        width: 327,
        height: 327,
      }"
      :configUrl="jsonSrc"
      :pieceIndex="1"
    />
  </div>
</template>
<script setup>
import JigsawFull from "./JigsawFull.vue";
import JigsawSingle from "./JigsawSingle.vue";

const jsonSrc = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Jigsaw/App/config.json";
const imageSrc = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Jigsaw/App/php.jpg";
const strokeSrc = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Jigsaw/App/stroke.png";
</script>
