<script setup>
import jpegDemo from "../assets/jpegDemo.jpeg";
import pngDemo from "../assets/pngDemo.png";
import pngNoAlphaDemo from "../assets/pngNoAlphaDemo.png";
import bmpDemo from "../assets/bmpDemo.bmp";
import { useRouter } from "vue-router";

const router = useRouter();

const onKeyDown = (ev) => {
  // 8:Backspace, 27:Escape, 10000:盒子返回键
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    window.JsvCoreApi?.setRenderGlobalConfig({
      texCache: -1,
    });

    router.go(-1); // 有router时，是从DemoHomepage进入，回退
    return true;
  }

  return false;
};
</script>

<template>
  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
    <div class="allBgc">
      <div class="block">
        <div :style="{ left: 0, top: 0 }">
          <div class="leftFont top0">
            {{ `RBG_8888\n透明区域透明\n色彩不失真` }}
          </div>
          <div class="leftFont top250">
            {{ `RBG_565\n透明区域为黑色\n色彩略失真` }}
          </div>
        </div>

        <div :style="{ left: 220, top: 0 }">
          <img class="graphSize top0" :src="bmpDemo" />
          <img
            class="graphSize top250"
            data-jsv-img-color-space="RGB_565"
            :src="bmpDemo"
          />
          <div class="underFont">
            {{ `bmp图片` }}
          </div>
        </div>

        <div :style="{ left: 440, top: 0 }">
          <img class="graphSize top0" :src="jpegDemo" />
          <img
            class="graphSize top250"
            data-jsv-img-color-space="RGB_565"
            :src="jpegDemo"
          />
          <div class="underFont">
            {{ "jpg/jpeg图片" }}
          </div>
        </div>

        <div :style="{ left: 660, top: 0 }">
          <img class="graphSize top0" :src="pngDemo" />
          <img
            class="graphSize top250"
            data-jsv-img-color-space="RGB_565"
            :src="pngDemo"
          />
          <div class="underFont">
            {{ `png有透明图片\nandroid透明部分为黑色\nwebassembly全为黑色 ` }}
          </div>
        </div>

        <div :style="{ left: 880, top: 0 }">
          <img class="graphSize top0" :src="pngNoAlphaDemo" />
          <img
            class="graphSize top250"
            data-jsv-img-color-space="RGB_565"
            :src="pngNoAlphaDemo"
          />
          <div class="underFont">
            {{ `png无透明图片\nwebassembly为黑色` }}
          </div>
        </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: 200;
  height: 200;
  color: #ffffff;
  font-size: 30;
}
.top0 {
  top: 0;
}
.top250 {
  top: 250;
}
.graphSize {
  left: 0;
  width: 200;
  height: 200;
  border-radius: 15 15 15 15;
}
.underFont {
  left: 0;
  top: 500;
  width: 200;
  height: 200;
  color: #ffffff;
  font-size: 20;
}
</style>
