<script setup>
import { watch, reactive, onMounted, onUnmounted, shallowRef } from "vue";
import { useRouter } from "vue-router";
import { jJsvRuntimeBridge, JsvVisibleSensor } from "jsview";

const BOX_WIDTH = 150;
const BOX_HEIGHT = 150;
const BOX_COLOR = "rgba(0,255,255,0.6)";
const VISIBLE_RANGE = 0.25;

const router = useRouter();

const containerRef = shallowRef(null);
let case_config = shallowRef(null);
let status_text = reactive({
  oldH: "false",
  newH: "false",
  oldV: "false",
  newV: "false",
});
let testCaseType = shallowRef(0);
let testBlinkType = shallowRef(false);
let altVisible = shallowRef("visible");
let altVisibleTimer = -1;

// window.LudlTestCase = testCaseType;

case_config.value = getTestCase(testCaseType.value);

watch(testCaseType, () => {
  case_config.value = getTestCase(testCaseType.value);
});

onMounted(() => {
  altVisibleTimer = setInterval(() => {
    if (testBlinkType.value) {
      altVisible.value = altVisible.value == "visible" ? "hidden" : "visible";
    }
  }, 500);

  jJsvRuntimeBridge.notifyPageLoaded();
});

onUnmounted(() => {
  if (altVisibleTimer != -1) {
    clearInterval(altVisible);
    altVisibleTimer = -1;
  }
});

// const onAnimDone = () => {
//   testCaseType.value = (testCaseType.value + 1) % 2;
// };

// 内部接口
const onBeVisible = (old_h, new_h, old_v, new_v) => {
  status_text.oldH = old_h ? "true" : "false";
  status_text.newH = new_h ? "true" : "false";
  status_text.oldV = old_v ? "true" : "false";
  status_text.newV = new_v ? "true" : "false";
};

const onKeyDown = (ev) => {
  // 8:Backspace, 27:Escape, 10000:盒子返回键
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router?.go(-1); // 有router时，回退
    return true;
  }
  if (ev.keyCode == 13) {
    testCaseType.value = (testCaseType.value + 1) % 2;
  }
  if (ev.keyCode == 38) {
    testBlinkType.value = testBlinkType.value ? false : true;
    altVisible.value = "visible";
  }
  return false;
};

function getTestCase(test_index) {
  let test_config = {
    animation: null,
    text: null,
    horizon: 1.0,
    vertical: 1.0,
  };

  switch (test_index) {
    case 0: {
      // 上到下
      test_config.animation = "visibleSensor_upDown 12s infinite linear";
      test_config.text = "从上到下";
      test_config.horizon = 1.0;
      test_config.vertical = VISIBLE_RANGE;
      break;
    }
    case 1: {
      // 左到右
      test_config.animation = "visibleSensor_leftRight 12s infinite linear";
      test_config.text = "从左到右";
      test_config.horizon = VISIBLE_RANGE;
      test_config.vertical = 1.0;
      break;
    }
  }

  return test_config;
}
</script>

<template>
  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
    <div :style="{ width: 1280, height: 720, backgroundColor: '#00F000' }">
      <div
        :style="{
          left: 10,
          top: 10,
          height: 120,
          width: 900,
          fontColor: '#000000',
          fontSize: 15,
          lineHeight: 20,
        }"
      >
        {{
          `按OK键切换方向, 按UP键切换显隐测试
new horizon: ${status_text.newH}
new vertical: ${status_text.newV}
-------
old horizon: ${status_text.oldH}
old vertical: ${status_text.oldV}`
        }}
      </div>
      <div
        ref="containerRef"
        :style="{
          left: 240,
          top: 180,
          width: 300,
          height: 300,
          backgroundColor: '#00F0F0',
        }"
      >
        <div
          :style="{
            left: 50,
            top: 50,
            width: 200,
            height: 200,
            backgroundColor: '#00AAAA',
            zIndex: testCaseType == 0 ? -22 : 0,
          }"
        />

        <div
          :style="{
            left: 80,
            top: 30,
            width: 140,
            height: 240,
            backgroundColor: '#0000AA',
            zIndex: testCaseType == 0 ? -33 : 0,
          }"
        />

        <div
          :style="{
            left: 0,
            top: 0,
            visibility: altVisible,
            animation: case_config.animation,
          }"
        >
          <JsvVisibleSensor
            :horizonShown="case_config.horizon"
            :verticalShown="case_config.vertical"
            :width="BOX_WIDTH"
            :height="BOX_HEIGHT"
            :enable="true"
            :container="containerRef"
            :callback="onBeVisible"
          >
            <div v-if="testCaseType == 0">
              <div
                :style="{
                  width: BOX_WIDTH,
                  height: BOX_HEIGHT * VISIBLE_RANGE,
                  backgroundColor: '#FF0000',
                }"
              />
              <div
                :style="{
                  top: BOX_HEIGHT * (1 - VISIBLE_RANGE),
                  width: BOX_WIDTH,
                  height: BOX_HEIGHT * VISIBLE_RANGE,
                  backgroundColor: '#FF0000',
                }"
              />
            </div>
            <div v-else>
              <div
                :style="{
                  width: BOX_WIDTH * VISIBLE_RANGE,
                  height: BOX_HEIGHT,
                  backgroundColor: '#FF0000',
                }"
              />
              <div
                :style="{
                  left: BOX_WIDTH * (1 - VISIBLE_RANGE),
                  width: BOX_WIDTH * VISIBLE_RANGE,
                  height: BOX_HEIGHT,
                  backgroundColor: '#FF0000',
                }"
              />
            </div>
            <div
              :style="{
                width: BOX_WIDTH,
                height: BOX_HEIGHT,
                backgroundColor: BOX_COLOR,
                fontSize: 20,
                lineHeight: 30,
              }"
            >
              {{
                `${case_config.text}\nH:${status_text.newH}\nV:${status_text.newV}`
              }}
            </div>
          </JsvVisibleSensor>
        </div>
      </div>
    </div>
  </jsv-focus-block>
</template>

<style scoped>
@keyframes visibleSensor_upDown {
  from {
    transform: translate3d(75, -180, 0);
  }
  to {
    transform: translate3d(75, 330, 0);
  }
}

@keyframes visibleSensor_leftRight {
  from {
    transform: translate3d(-180, 75, 0);
  }
  to {
    transform: translate3d(330, 75, 0);
  }
}
</style>
