<template>
  <div class="sidebar-container" :style="{ width: isCollapse ? '64px' : '200px' }">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical-demo"
      router
      :collapse="isCollapse"
      :collapse-transition="false"
    >
      <!-- 首页 -->
      <el-menu-item index="/merchant/dashboard">
        <el-icon><HomeFilled /></el-icon>
        <span>首页</span>
      </el-menu-item>

      <!-- 订单管理 -->
      <el-sub-menu index="/merchant/order">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>订单管理</span>
        </template>
        <el-menu-item index="/merchant/order/OrderManager">待办订单</el-menu-item>
      </el-sub-menu>

      <!-- 顾客评价 -->
      <el-sub-menu index="/merchant/reviews">
        <template #title>
          <el-icon><Star /></el-icon>
          <span>顾客评价</span>
        </template>
        <el-menu-item index="/merchant/reviews/store-reviews">门店评价</el-menu-item>
      </el-sub-menu>

      <!-- 商品管理 -->
      <el-sub-menu index="/merchant/products">
        <template #title>
          <el-icon><Goods /></el-icon>
          <span>商品管理</span>
        </template>
        <el-menu-item index="/merchant/products/list">菜品列表</el-menu-item>
      </el-sub-menu>

      <!-- 门店管理 -->
      <el-sub-menu index="/merchant/stores">
        <template #title>
          <el-icon><Shop /></el-icon>
          <span>门店管理</span>
        </template>
        <el-menu-item index="/merchant/stores/store-info">门店信息</el-menu-item>
      </el-sub-menu>
    </el-menu>
    <div class="collapse-button-container">
      <el-button @click="toggleCollapse" type="text" style="width: 100%">
        <el-icon size="20">
          <component :is="isCollapse ? Expand : Fold" />
        </el-icon>
        <span v-if="!isCollapse" style="margin-left: 10px">收起</span>
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Expand, Fold } from '@element-plus/icons-vue' // 导入图标

const emit = defineEmits(['collapse-changed']) // 定义 emits

const isCollapse = ref(false)
const route = useRoute()

const activeMenu = computed(() => {
  return route.path
})

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
  emit('collapse-changed', isCollapse.value) // 发出事件并传递状态
}
</script>

<style scoped>
/* 侧边栏容器 */
.sidebar-container {
  position: relative;
  height: 90vh;
  /* width: 200px; */ /* 宽度现在通过 :style 动态绑定 */
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 子元素垂直排列 */
  background-color: #fff; /* 确保容器有背景色 */
  border-right: 1px solid #e6e6e6; /* 保持边框 */
  transition: width 0.3s ease; /* 添加宽度过渡效果 */
}

/* 垂直菜单整体样式 */
.el-menu-vertical-demo {
  flex-grow: 1; /* 占据可用空间 */
  height: auto; /* 移除固定高度，让其自适应 */
  overflow-y: auto;
  border-right: none; /* 移除 el-menu 的右边框，因为 sidebar-container 已经有了 */
}

/* 收起状态下的菜单样式 */
.el-menu-vertical-demo.el-menu--collapse {
  width: 64px;
}

/* 菜单项及子菜单标题基础样式 */
.el-menu-vertical-demo .el-menu-item,
.el-menu-vertical-demo .el-sub-menu__title {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  padding: 0 20px;
  transition: all 0.3s ease;
}

/* 当菜单折叠时，调整菜单项及子菜单标题内边距 */
.el-menu--collapse .el-menu-item,
.el-menu--collapse .el-sub-menu__title {
  padding: 0 20px !important; /* Element Plus 可能会覆盖，使用 !important */
}

/* 图标样式 */
.el-menu-vertical-demo .el-icon {
  margin-right: 12px;
  color: #909399;
  font-size: 16px;
  transition: color 0.3s ease;
}

/* 菜单项及子菜单标题悬停效果 */
.el-menu-vertical-demo .el-menu-item:hover,
.el-menu-vertical-demo .el-sub-menu__title:hover {
  color: #409eff;
  background-color: transparent;
}

.el-menu-vertical-demo .el-menu-item:hover .el-icon,
.el-menu-vertical-demo .el-sub-menu__title:hover .el-icon {
  color: #409eff;
}

/* 激活状态样式 */
.el-menu-vertical-demo .el-menu-item.is-active {
  color: #409eff;
  font-weight: bold;
  background-color: transparent;
  border-right: 3px solid #409eff;
}

.el-menu-vertical-demo .el-menu-item.is-active .el-icon {
  color: #409eff;
}

/* 禁用状态样式 */
.el-menu-vertical-demo .el-menu-item.is-disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.el-menu-vertical-demo .el-menu-item.is-disabled .el-icon {
  color: #c0c4cc;
}

/* 菜单组标题样式 */
.el-menu-vertical-demo .el-menu-item-group__title {
  padding: 12px 20px 8px 20px;
  font-size: 12px;
  color: #909399;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 子菜单展开箭头样式 */
.el-menu-vertical-demo .el-sub-menu__icon-arrow {
  color: #909399;
  transition: all 0.3s ease;
}

.el-menu-vertical-demo .el-sub-menu.is-opened .el-sub-menu__icon-arrow {
  transform: rotateZ(180deg);
  color: #409eff;
}

/* 子菜单内容区域 */
.el-menu-vertical-demo .el-menu {
  background-color: #fafafa;
}

/* 嵌套菜单项及子菜单标题样式 */
.el-menu-vertical-demo .el-menu .el-menu-item,
.el-menu-vertical-demo .el-menu .el-sub-menu__title {
  height: 45px;
  line-height: 45px;
  font-size: 13px;
  padding-left: 45px;
  background-color: #fafafa;
}

.el-menu-vertical-demo .el-menu .el-menu-item:hover {
  color: #409eff;
  background-color: transparent;
}

.el-menu-vertical-demo .el-menu .el-menu-item.is-active {
  color: #409eff;
  background-color: transparent;
  border-right: 3px solid #409eff;
}

/* 深层嵌套子菜单 */
.el-menu-vertical-demo .el-menu .el-menu .el-menu-item {
  padding-left: 65px;
  font-size: 12px;
}

/* 移除默认的菜单边框 */
.el-menu-vertical-demo.el-menu--vertical {
  /* border-right: 1px solid #e6e6e6; */ /* 已移至 sidebar-container */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-menu-vertical-demo {
    width: 200px;
  }

  .el-menu-vertical-demo .el-menu-item,
  .el-menu-vertical-demo .el-sub-menu__title {
    padding: 0 15px;
    font-size: 13px;
  }

  .el-menu-vertical-demo .el-icon {
    margin-right: 8px;
    font-size: 14px;
  }
}

/* 收起按钮容器样式 */
.collapse-button-container {
  padding: 10px 0; /* 上下留白 */
  border-top: 1px solid #e6e6e6; /* 按钮上方的分割线 */
  background-color: #fff; /* 与菜单背景色一致 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 当侧边栏折叠时，确保按钮容器内的文本不换行或溢出 */
  overflow: hidden;
  white-space: nowrap;
}
</style>
