<template>
  <a-menu
      v-model:selectedKeys="selectedKeys"
      mode="inline"
      style="max-height: 200vh; min-height: 100vh;background-color: #ffe7ba"
      @click="handleClick"
  >
    <a-menu-item key="/index">
      <PieChartOutlined />
      <span>首页</span>
    </a-menu-item>
    <a-menu-item key="/userList">
      <UserOutlined />
      <span>用户列表</span>
    </a-menu-item>
    <a-sub-menu>
      <template #title>
            <span>
               <UserOutlined />
              <span>项目管理</span>
            </span>
      </template>
      <a-menu-item key="/project">接单管理</a-menu-item>
    </a-sub-menu>
    <a-menu-item key="/applicationRecord">
      <CommentOutlined />
      <span>结算管理</span>
    </a-menu-item>
    <a-sub-menu>
      <template #title>
            <span>
              <FileDoneOutlined />
              <span>接单管理</span>
            </span>
      </template>
      <a-menu-item key="/orderSort">接单分类</a-menu-item>
      <a-menu-item key="/orderDetail">接单详情</a-menu-item>
    </a-sub-menu>
    <a-sub-menu>
      <template #title>
            <span>
              <ReadOutlined />
              <span>课程管理</span>
            </span>
      </template>
      <a-menu-item key="/localCurriculum">本地课程</a-menu-item>
      <a-menu-item key="/linkedCourse">链接课程</a-menu-item>
    </a-sub-menu>
    <a-sub-menu>
      <template #title>
            <span>
              <FieldTimeOutlined />
              <span>勤工俭学</span>
            </span>
      </template>
      <a-menu-item key="/workList">工作列表</a-menu-item>
      <a-menu-item key="/workDetail">工作详情</a-menu-item>
    </a-sub-menu>

    <a-menu-item key="/community">
      <CommentOutlined />
      <span>社群</span>
    </a-menu-item>
  </a-menu>

</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {UserOutlined, FieldTimeOutlined, FileDoneOutlined,ReadOutlined,CommentOutlined,PieChartOutlined} from '@ant-design/icons-vue';
import {useRoute, useRouter} from "vue-router";

const route = useRoute();
const router = useRouter();
// 选中侧边栏
const selectedKeys = ref<string[]>(['/userList']);

onMounted(() => {
  setSelectedKey()
})

// 根据路由设置当前选中侧边栏
const setSelectedKey = () => {
  selectedKeys.value = [route.path];
}

// 路由跳转
const handleClick = (item: any) => {
  router.push(item.key)
}

</script>

<style scoped>
/* 全局菜单项样式 */
:deep(.ant-menu-item),
:deep(.ant-menu-submenu-title) {
  color: rgba(0, 0, 0, 0.85) !important; /* 未选中黑色字体 */
  font-weight: normal !important;
  transition: all 0.3s ease;
}

/* 选中项样式 */
:deep(.ant-menu-item-selected) {
  background-color: #ffa940 !important;
  color: white !important;
  font-weight: 600 !important;
}

/* 鼠标悬停样式 */
:deep(.ant-menu-item:hover),
:deep(.ant-menu-submenu-title:hover) {
  background-color: rgba(255, 169, 64, 0.1) !important;
}

/* 子菜单箭头颜色 */
:deep(.ant-menu-submenu-arrow::before),
:deep(.ant-menu-submenu-arrow::after) {
  background: rgba(0, 0, 0, 0.65) !important;
}

/* 子菜单展开时标题样式 */
:deep(.ant-menu-submenu-selected  .ant-menu-submenu-title) {
  color: rgba(0, 0, 0, 0.95) !important;
}

/* 折叠状态下选中样式 */
:deep(.ant-menu-inline-collapsed .ant-menu-item-selected) {
  background-color: #ffa940 !important;
}
</style>