<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { useRoute } from "vue-router";

import { operationsApi } from "../../shared/api/operations";
import { findWorkspace } from "../workspaceRegistry";

const route = useRoute();
const title = computed(() => {
  if (typeof route.meta.title === "string") return route.meta.title;
  return findWorkspace(String(route.params.workspace ?? ""))?.title ?? "小白复盘";
});
const runtimeMessage = ref("正在读取行情状态");
let timer: ReturnType<typeof setInterval> | undefined;
async function loadStatus(): Promise<void> {
  try { runtimeMessage.value = (await operationsApi.status()).message; }
  catch { runtimeMessage.value = "行情状态暂不可用"; }
}
onMounted(() => { void loadStatus(); timer = setInterval(loadStatus, 15_000); });
onBeforeUnmount(() => { if (timer) clearInterval(timer); });
</script>

<template>
  <footer class="statusbar">
    <span>{{ title }}</span>
    <span class="statusbar-center">股市有风险，投资需谨慎</span>
    <span class="statusbar-right">{{ runtimeMessage }}</span>
  </footer>
</template>
