<script setup>
import {ref, watch} from "vue";
import {useRoute} from "vue-router";

const route = useRoute();
const menus = ref([
  {
    key: 'home',
    path: '/home',
    name: '首页'
  },
  {
    key: 'management',
    path: '/management',
    name: '管理台'
  },
])
const headerNavSelected = ref(['home']);

// 根据路由路径设置选中的菜单项
const updateSelectedMenu = () => {
  const path = route.path;
  // 去除路径中的'/'，获取路由名称
  const routeName = path.split('/')[1] || 'home';
  headerNavSelected.value = [routeName];
};

// 监听路由变化
watch(() => route.path, () => {
  updateSelectedMenu();
}, {immediate: true}); // immediate: true 确保组件加载时立即执行一次

</script>

<template>
  <a-layout class="container">
    <a-layout-header class="header">
      <div class="float-left">
        <img class="icon w-12 h-12" src="/icon.png" alt="icon">
        <span class="title mx-3 text-white text-xl">智能服务</span>
      </div>
      <a-menu
          v-model:selected-keys="headerNavSelected"
          theme="dark"
          mode="horizontal"
      >
        <a-menu-item v-for="menu in menus" :key="menu.key">
          <router-link :to="menu.path">{{ menu.name }}</router-link>
        </a-menu-item>
      </a-menu>
      <div class="float-right">
      </div>
    </a-layout-header>
    <router-view/>
  </a-layout>
</template>

<style scoped>
.container {
  min-height: 100vh;
}

.header {
  padding: 0 20px 0 20px;
}
</style>