<script>
import { router, routeList } from "./router.js";
export default {
  Router: router,
};
</script>

<script setup>
import { jJsvRuntimeBridge, useFocusHub } from "jsview";
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref, shallowRef } from "vue";

const props = defineProps({
  routePath: String,
});

const focusHub = useFocusHub();

const displayUrl = ref("");
let topRef = shallowRef(null);
let routePage = shallowRef(null);
let currentRouter;
if (props.routePath) {
  // 向主Router插入新路径定义
  const currentRoute = useRoute();
  currentRouter = useRouter();

  let redirectPath; // 自动跳转路径
  for (const route of routeList) {
    if (route.path === "/") {
      // 不需要添加home
      redirectPath = route.redirect;
      continue;
    }

    const subRoute = { ...route, path: route.path.substring(1) }; // 去掉字符'/'
    currentRouter.addRoute(currentRoute.name, subRoute);
  }

  currentRouter.replace(props.routePath + redirectPath); // 自动跳转到redirectPath
} else {
  // 主Router就是自己
  currentRouter = router;
}
currentRouter.afterEach(() => {
  displayUrl.value = window.location.href;
});

const onRequestFocus = (branchName) => {
  focusHub.setFocus(branchName);
};

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

<template>
  <div class="root">
    <div class="address">当前URL: {{ displayUrl }}</div>
    <div class="split"></div>
    <jsv-focus-block ref="topRef">
      <!-- 这种router-view的写法可以获取到component的ref，vue标准写法 -->
      <router-view v-slot="{ Component }">
        <component
          :is="Component"
          ref="routePage"
          class="childComponentStyle"
          :style="{
            top:150,
            overflow:'hidden'
          }"
          @requestFocus="onRequestFocus"
        />
      </router-view>
    </jsv-focus-block>
  </div>
</template>

<style scoped>
.root {
  left: 0;
  top: 0;
  width: 1280;
  height: 1080;
  background-color: rgb(222, 211, 140);
}

.address {
  left: 40;
  top: 40;
  width: 1200;
  height: 200;
  font-size: 20;
}

.split {
  left: 40;
  top: 150;
  width: 1200;
  height: 3;
  background-color: #00f000;
}

.childComponentStyle {
  left: 0;
  width: 1920;
  height: 930;
}
</style>
