<template>
  <ConfigView v-if="isConfigPage" />
  <CompositeView v-else-if="isCompositePage" />
  <BroadcastView v-else />
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from "vue";
import BroadcastView from "./views/BroadcastView.vue";
import CompositeView from "./views/CompositeView.vue";
import ConfigView from "./views/ConfigView.vue";

// 根据 hash 区分同步屏页面与配置页面（多窗口复用同一前端入口）。
const hash = ref(window.location.hash);

/**
 * 同步当前 URL hash，用于页面切换。
 */
function syncHash() {
  hash.value = window.location.hash;
}

onMounted(() => {
  window.addEventListener("hashchange", syncHash);
});

onUnmounted(() => {
  window.removeEventListener("hashchange", syncHash);
});

const isConfigPage = computed(() => {
  const params = new URLSearchParams(window.location.search);
  return params.get("view") === "config" || hash.value === "#/config";
});

const isCompositePage = computed(() => {
  const params = new URLSearchParams(window.location.search);
  return params.get("view") === "composite" || hash.value === "#/composite";
});
</script>
