<template>
  <a-layout style="min-height: 100vh">
    <a-layout-header class="header">
      <div class="brand">
        <span class="leaf">🍃</span>
        室内装修工程污染物预测系统
      </div>
      <a-menu
        mode="horizontal"
        :selectedKeys="[current]"
        class="nav"
        @click="onNav"
      >
        <a-menu-item key="home">首页</a-menu-item>
        <a-menu-item key="template">模板库</a-menu-item>
        <a-menu-item key="material">材料库</a-menu-item>
        <a-menu-item key="history">历史记录</a-menu-item>
      </a-menu>
      <a-dropdown>
        <span class="org">{{ auth.org?.name || '一品健康空间' }}</span>
        <template #overlay>
          <a-menu>
            <a-menu-item key="logout" @click="logout">退出登录</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </a-layout-header>
    <a-layout-content class="content">
      <router-view />
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';

const route = useRoute();
const router = useRouter();
const auth = useAuthStore();

const current = computed(() => (route.name as string) || 'home');

function onNav({ key }: { key: string }) {
  router.push({ name: key });
}

function logout() {
  auth.logout();
  router.replace('/login');
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.brand {
  font-weight: 700;
  font-size: 16px;
  margin-right: 32px;
  white-space: nowrap;
}
.leaf { color: #b4232a; }
.nav { flex: 1; border-bottom: none; }
.org { cursor: pointer; color: #555; }
.content { padding: 16px; }
</style>
