<template>
  <div class="app-container">
    <div class="header">
      <h1 class="title">快递后台管理中心</h1>
    </div>
    <div class="menu">
      <el-menu :default-active="activeIndex" :router="true" class="el-menu-demo" mode="horizontal" :ellipsis="false"
        @select="handleSelect">
        <el-menu-item index="1" :route="{ name: 'personal' }">用户管理</el-menu-item>
        <el-menu-item index="2" :route="{ name: 'problem' }">问题中心</el-menu-item>
        <el-menu-item index="3" :route="{ name: 'addkuaidi' }">快件录入</el-menu-item>
        <el-menu-item index="4" :route="{ name: 'shopp' }">商品/货物管理</el-menu-item>
        <el-menu-item index="5" :route="{ name: 'notice' }">公告发布</el-menu-item>
        <el-menu-item index="6" :route="{ name: 'login' }" class="menu-item-right">退出</el-menu-item>
      </el-menu>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue';
import { useRoute } from 'vue-router';

// 当前菜单项的索引
const activeIndex = ref('1');

// 获取当前路由
const route = useRoute();

// 监听路由变化，更新菜单项的高亮
watchEffect(() => {
  switch (route.name) {
    case 'personal':
      activeIndex.value = '1';
      break;
    case 'problem':
      activeIndex.value = '2';
      break;
    case 'addkuaidi':
      activeIndex.value = '3';
      break;
    case 'shopp':
      activeIndex.value = '4';
      break;
    case 'notice':
      activeIndex.value = '5';
      break;
    case 'login':
      activeIndex.value = '6';
      break;
    default:
      activeIndex.value = '1';
      break;
  }
});
</script>

<style scoped>
.app-container {
  display: relative;
  flex-direction: column;
  height: 100vh;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #a4bacb;
  color: aliceblue;
  padding: 10px 20px;
}

.menu {
  margin-top: 50px;
}

.title {
  font-size: 15px;
  text-align: center;
}

.content {
  margin-top: 100px;
  /* 根据 header 和 menu 的高度调整 */
  flex: 1;
  overflow-y: auto;
}

@media (max-width: 600px) {
  .header h1 {
    font-size: 1.5rem;
  }

  .el-menu--horizontal {
    font-size: 0.9rem;
  }
}

.menu-item-right {
  margin-left: auto;
}
</style>