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

import { findWorkspace } from "../workspaceRegistry";

const route = useRoute();
const current = computed(() => String(route.params.workspace ?? ""));
const marketActive = computed(() => findWorkspace(current.value)?.group === "市场复盘");
</script>

<template>
  <nav class="mobile-nav" aria-label="移动端主导航">
    <RouterLink class="mobile-nav-item" :class="{ active: marketActive }" :aria-current="marketActive ? 'page' : undefined" to="/workspace/emotion">行情</RouterLink>
    <RouterLink class="mobile-nav-item" :class="{ active: current === 'screener' }" to="/workspace/screener">选股</RouterLink>
    <RouterLink class="mobile-nav-item" :class="{ active: current === 'mentor' }" to="/workspace/mentor">问师</RouterLink>
    <RouterLink class="mobile-nav-item" :class="{ active: current === 'heaven' }" to="/workspace/heaven">问天</RouterLink>
    <RouterLink class="mobile-nav-item" :class="{ active: current === 'review' }" to="/workspace/review">复盘</RouterLink>
  </nav>
</template>
