<!--
 * @Author: ChenChanghua
 * @Date: 2022-04-20 21:05:26
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-07-08 11:16:52
 * @Description: file content
-->
<script setup>
import { onMounted, onUnmounted, shallowRef } from "vue";
import { useRouter } from "vue-router";
import AnimatePic from "./AnimatePic.vue";
import { jJsvRuntimeBridge, JsvTextureStoreApi, JsvFilterView } from "jsview";

const router = useRouter();

const vCapturedTexture = shallowRef(null);
// const vCapturedTexture = shallowRef("123");
const vToCapture = shallowRef(null);

window.MyCapture = vToCapture;

const _onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
    return true;
  }
};

let loopCaptureTimer = -1;

onMounted(() => {
  jJsvRuntimeBridge.notifyPageLoaded();

  loopCaptureTimer = setInterval(() => {
    JsvTextureStoreApi.capture2Texture(
      vToCapture.value,
      (textureName, autoRecycle, w, h) => {
        vCapturedTexture.value = textureName;
        console.log(`capture done id=${textureName} w=${w} h=${h}`);

        if (autoRecycle) {
          // 已经是设置了texture的自动回收，所以不再需要主动调用 JsvTextureStoreApi.deleteTexture 来释放内存
        }
      },
      true // 自动回收, 不填也行，默认为true
    );
  }, 2200);
});

onUnmounted(() => {
  if (loopCaptureTimer != -1) {
    clearInterval(loopCaptureTimer);
    loopCaptureTimer = -1;
  }
});
</script>

<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown: _onKeyDown,
    }"
  >
    <div
      :style="{
        textAlign: 'center',
        fontSize: 30,
        lineHeight: 50,
        color: '#ffffff',
        left: 140,
        top: 20,
        width: 1000,
        height: 50,
        backgroundColor: 'rgba(27,38,151,0.8)',
      }"
    >
      左边的div会被制成快照(每2秒)显示在右图
    </div>
    <div
      ref="vToCapture"
      :style="{
        left: 140,
        top: 200,
        width: 300, // 截屏区域的宽
        height: 300, // 截屏区域的高
      }"
    >
      <jsv-filter-view :width="300" :height="300">
        <div
          :style="{
            width: 300,
            height: 300,
            backgroundColor: 'rgb(128, 128, 0)',
          }"
        />
        <animate-pic />
      </jsv-filter-view>
    </div>

    <div
      v-if="vCapturedTexture != null"
      :style="{
        top: 200,
        left: 650,
        width: 150,
        height: 150,
        backgroundImage: `jsvtexturestore://${vCapturedTexture}`,
      }"
    />
  </jsv-focus-block>
</template>

<style scoped></style>
