<template>
  <el-aside>
    <el-scrollbar style="height: 100vh;">
      <el-menu
        router
        unique-opened
        :collapse="isCollapse"
        :collapse-transition="false"
      >
        <a href="/" class="logo">
          <img src="@/assets/logo.svg" alt="" />
          <h1>土壤酸化模型</h1>
        </a>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><DataLine /></el-icon><span>参数配置</span>
          </template>
          <el-menu-item index="/ModelSelection">模型选择</el-menu-item>
          <el-menu-item index="/thres">阈值选择</el-menu-item>
          <el-menu-item index="/ModelTrain">模型训练</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/Visualization">
          <el-icon><Coordinate /></el-icon><span>反酸数据管理</span>
        </el-menu-item>
        <el-menu-item index="/Visualizatio">
          <el-icon><Coordinate /></el-icon><span>降酸数据管理</span>
        </el-menu-item>
        <el-menu-item index="/IntroductionUpdate">
          <el-icon><Coordinate /></el-icon><span>介绍信息管理</span>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script setup lang="ts">
import { DataLine, Coordinate } from '@element-plus/icons-vue';
import { inject, type Ref } from 'vue';

// 注入 isCollapse 值
const isCollapse = inject<Ref<boolean>>('isCollapse');
if (!isCollapse) {
  throw new Error('isCollapse was not provided by a parent component.');
}
</script>

<style lang="scss" scoped>
.el-aside {
  background-color: #e9e9eb;
  height: 100vh;
  width: auto;

  .el-scrollbar__wrap {
    overflow-x: hidden; // 隐藏水平滚动条
  }
}

.el-menu {
  background-color: #e9e9eb;
  border-right: none;
  width: 200px;
  white-space: nowrap;

  // 设置菜单项文字颜色为黑色，点击（选中）时变为绿色
  .el-menu-item,
  .el-sub-menu__title {
    color: black; // 正常状态下的文字颜色

    &:hover {
      color: #2ecc71; // 鼠标悬停时的文字颜色
    }
  }

  // 设置选中菜单项的文字颜色为同等颜色的绿色
  .el-menu-item.is-active {
    color: #2ecc71; // 选中状态下的文字颜色
  }

  &.el-menu--collapse {
    width: 64px;

    // 完全隐藏子菜单和菜单项中的文字
    span {
      display: none;
    }

    // 当鼠标悬停时显示文字
    .el-menu-item:hover > span,
    .el-sub-menu:hover > .el-sub-menu__title > span {
      display: inline;
    }

    // 确保图标大小适应折叠状态
    .el-icon {
      margin-right: 0;
    }

    // 隐藏logo中的标题
    h1 {
      display: none;
    }
  }

  // 确保非折叠状态下菜单项的文字显示正常
  &:not(.el-menu--collapse) {
    span {
      display: inline;
    }
  }
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  text-decoration: none;
  color: black;

  img {
    width: 32px;
    height: 32px;
    margin-right: 8px; // 增加图片与标题之间的间距
  }

  h1 {
    display: inline-block;
    margin: 0;
  }
}
</style>



