<script>
import { Options, Vue } from "vue-class-component";
import { data1, data2, data3 } from "./data";
import GridPlate from "./utils/GridPlate.vue";
import Item from "./components/ContentItem.vue";
import MyTab from "./components/MyTab.vue";
import { useFocusHub } from "jsview";

@Options({
  components: {
    GridPlate,
    Item,
    MyTab,
  },
})
class App extends Vue {
  constructor(props) {
    super(props);
    this.focusNode = null;
    this.contentData = data1;
    this.myId = 0;
    this.focusStyle = {};
    this.requestDataTime = 0;

    window.sStyleChangeCount = 0;
    window.sStyleChangeCost = 0;
    window.sStyleTextChangeCost = 0;

    window.sStylePropCount = 0;
    window.sStylePropCost = 0;

    console.log("App created");
  }

  setup() {
    return {
      focusHub: useFocusHub()
    }
  }

  onKeyDown(ev) {
    // 8:Backspace, 27:Escape, 10000:盒子返回键
    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
      return true;
    }
    return false;
  }

  getMeasures() {
    return {
      width: 227,
      height: 351,
      focusable: true,
    };
  }
  onFocus() {
    console.log("App onFocus", this.$refs.rootNode);
  }
  onItemFocus(id) {
    if (this.requestDataTime != 0) {
      clearTimeout(this.requestDataTime);
      this.requestDataTime = 0;
    }
    // this.requestDataTime = setTimeout(()=>{
    if (!window.JsvDebugTimeToken) {
      window.JsvDebugTimeToken = {
        start: 0,
      };
    }
    window.JsvDebugTimeToken.start = Date.now();
    console.log(
      "JsvTestTime onItemFocus start time=" + window.JsvDebugTimeToken.start
    );

    window.sStyleChangeCount = 0;
    window.sStyleChangeCost = 0;
    window.sStyleTextChangeCost = 0;
    window.sStylePropCount = 0;
    window.sStylePropCost = 0;

    switch (id) {
      case 0:
        this.contentData = data1;
        break;
      case 1:
        this.contentData = data2;
        break;
      case 2:
        this.contentData = data3;
        break;
    }
    this.myId = id;
    // }, 0);
  }

  beforeUnmount() {
    if (this.requestDataTime != 0) {
      clearTimeout(this.requestDataTime);
      this.requestDataTime = 0;
    }
  }

  mounted() {
    this.focusHub.setFocus("tab");
    window.jJsvRuntimeBridge?.notifyPageLoaded();
  }
}

export default App;
</script>

<template>
  <jsv-focus-block
    ref="rootNode"
    autoFocus
    :onKeyDown="onKeyDown"
    :onFocus="onFocus"
  >
    <div class="rootSize">
      <div :style="{ left: 50, top: 50 }">
        <my-tab name="tab" :onItemFocus="onItemFocus" />
      </div>

      <div class="widgetPos">
        <grid-plate
          name="simpleWidget"
          :key="myId"
          :data="contentData"
          :width="1253"
          :height="600"
          :measures="getMeasures"
        >
          <template #renderItem="{ data }">
            <Item :data="data" />
          </template>
        </grid-plate>
      </div>
    </div>
  </jsv-focus-block>
</template>

<style scoped>
.rootSize {
  top: 0;
}

.widgetPos {
  top: 120;
  left: 50;
}

.focusPos {
  top: 10;
  left: 10;
}
</style>
