<!--
 * @Author: ChenChanghua
 * @Date: 2021-12-21 15:36:29
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-05-04 
 * @Description: file content
-->
<script setup>
import ViewSwiper from "./ViewSwiper.vue";
import AppTab from "./AppTab.vue";
import { reactive, provide, shallowRef } from "vue";
import { EdgeDirection, useFocusHub } from "jsview";
import { useRouter } from "vue-router";
const router = useRouter();
const pageList = [];
const tabData = [];

const focusHub = useFocusHub();

const randomColor = () => {
  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
  return (
    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
  );
};

for (let i = 0; i < 10; ++i) {
  tabData.push({
    width: 150,
    height: 50,
    marginRight: 10,
    content: i == 0 ? "首屏不动" : "Tab_" + i,
    color: randomColor(),
  });
  const pageData = [];
  for (let j = 0; j < 10; ++j) {
    pageData.push({
      width: 500,
      height: 170,
      name: "testPage_" + i + "-" + "widget_" + j,
      marginBottom: 10,
      index: j,
    });
  }
  pageList.push({
    width: 600,
    height: 600,
    data: pageData,
    name: "testPage-" + i,
    tabIndex: i,
  });
}
let globalInfo = reactive({
  tabId: 0,
});
let focusNode = shallowRef(null)
const appPageName = "/page";
const appTabName = "/tab";
const curFocusName = shallowRef("/tab");
provide("globalInfo", globalInfo)

const $_app_onFocus = () => {
  console.log("App onFocus");
  focusHub.setFocus(curFocusName.value);
}

const onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router?.go(-1);
  }
  return true;
}

const $_app_pageOnEdge = (info) => {
  console.log("App page on edge ", info);
  if (info.direction === EdgeDirection.top) {
    curFocusName.value = "/tab";
    focusHub.setFocus(appTabName);
  }
}

const $_app_tabOnEdge = (info) => {
  console.log("App tab on edge ", info);
  if (info.direction === EdgeDirection.bottom) {
    curFocusName.value = "/page";
    focusHub.setFocus(appPageName);
  }
}
</script>

<template>
  <jsv-focus-block ref="focusNode" name="/main" autoFocus :onAction="{
    onKeyDown: onKeyDown,
    onFocus: $_app_onFocus,
  }" :style="{
    width: 1280,
    height: 720,
    backgroundColor: '#007788',
  }">
    <div :style="{
        top: 0,
        left: 100,
      }">
      <app-tab :data="tabData" :name="appTabName" :layout="{ width: 600, height: 100 }" :onEdge="$_app_tabOnEdge" :style="{
          top: 15,
        }"></app-tab>
    </div>

    <div :style="{ top: 100, left: 200 }">
      <view-swiper :name="appPageName" :pageData="pageList" :onEdge="$_app_pageOnEdge" :layout="{
          width: 600,
          height: 600,
        }"></view-swiper>
    </div>
  </jsv-focus-block>
</template>