<!--
 * @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 { shallowRef, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const test1 =
  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ViewOpacity/App/test_1.jpeg)";
const test2 =
  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ViewOpacity/App/test_2.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: 300,
  height: 300,
  borderRadius: 15,
};

let altOpacity = shallowRef(0.1);
let timerHandle = -1;

onMounted(() => {
  timerHandle = setInterval(() => {
    altOpacity.value += 0.3;
    if (altOpacity.value > 1.0) {
      altOpacity.value = 0.1;
    }
    console.log("Opacity set to" + altOpacity.value);
  }, 1200);
});

onUnmounted(() => {
  if (timerHandle != -1) {
    clearInterval(timerHandle);
    timerHandle = -1;
  }
});
</script>
<template>
  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
    <div class="allBgc">
      <div class="block">
        <div :style="{ left: 120, top: 0 }">
          <img
            :style="{
              ...style1,
              opacity: altOpacity,
            }"
            :src="test1"
          />
        </div>

        <div :style="{ left: 500, top: 0 }">
          <img
            :style="{
              ...style1,
              opacity: altOpacity,
            }"
            :src="test2"
          />
        </div>
      </div>
    </div>
  </jsv-focus-block>
</template>
<style scoped>
.allBgc {
  width: 1920;
  height: 1080;
  background-color: #334c4c;
}
.block {
  left: 20;
  top: 50;
}
</style>
