<!--
 * @Author: ChenChanghua
 * @Date: 2021-06-02 13:31:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-13 14:30:06
 * @Description: file content
-->
<script setup>
import { shallowRef, onMounted, onUnmounted, provide } from "vue";
import {
  JsvPreload,
  buildPreloadInfo,
  jJsvRuntimeBridge,
  JsvFocusBlock,
  useFocusHub,
  JsvTouchModeSwitcher,
  JsvFullScrAdjust,
} from "jsview";
import { useRouter } from "vue-router";
import { setDataUrl, getDataUrl } from "../CommonUtils/ResourceData.js";
import { getSearchQuery } from "../CommonUtils/getSearchQuery.js";

let DemoResourceBase = shallowRef("");
let backgroundImageUrl = shallowRef(null);
const touchModeSwitcherRef = shallowRef();
provide("touchModeSwitcherRef", touchModeSwitcherRef);
// let preloadInfo = shallowRef([]);

window.DebugFocusHub = useFocusHub();

const router = useRouter();

// Android测试指令:
// am start -n com.qcode.miniappsdktester/.JSVActivity --es MINIAPPNAME "JsViewDemo" --ei MINIAPPLAUNCHMODE 1 --es URL "http://192.168.2.179/js/main.jsv.mjs#/feature/HashParams?a=333&b=444" --es DEBUG "1"
window.JsView?.addEventListener("onNewIntent", (msg) => {
  if (msg?.url) {
    console.log("onNewIntent new url=" + msg.url);
    let new_url = new URL(msg.url);
    if (!!new_url.hash) {
      console.log("onNewIntent new hash=" + new_url.hash.substring(1));
      router.push(new_url.hash.substring(1));
    } else {
      // 回主目录
      console.log("onNewIntent back to home");
      router.push("/");
    }
  }
});

let _onPreloadDone = () => {
  console.log("background load done");
  jJsvRuntimeBridge.notifyPageLoaded();
};

const _OnKeyDown = (ev) => {
  // 结果默认传下来的返回键
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
    return true;
  }

  return false;
};

// 用于测试DemoHomepage在keep-alive状态下的更新问题
let testKeepAliveModeText = shallowRef(1);
let testKeepAliveTimer = -1;

//解析url
let query = getSearchQuery(window.location.href, undefined, 0);
if (query.DemoResourceBase) {
  setDataUrl(query.DemoResourceBase);
  //无网络环境下使用
  DemoResourceBase.value = getDataUrl();
}
onMounted(() => {
  touchModeSwitcherRef.value?.registerCallback((mode) => {
    console.log("change mode to", mode == 1 ? "key" : "touch");
  });
  console.log("simulate async get background url");
  setTimeout(() => {
    console.log("simulate background url got");
    backgroundImageUrl.value = DemoResourceBase.value
      ? `${DemoResourceBase.value}/BackgroundLongmao.jpg`
      : "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoHomepage/App/BackgroundLongmao.jpg";
    // preloadInfo.value = [buildPreloadInfo(backgroundImageUrl.value)];
  }, 0);

  console.log("start homepage interval");
  testKeepAliveTimer = setInterval(() => {
    testKeepAliveModeText.value++;
  }, 1000);
});

onUnmounted(() => {
  if (testKeepAliveTimer > 0) {
    console.log("remove homepage interval");
    clearInterval(testKeepAliveTimer);
    testKeepAliveTimer = -1;
  }
});
</script>

<template>
  <JsvFullScrAdjust :childWidth="1280" :childHeight="720">
    <jsv-touch-mode-switcher
      ref="touchModeSwitcherRef"
      :width="1280"
      :height="720"
    >
      <!-- <jsv-preload :key="backgroundImageUrl" :preloadList="preloadInfo" :onPreloadDone="_onPreloadDone" /> -->
      <img
        :src="backgroundImageUrl"
        :style="{
          width: 1280,
          height: 720,
        }"
        @load="_onPreloadDone"
      />
      <div class="TestKeepAliveDiv">
        {{ "更新页面计数:" + testKeepAliveModeText }}
      </div>
      <jsv-focus-block
        :onAction="{
          onKeyDown: _OnKeyDown,
        }"
      >
        <router-view v-slot="{ Component, route }">
          <keep-alive>
            <component v-if="route.meta.keepAlive" :is="Component" />
          </keep-alive>
          <component v-if="!route.meta.keepAlive" :is="Component" />
        </router-view>
      </jsv-focus-block>
    </jsv-touch-mode-switcher>
  </JsvFullScrAdjust>
</template>

<style scoped>
.TestKeepAliveDiv {
  top: 60;
  left: 30;
  width: 200;
  height: 30;
  font-size: 20;
  line-height: 30;
  color: #eb20c6;
}
</style>
