<script setup>
import {
  jJsvRuntimeBridge,
  getKeyFramesGroup,
  JsvTextureAnim,
  DefaultKeyCodeMap,
} from "jsview";
import img from "./assets/borderOpacity.png";
import swipLight from "./assets/swipLight.png";
import { onMounted, onBeforeUnmount, shallowRef } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const styleShell = getKeyFramesGroup();
const translateTransform = "translate3d(50%, 50%, 0)";
const rotateTransform = "rotate3d(1,1,1, 30deg)";
const scaleTransform = "scale3d(0.5, 1.5, 1.0)";
const borderRadius = 40;
const repeat = -1;
const duration = 3000;

let sTranslateTextureRef = shallowRef(null);
let sTranslateTextureTrigger = shallowRef(1);

const translateAnim =
  "{from {transform: translate3d(-100%, -50%, 0);} to {transform: translate3d(100%, 50%, 0);}}";
const rotateAnim =
  "{from {transform: rotate3d(1,-1,1,0);} to {transform: rotate3d(1,-1,1,360deg);}}";
const scaleAnim =
  "{from {transform: scale3d(0.5, 0.5, 1);} to {transform: scale3d(1.5, 1.5, 1);}}";
const swipAnim =
  "{from {transform: translate3d(-100%, 0, 0);} to {transform: translate3d(100%, 0, 0);}}";

styleShell.insertRule("@keyframes texture-anim-translate " + translateAnim);
styleShell.insertRule("@keyframes texture-anim-rotate " + rotateAnim);
styleShell.insertRule("@keyframes texture-anim-scale " + scaleAnim);

const onKeyDown = (ev) => {
  // 8:Backspace, 27:Escape, 10000:盒子返回键
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
  } else if (ev.keyCode == DefaultKeyCodeMap.Ok) {
    sTranslateTextureRef.value.start();
    sTranslateTextureTrigger.value = sTranslateTextureTrigger.value + 1;
  }
  return true;
};

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

onBeforeUnmount(() => {
  styleShell.removeRule("texture-anim-translate");
  styleShell.removeRule("texture-anim-rotate");
  styleShell.removeRule("texture-anim-scale");
});
</script>
<template>
  <jsv-focus-block
    autoFocus
    :onKeyDown="onKeyDown"
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#007788',
    }"
  >
    <div
      :style="{
        left: 100,
        top: 20,
      }"
    >
      <div
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(0,255,0,0.5)',
        }"
      />
      <jsv-texture-anim
        ref="sTranslateTextureRef"
        :src="img"
        :width="300"
        :height="150"
        :animation="translateAnim"
        :duration="duration"
        :transform="null"
        :borderRadius="borderRadius"
        :autoStart="true"
      ></jsv-texture-anim>
      <div
        :key="sTranslateTextureTrigger"
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(255,0,0,0.5)',
          transform: null,
          animation: `texture-anim-translate ${duration / 1000}s linear 1`,
        }"
      />
    </div>

    <div
      :style="{
        left: 100,
        top: 230,
      }"
    >
      <div
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(0,255,0,0.5)',
        }"
      />
      <jsv-texture-anim
        :src="img"
        :width="300"
        :height="150"
        :animation="rotateAnim"
        :duration="duration"
        :transform="null"
        :borderRadius="borderRadius"
        :repeat="repeat"
        :autoStart="true"
      ></jsv-texture-anim>
      <div
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(255,0,0,0.5)',
          transform: null,
          animation: `texture-anim-rotate ${duration / 1000}s linear infinite`,
        }"
      />
    </div>

    <div
      :style="{
        left: 100,
        top: 460,
      }"
    >
      <div
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(0,255,0,0.5)',
        }"
      />
      <jsv-texture-anim
        :src="img"
        :width="300"
        :height="150"
        :animation="scaleAnim"
        :duration="duration"
        :transform="null"
        :borderRadius="borderRadius"
        :repeat="repeat"
        :autoStart="true"
      ></jsv-texture-anim>
      <div
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(255,0,0,0.5)',
          transform: null,
          animation: `texture-anim-scale ${duration / 1000}s linear infinite`,
        }"
      />
    </div>
    <!-- transform sample -->
    <div
      :style="{
        left: 500,
        top: 20,
      }"
    >
      <div
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(0,255,0,0.5)',
        }"
      />
      <jsv-texture-anim
        :src="img"
        :width="300"
        :height="150"
        :transform="translateTransform"
        :borderRadius="borderRadius"
      ></jsv-texture-anim>
      <div
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(255,0,0,0.5)',
          transform: translateTransform,
        }"
      />
    </div>

    <div
      :style="{
        left: 500,
        top: 230,
      }"
    >
      <div
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(0,255,0,0.5)',
        }"
      />
      <jsv-texture-anim
        :src="img"
        :width="300"
        :height="150"
        :transform="rotateTransform"
        :borderRadius="borderRadius"
      ></jsv-texture-anim>
      <div
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(255,0,0,0.5)',
          transform: rotateTransform,
        }"
      />
    </div>

    <div
      :style="{
        left: 500,
        top: 460,
      }"
    >
      <div
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(0,255,0,0.5)',
        }"
      />
      <jsv-texture-anim
        :src="img"
        :width="300"
        :height="150"
        :transform="scaleTransform"
        :borderRadius="borderRadius"
      ></jsv-texture-anim>
      <div
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(255,0,0,0.5)',
          transform: scaleTransform,
        }"
      />
    </div>
    <!-- swip light -->
    <div
      :style="{
        left: 850,
        top: 460,
      }"
    >
      <div
        :style="{
          width: 300,
          height: 150,
          backgroundColor: 'rgba(0,255,0,0.5)',
        }"
      />
      <jsv-texture-anim
        :src="swipLight"
        :animation="swipAnim"
        :width="300"
        :height="150"
        :duration="duration"
        transform="scale3d(0.5, 1, 1) rotate3d(0,0,1, 30deg)"
        :borderRadius="borderRadius"
        :repeat="repeat"
        :autoStart="true"
      ></jsv-texture-anim>
    </div>

    <!-- 说明文字 -->
    <div
      :style="{
        left: 100,
        top: 620,
        width: 1920,
        height: 200,
        fontSize: 30,
        color: '#000000',
      }"
    >
      {{ "1. 注意圆角\n2. 红色半透明的view为标准, 图片的动画需要与其一致" }}
    </div>
  </jsv-focus-block>
</template>
