<!--
 * @Author: ChenChanghua
 * @Date: 2022-05-06 19:32:53
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-05-04 
 * @Description: file content
-->
<script setup>
import { jJsvRuntimeBridge, JsvGrid, LineType, EdgeDirection, useFocusHub } from "jsview";
import { shallowRef, onMounted } from "vue";
import { useRouter } from "vue-router";
import ItemVue from "./Item.vue";
import FocusItem from "./FocusItem.vue";
const lineType = new LineType(1, 3);
const name1 = "updatePage1";
const name2 = "updatePage2";
const widget1 = shallowRef(null);
const widget2 = shallowRef(null);
const router = useRouter();
const focusHub = useFocusHub();

const _provideData1 = () => {
  let data = [];
  for (let i = 0; i < 113; i++) {
    data.push({
      content: i + "_CCCCCCCCCCCCCCCCCCCCCCC",
    });
  }
  return data;
};
const _provideData2 = () => {
  let data2 = [];
  for (let i = 0; i < 113; i++) {
    data2.push({
      name: i + "_D",
      baseColor: i,
    });
  }
  return data2;
};
const _provideData3 = () => {
  return [];
};

const _onEdge1 = (info) => {
  if (info.direction == EdgeDirection.right) {
    focusHub.setFocus(name2);
  }
};
const _onEdge2 = (info) => {
  if (info.direction == EdgeDirection.left) {
    focusHub.setFocus(name1);
  }
};
const _onKeyDown = (ev) => {
  console.log("app onkeydown");
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1); // 有router时，是从DemoHomepage进入，回退
  }
  return true;
};

onMounted(() => {
  jJsvRuntimeBridge.notifyPageLoaded();
  focusHub.setFocus(name2);
});
</script>

<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown: _onKeyDown,
    }"
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: '#004444',
    }"
    ><jsv-grid
      ref="widget1"
      :name="name1"
      :left="50"
      :top="50"
      :provideData="_provideData1"
      :row="4"
      :column="5"
      :itemSize="{
        width: 100,
        height: 50,
      }"
      :gapInfo="{
        row: 10,
        column: 10,
      }"
      :verticalUpdate="true"
      :columnFirst="true"
      :onEdge="_onEdge1"
      :initFocusId="21"
      :loopUpdate="true"
    >
      <template #renderItem="{ userData, widgetData, onAction }">
        <item-vue
          :userData="userData"
          :widgetData="widgetData"
          :onAction="onAction"
        />
      </template>
    </jsv-grid>
    <div
      :style="{
        left: 100,
        top: 300,
        width: 300,
        height: 50,
        fontSize: 30,
      }"
    >
      纵向排布, 翻页模式
    </div>

    <div
      :style="{
        left: 600,
      }"
    >
      <jsv-grid
        ref="widget2"
        :name="name2"
        :left="50"
        :top="50"
        :provideData="_provideData2"
        :row="4"
        :column="5"
        :itemSize="{
          width: 100,
          height: 50,
        }"
        :gapInfo="{
          row: 10,
          column: 10,
        }"
        :verticalUpdate="false"
        :columnFirst="true"
        :onEdge="_onEdge2"
        :updateType="lineType"
        :initFocusId="0"
      >
        <template #renderItem="{ userData, widgetData, onAction }">
          <focus-item
            :userData="userData"
            :widgetData="widgetData"
            :onAction="onAction"
          />
        </template>
      </jsv-grid>
      <div
        :style="{
          left: 100,
          top: 300,
          width: 300,
          height: 50,
          fontSize: 30,
        }"
      >
        横向排布, 逐行刷新
      </div>
    </div>

    <div
      :style="{
        top: 500,
      }"
    >
      <jsv-grid
        ref="widget3"
        name="empty"
        :left="50"
        :top="50"
        :provideData="_provideData3"
        :row="4"
        :column="5"
        :itemSize="{
          width: 100,
          height: 50,
        }"
        :gapInfo="{
          row: 10,
          column: 10,
        }"
        :verticalUpdate="false"
        :columnFirst="true"
        :onEdge="_onEdge2"
        :updateType="lineType"
        :initFocusId="0"
      >
        <template #renderItem="{ userData, widgetData, onAction }">
          <item-vue
            :userData="userData"
            :widgetData="widgetData"
            :onAction="onAction"
          />
        </template>
      </jsv-grid>
      <div
        :style="{
          left: 100,
          top: 0,
          width: 300,
          height: 50,
          fontSize: 30,
        }"
      >
        空数据展示
      </div>
    </div>
  </jsv-focus-block>
</template>