<template>

  <!-- 菜单logo区域 -->
  <MenuLogo></MenuLogo>

  <!-- 菜单区域 -->
  <!-- 通过当前路由获取路径返回给defalut-active,将默认事件绑定在当前路由路径上 -->
  <el-menu 
    router background-color="#00c6bf"
    :collapse="collapse"
    :default-active="activeIndex" 
    class="el-menu-vertical-demo"> 

  <!-- 注释掉暂时不需要的多余属性 -->
    <!-- <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group>
        <template #title><span>Group One</span></template>
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <template #title>Navigator Two</template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><document /></el-icon>
      <template #title>Navigator Three</template>
    </el-menu-item> -->


    <!-- 新增首页菜单栏选项 -->
    <el-menu-item index="/dashboard">
      <el-icon><Menu /></el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <!-- 添加菜单栏选项 -->
    <el-menu-item index="/user">
      <el-icon><Menu /></el-icon>
      <template #title>用户管理</template>
    </el-menu-item>
    <el-menu-item index="/category">
      <el-icon><Menu /></el-icon>
      <template #title>菜品分类</template>
    </el-menu-item>
    <el-menu-item index="/goods">
      <el-icon><Memo /></el-icon>
      <template #title>菜品管理</template>
    </el-menu-item>
    <el-menu-item index="/order">
      <el-icon><Monitor /></el-icon>
      <template #title>订单管理</template>
    </el-menu-item>
    <el-menu-item index="banner">
      <el-icon><Calendar /></el-icon>
      <template #title>广告管理</template>
    </el-menu-item>
    <el-menu-item index="comment">
      <el-icon><Edit /></el-icon>
      <template #title>评论管理</template>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
  // 引入菜单图标
  // import { Menu } from '@element-plus/icons-vue' 

  // 局部引入菜单栏中所有选项的图标
  import { Menu, Memo, Monitor, Calendar,Edit } from '@element-plus/icons-vue' 

  // 引入MenuLogo
  import MenuLogo from './MenuLogo.vue'

  // 添加 computed 导入
  import { ref, computed } from 'vue'


  // 引入路由
  import {useRoute} from 'vue-router'

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

  // 通过当前路由路径，获取激活选项
  const activeIndex = computed(()=>{
    const { path } = route
    return path
  })

  // 获取store中useCollapseStore传递给collapse属性控制菜单伸缩
  import { useCollapseStore } from '@/store/collapse'

  // 获取store
  const store = useCollapseStore()

  // 获取菜单状态
  const collapse = computed(()=>{
    return store.getCollapse
  })

</script>

<style scoped lang="scss">
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 230px;
    min-height: 400px;
  }

  .el-menu {
    border-right: none;
  }

  .el-menu .el-menu-item {
    color: #f0f0f0;
    font-size: 15px;
    font-weight: bold;
  }

  .el-menu-item.is-active {
    color: #ffffff !important;
    background-color: #009e99 !important; 
    font-size: 17px !important;
  }

  // 鼠标移动时菜单颜色
  :deep(.el-menu-item:hover) {
    color: #fff;
    background-color: #007874 !important;
    font-size: 17px !important;
  }
</style>