<script setup>
import { computed, shallowRef, onActivated, onDeactivated } from "vue";
import { jJsvRuntimeBridge, EdgeDirection, useFocusHub } from "jsview";
import { useRouter } from "vue-router";
import TabFrame from "../components/TabFrame.vue";
import BodyFrame from "../components/BodyFrame.vue";
import Dialog from "../components/Dialog.vue";

const isDevelopment = process.env.NODE_ENV !== "production";

const colorTemplete = ["#89BEB2", "#C9BA83", "#DED38C", "#DE9C53"];

//功能实例 MetroWidgetData 首页/运营 游戏实例
const featureData = [];
const metroWidgetData = [];
const operationsData = [];
const gameData = [];
const touchTestData = [];
const operatorData = [];

const routeList = useRouter().getRoutes();
for (let item of routeList) {
  let obj = {
    name: item.meta.nameText,
    path: item.path,
    width: 300,
    height: 100,
    focusable: true,
  };
  if (item.path.indexOf("/feature/") >= 0) {
    obj.backgroundColor = colorTemplete[featureData.length % 4];
    featureData.push(obj);
  } else if (item.path.indexOf("/metroWidget/") >= 0) {
    obj.backgroundColor = colorTemplete[metroWidgetData.length % 4];
    metroWidgetData.push(obj);
  } else if (item.path.indexOf("/Operations/") >= 0) {
    obj.backgroundColor = colorTemplete[operationsData.length % 4];
    operationsData.push(obj);
  } else if (item.path.indexOf("/Game/") >= 0) {
    obj.backgroundColor = colorTemplete[gameData.length % 4];
    gameData.push(obj);
  } else if (item.path.indexOf("/touch/") >= 0) {
    obj.backgroundColor = colorTemplete[touchTestData.length % 4];
    touchTestData.push(obj);
  } else if (item.path.indexOf("/operator/") >= 0) {
    obj.backgroundColor = colorTemplete[operatorData.length % 4];
    operatorData.push(obj);
  }
}
const dataList = [
  featureData,
  metroWidgetData,
  operationsData,
  touchTestData,
  gameData,
  operatorData,
];

// 控制v-show
// 不用v-if是为了测试已存在的view从hide到show，并挡住其他view，是否touch判断层级正常
let showExitDialog = shallowRef(false);

let contentData = shallowRef(dataList[0]);
let tabId = shallowRef(0);

let preFocusName = "";
let curFocusName = "";
let name = "/home";

let focusHub = useFocusHub();

let address = computed(() => {
  return window.localStorage.href;
});

let onFocus = () => {
  changeFocus(name + "/bodyFrame");
};

let onKeyDown = (ev) => {
  // 处理返回键
  if (
    ev.keyCode == 8 || // Backspace
    ev.keyCode == 27 || // Escape
    ev.keyCode == 10000 // 盒子返回键
  ) {
    showExitDialog.value = !showExitDialog.value;
    if (!showExitDialog.value) {
      changeFocus(preFocusName);
    } else {
      preFocusName = curFocusName;
      curFocusName = name + "/exitDialog";
    }
  }
  return true;
};

let changeFocus = (name) => {
  preFocusName = curFocusName;
  curFocusName = name;
  focusHub.setFocus(name);
};

let onTabEdge = (edgeInfo) => {
  if (edgeInfo.direction === EdgeDirection.bottom) {
    changeFocus(name + "/bodyFrame");
  }
};

let onContentEdge = (edgeInfo) => {
  if (edgeInfo.direction === EdgeDirection.top) {
    changeFocus(name + "/tabFrame");
  }
};

let tabItemFocus = (data) => {
  if (data.id != tabId.value) {
    tabId.value = data.id;
    contentData.value = dataList[data.id];
  }
};

let tabItemClick = (id, data) => {
  console.log("testtest", "tabItemClick");
  if (data.id != tabId.value) {
    tabId.value = data.id;
    contentData.value = dataList[data.id];
  }
};

let onDialogAction = (msg) => {
  showExitDialog.value = false;
  changeFocus(preFocusName);
  switch (msg) {
    case "ok":
      jJsvRuntimeBridge.closePage();
      break;
    case "back":
    case "cancel":
      break;
  }
};

// focusHub.enableFocusTrace(true);

// keep-alive后 router 返回本页面时要激活一下focus
let focusNameOfDeactive = null;
onActivated(() => {
  if (focusNameOfDeactive) {
    focusHub.setFocus(focusNameOfDeactive);
    focusNameOfDeactive = null;
  }
});

onDeactivated(() => {
  focusNameOfDeactive = focusHub.getDeactivedPageFocus();
});
</script>

<template>
  <div class="rootSize">
    <div class="address">
      {{ address }}
    </div>
    <div class="logo">
      {{
        "JsView-Vue3 (Vite3) [" + (isDevelopment ? "Debug" : "Release") + "]"
      }}
    </div>

    <jsv-focus-block
      autoFocus
      :onAction="{
        onKeyDown: onKeyDown,
        onFocus: onFocus,
      }"
    >
      <div :style="{ left: 10 }">
        <tab-frame
          :name="name + '/tabFrame'"
          :onEdge="onTabEdge"
          :itemFocus="tabItemFocus"
          :initId="tabId"
          :itemClick="tabItemClick"
        />
      </div>

      <div
        :style="{
          left: 10,
          top: 100,
        }"
      >
        <body-frame
          :data="contentData"
          :name="name + '/bodyFrame'"
          :onEdge="onContentEdge"
          :tabId="tabId"
        />
      </div>

      <Dialog
        v-show="showExitDialog"
        :name="name + '/exitDialog'"
        :onAction="onDialogAction"
        :focused="showExitDialog"
      ></Dialog>
    </jsv-focus-block>
  </div>
</template>

<style scoped>
.rootSize {
  width: 1920;
  height: 1080;
}

.address {
  width: 1280;
  height: 30;
  color: #ffffff;
  font-size: 20;
}

.logo {
  top: 60;
  width: 1260;
  height: 30;
  color: #00ff00;
  font-size: 20;
  font-weight: bold;
  text-align: right;
}
</style>
