<script setup>
import { JsvNativeSharedDiv, JsvFocusBlock, jJsvRuntimeBridge } from "jsview";
import {
  enableNativeViewListener,
  disableNativeViewListener,
} from "./JsvDemoTester";
import { onBeforeUnmount, onMounted, reactive, watch, shallowRef } from "vue";

let state = reactive({
  outX: 20,
  outY: 30,
  inX: 13,
  inY: 15,
});

let _TestData = [
  [20, 30, 13, 15],
  [30, 40, 13, 15],
  [40, 50, 3, 5], // 绝对位置不动，不触发信息更新
];

let _Index = 0;

//给两个div给定不同的响应式变量
let view1 = shallowRef("null");
let view2 = shallowRef("null");
let view1Dsp = shallowRef({ x: 0, y: 0, width: 0, height: 0 });
let view2Dsp = shallowRef({ x: 0, y: 0, width: 0, height: 0 });
let isShow = shallowRef(false);
let isStop = shallowRef(false);
//创造出需要的四个属性的对象
const obj = (newValue) => {
  const resultObj = {};
  const newObj = JSON.parse(
    newValue
      .replace(/(\w+)\=/g, '"$1":')
      .replace(/'/g, '"')
      .replace(/^Bundle\[/, "")
      .replace(/\]$/, "")
  );
  for (const key in newObj) {
    if (key == "height" || key == "width" || key == "x" || key == "y") {
      resultObj[key] = newObj[key];
    }
  }
  return resultObj;
};
//监听
watch(view1, (n, o) => {
  view1Dsp.value = obj(n);
});
watch(view2, (n, o) => {
  view2Dsp.value = obj(n);
  isShow.value = true;
});
// 每2秒进行位置变化以测试位置信息更新
let loopTimer = setInterval(() => {
  _Index = (_Index + 1) % 3;

  state.outX = _TestData[_Index][0];
  state.outY = _TestData[_Index][1];
  state.inX = _TestData[_Index][2];
  state.inY = _TestData[_Index][3];
}, 2000);

// 使用两个View来测试Id跟踪的正确性
let _ReisterId = null;
let _ReisterId2 = null;
let _ResiterCallbackId1 = -1;
let _ResiterCallbackId2 = -1;

let getId = (id) => {
  if (_ReisterId !== id) {
    _ResiterCallbackId1 = enableNativeViewListener(id, view1);
    _ReisterId = id;
  }
};

let timeout1 = -1;
let timeout2 = -1;

let getId2 = (id) => {
  if (_ReisterId2 !== id) {
    _ReisterId2 = id;

    // 延迟注册，以测试listener注册前发送event的场景
    // 提前发出的event在listener注册时，可以收到最后状态信息
    timeout1 = setTimeout(() => {
      timeout1 = -1;
      _ResiterCallbackId2 = enableNativeViewListener(id, view2);
      timeout2 = setTimeout(() => {
        timeout2 = -1;
        disableNativeViewListener(_ResiterCallbackId2);
        isStop.value = true;
        _ResiterCallbackId2 = -1;
      }, 10000);
    }, 1000);
  }
};

onBeforeUnmount(() => {
  if (loopTimer >= 0) {
    clearInterval(loopTimer);
    loopTimer = -1;
  }

  if (timeout1 >= 0) {
    clearTimeout(timeout1);
    timeout1 = -1;
  }

  if (timeout2 >= 0) {
    clearTimeout(timeout2);
    timeout2 = -1;
  }

  if (_ResiterCallbackId1 >= 0) {
    disableNativeViewListener(_ResiterCallbackId1);
    _ResiterCallbackId1 = -1;
  }
  if (_ResiterCallbackId2 >= 0) {
    disableNativeViewListener(_ResiterCallbackId2);
    _ResiterCallbackId2 = -1;
  }
});

onMounted(() => {
  console.log("TestNativeSharedView mounted");
  jJsvRuntimeBridge.notifyPageLoaded();
});
</script>

<template>
  <jsv-focus-block autoFocus>
    <!-- 一个无限动画元素，来测试卡顿 -->
    <div
      :style="{
        top: 100,
        left: 1000,
        height: 150,
        width: 150,
        backgroundColor: '#334455',
        animation: 'test-anim-rotate 1s infinite linear',
      }"
    />
    <!-- 显示参数 -->
    <div
      :style="{
        top: 400,
        left: 1000,
        width: 256,
        height: 240,
        backgroundColor: 'rgba(27,38,151,0.8)',
      }"
    >
      <div
        :style="{
          top: 0,
          left: 0,
          width: 120,
          height: 30,
          color: '#FFFFFF',
          fontSize: 20,
          textAlign: 'center',
        }"
      >
        {{ "view1的参数" }}
      </div>
      <div
        v-for="(value, key, index) in view1Dsp"
        :style="{
          top: 30 + index * 40,
          left: 10,
          width: 100,
          height: 40,
          fontSize: 20,
          color: '#FFFFFF',
          textAlign: 'center',
        }"
      >
        {{ key }}:{{ value }}
      </div>
      <div
        :style="{
          top: 0,
          left: 130,
          width: 120,
          height: 30,
          color: '#FFFFFF',
          fontSize: 20,
          textAlign: 'center',
        }"
      >
        {{ "view2的参数" }}
      </div>
      <div v-if="isShow">
        <div
          v-for="(value, key, index) in view2Dsp"
          :style="{
            top: 30 + index * 40,
            left: 130,
            width: 100,
            height: 40,
            fontSize: 20,
            color: '#FFFFFF',
            textAlign: 'center',
          }"
        >
          {{ key }}:{{ value }}
        </div>
        <div
          :style="{
            top: 200,
            left: 130,
            width: 100,
            height: 40,
            fontSize: 20,
            color: '#FFFFFF',
            textAlign: 'center',
          }"
        >
          {{ isStop ? "监听停止" : "" }}
        </div>
      </div>
      <div
        v-else
        :style="{
          top: 30 + 2 * 30,
          left: 130,
          width: 100,
          height: 40,
          fontSize: 20,
          color: '#FFFFFF',
          textAlign: 'center',
        }"
      >
        {{ "未监听" }}
      </div>
    </div>

    <div
      :style="{
        left: state.outX,
        top: state.outY,
        backgroundColor: '#00FF00',
        width: 600,
        height: 600,
      }"
    >
      <div
        :style="{
          left: state.inX,
          top: state.inY,
          width: 500,
          height: 500,
          backgroundColor: 'rgba(255, 255, 0, 1.0)',
        }"
      />
      <jsv-native-shared-div
        :getId="getId"
        :style="{
          left: state.inX,
          top: state.inY,
          width: 500,
          height: 500,
        }"
      >
        <div
          :style="{
            backgroundColor: '#00FF00',
            left: 50,
            top: 40,
            width: 30,
            height: 30,
          }"
        />
      </jsv-native-shared-div>
    </div>
    <div
      :style="{
        left: state.outX + 200,
        top: state.outY,
        backgroundColor: '#00FF00',
        width: 600,
        height: 600,
      }"
    >
      <div
        :style="{
          left: state.inX,
          top: state.inY,
          width: 500,
          height: 500,
          backgroundColor: 'rgba(255, 255, 0, 1.0)',
        }"
      />
      <jsv-native-shared-div
        :getId="getId2"
        :style="{
          left: state.inX,
          top: state.inY,
          width: 500,
          height: 500,
        }"
        :corner="8"
      >
        <div
          :style="{
            backgroundColor: '#00FF00',
            left: 50,
            top: 40,
            width: 30,
            height: 30,
          }"
        />
      </jsv-native-shared-div>
    </div>
  </jsv-focus-block>
</template>

<style scoped>
@keyframes test-anim-rotate {
  from {
    transform: rotate3d(0, 0, 1, 270deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
</style>
