<!--
 * @Author: ChenChanghua
 * @Date: 2022-10-24 13:19:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-13 11:20:12
 * @Description: file content
-->
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();

const test1 =
  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ScaleDownNeon/App/test_1.jpeg)";
const test2 =
  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ScaleDownNeon/App/test_2.jpeg)";
const test3 =
  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ScaleDownNeon/App/test_3.jpeg)";
const test4 =
  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ScaleDownNeon/App/test_4.jpeg)";

const onKeyDown = (ev) => {
  // 8:Backspace, 27:Escape, 10000:盒子返回键
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    // 关掉TextureCache(通过将waterLevel设置成-1)
    window.JsvCoreApi.setRenderGlobalConfig({
      texCache: -1,
    });

    router.go(-1); // 有router时，回退
    return true;
  }
  return false;
};

const style1 = {
  left: 0,
  top: 0,
  width: 250,
  height: 250,
  borderRadius: 15,
};

const style2 = {
  left: 0,
  top: 260,
  width: 250,
  height: 250,
  borderRadius: 15,
};
</script>
<template>
  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
    <div class="allBgc">
      <div class="block">
        <div :style="{ left: 0, top: 0 }">
          <div class="leftFont top0">
            {{ `原图加载` }}
          </div>
          <div class="leftFont top250">
            {{ `使用缩小算法优化` }}
          </div>
        </div>

        <div :style="{ left: 120, top: 0 }">
          <img alt="" :style="style1" :src="test4" />
          <img alt="" :style="style2" data-jsv-img-scaledown-tex :src="test4" />
        </div>

        <div :style="{ left: 380, top: 0 }">
          <img alt="" :style="style1" :src="test1" />
          <img alt="" :style="style2" data-jsv-img-scaledown-tex :src="test1" />
        </div>

        <div :style="{ left: 640, top: 0 }">
          <img alt="" :style="style1" :src="test2" />
          <img alt="" :style="style2" data-jsv-img-scaledown-tex :src="test2" />
        </div>

        <div :style="{ left: 900, top: 0 }">
          <img alt="" :style="style1" :src="test3" />
          <img alt="" :style="style2" data-jsv-img-scaledown-tex :src="test3" />
        </div>
      </div>
    </div>
  </jsv-focus-block>
</template>
<style scoped>
.allBgc {
  width: 1920;
  height: 1080;
  background-color: #334c4c;
}
.block {
  left: 20;
  top: 50;
}
.leftFont {
  left: 0;
  width: 100;
  height: 200;
  color: #ffffff;
  font-size: 25;
}
.top0 {
  top: 0;
}
.top250 {
  top: 250;
}
</style>
