<!--
 * @Author: ChenChanghua
 * @Date: 2022-04-20 21:05:26
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-07-08 11:16:52
 * @Description: file content
-->
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { jJsvRuntimeBridge, JsvFilterView } from "jsview";
import sample from "../assets/jpegDemo.jpeg";
import webpSample from "../assets/webpDemo.webp";
import AnimatePic from "./AnimatePic.vue";
import VideoLayer from "./VideoLayer.vue";

let viewId = -1;
let enableFilter = ref(true);
let filterType = reactive({
  type: "gray-down",
});

const router = useRouter();

const _onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1); // 有router时，是从DemoHomepage进入，回退
  } else {
    if (ev.keyCode == 13) {
      if (filterType.type == null) {
        filterType.type = "gray-down";
      } else {
        filterType.type = null;
      }
    }
  }
  return true;
};
onMounted(() => {
  jJsvRuntimeBridge.notifyPageLoaded();
});
</script>

<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown: _onKeyDown,
    }"
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#007788',
    }"
  >
    <div
      id="main-test"
      :style="{
        left: 400,
      }"
    >
      <jsv-filter-view
        :width="501"
        :height="401"
        ref="filter1"
        :filterType="filterType.type"
      >
        <div
          :style="{
            left: 0,
            top: 0,
            width: 400,
            height: 350,
            backgroundImage: `url(${sample})`,
          }"
        ></div>
        <!-- 测试双层FBO (FilterView + opacity变化) 的透过处理(video播放) -->
        <video-layer :top="20" :left="45" :width="310" :height="310" />
      </jsv-filter-view>
      <div
        :style="{
          left: 450,
          top: 0,
          width: 400,
          height: 350,
          backgroundImage: `url(${sample})`,
        }"
      ></div>

      <jsv-filter-view
        :top="400"
        :width="402"
        :height="402"
        ref="filter2"
        :filterType="filterType.type"
      >
        <div
          :style="{
            width: 300,
            height: 300,
            backgroundImage: `url(${webpSample})`,
          }"
        ></div>
        <!-- 测试FBO + 形变效果 -->
        <animate-pic />
      </jsv-filter-view>
      <div
        :style="{
          left: 450,
          top: 400,
          width: 300,
          height: 300,
          backgroundImage: `url(${webpSample})`,
        }"
      ></div>
    </div>
  </jsv-focus-block>
  <div
    className="guideText"
    :style="{
      left: 10,
      top: 30,
      width: 400,
      height: 800,
    }"
  >
    {{
      `1. 布局说明: \n\
  第1行第1列为黑白图(含透明动画+video)，第2列为原图\n\
  第2行第1列为黑白图(透明+变形动画)，第2列为原图\n\
\n\
2. 操作说明
  按OK键关闭/开启第1列的黑白滤镜\n\
\n\
3. 观测内容\n\
  A. 第1列是否正常切换黑白/彩色效果\n\
  B. 第1列的上下两个区域是否都含有淡出的动画
  C. 第1行第1列是否看到视频(彩色)\n\
`
    }}
  </div>
</template>

<style scoped>
.guideText {
  color: #ffffff;
  font-size: 16;
  line-height: 18;
}

@keyframes rotate {
  from {
    transform: rotate3d(0, 0, 1, 0);
  }
  to {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}
</style>