<script setup>
import { computed, ref } from 'vue';
import { RouterLink, useRouter } from 'vue-router';
import { sessionStore } from '@/stores/session';

const router = useRouter();
const menuOpen = ref(false);
const organization = computed(() => sessionStore.state.publicData.organization || {});

async function logout() {
  await sessionStore.logout();
  await router.push('/');
}
</script>

<template>
  <div class="public-frame">
    <div class="public-frame__utility">
      <div class="app-container">
        <span>考试信息公共服务平台</span>
        <span v-if="organization.phone">咨询电话：{{ organization.phone }}</span>
      </div>
    </div>
    <header class="public-frame__header">
      <div class="app-container">
        <RouterLink class="app-brand" to="/" @click="menuOpen = false">
          <span>衡</span>
          <div><strong>衡准考试服务</strong><small>EXAMINATION INFORMATION SERVICE</small></div>
        </RouterLink>
        <nav :class="{ 'is-open': menuOpen }" aria-label="公共服务导航">
          <RouterLink to="/">首页</RouterLink>
          <RouterLink to="/announcements">通知公告</RouterLink>
          <RouterLink to="/verify">文书核验</RouterLink>
        </nav>
        <div class="public-frame__actions">
          <RouterLink v-if="!sessionStore.state.user" class="app-button app-button--primary" to="/auth/login">登录</RouterLink>
          <RouterLink v-else class="app-button app-button--primary" :to="sessionStore.homeFor()">进入业务中心</RouterLink>
          <button v-if="sessionStore.state.user" class="app-link-button" type="button" @click="logout">退出</button>
          <button class="public-frame__menu" type="button" :aria-expanded="menuOpen" aria-label="打开导航" @click="menuOpen = !menuOpen">☰</button>
        </div>
      </div>
    </header>
    <main class="public-frame__main"><slot /></main>
    <footer class="public-frame__footer">
      <div class="app-container">
        <div><strong>{{ organization.name || '考试信息管理机构' }}</strong><span>{{ organization.address || '统一考试公共服务平台' }}</span></div>
        <span>公开信息以本平台正式发布内容为准</span>
      </div>
    </footer>
  </div>
</template>
