<template>
  <el-menu
    class="sidebar-el-menu"
    :background-color="sidebarBg"
    :text-color="sidebarText"
    :active-text-color="sidebarActive"
    :collapse-transition="false"
    :default-active="onRoutes"
    unique-opened
    :collapse="collapsed"
  >
    <template v-for="item in menuArr" :key="item.id">
      <template v-if="!item.children || item.children.length == 0">
        <el-menu-item :index="item.path" @click="(menu) => navTo(menu, item)">
          <template #title>
            <el-icon>
              <my-icon :type="item.icon"></my-icon>
            </el-icon>
            <span>{{ item.title }}</span>
          </template>
        </el-menu-item>
      </template>
      <template v-else>
        <el-sub-menu :index="item.id + ''">
          <template #title>
            <el-icon>
              <my-icon :type="item.icon"></my-icon>
            </el-icon>
            <span class="sub-title">{{ item.title }}</span>
          </template>
          <template v-for="subItem in item.children" :key="subItem.id">
            <template v-if="!subItem.children || subItem.children.length == 0">
              <el-menu-item
                :index="subItem.path"
                @click="(menu) => navTo(menu, subItem)"
              >
                <template #title>
                  <span>{{ subItem.title }}</span>
                </template>
              </el-menu-item>
            </template>
            <template v-else>
              <el-sub-menu :index="subItem.id + ''">
                <template #title>
                  <span>{{ subItem.title }}</span>
                </template>
                <template
                  v-for="thirdItem in subItem.children"
                  :key="thirdItem.id"
                >
                  <el-menu-item
                    :index="thirdItem.path"
                    @click="(menu) => navTo(menu, thirdItem)"
                  >
                    <template #title>
                      <span>{{ thirdItem.title }}</span>
                    </template>
                  </el-menu-item>
                </template>
              </el-sub-menu>
            </template>
          </template>
        </el-sub-menu>
      </template>
    </template>
  </el-menu>
</template>
<script>
export default {
  name: "sideMenuCom",
};
</script>
<script setup>
import { onMounted, reactive, ref } from "@vue/runtime-core";
import { commonService } from "../../ApiService/commonService";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
const props = defineProps({
  collapsed: {
    type: Boolean,
    required: true,
    default: false,
  },
});
let menuArr = reactive([]);
let onRoutes = ref();
const $router = useRouter();
const $route = useRoute();

// 从 CSS 变量读取颜色传给 el-menu prop
const sidebarBg = ref('#1e293b');
const sidebarText = ref('rgba(255,255,255,0.75)');
const sidebarActive = ref('#ffffff');

const readCssColors = () => {
  const style = getComputedStyle(document.documentElement);
  sidebarBg.value = style.getPropertyValue('--sidebar-bg').trim() || '#1e293b';
  sidebarText.value = 'rgba(255,255,255,0.75)';
  sidebarActive.value = '#ffffff';
};

onMounted(() => {
  readCssColors();
  // 监听主题切换
  window.addEventListener('layout-change', readCssColors);
  // MutationObserver 监听 style 属性变化（主色切换时）
  const observer = new MutationObserver(() => readCssColors());
  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });

  fetchSidebarData().then((res) => {
    menuArr.push(...res);
    onRoutes.value = $route.path;
  });
});
onBeforeRouteUpdate((to) => {
  onRoutes.value = to.path;
});

const fetchSidebarData = () => {
  return new Promise((resolve) => {
    commonService.sidebarData().then((res) => {
      if (res.code == 0) {
        resolve(res.data.children);
      }
    });
  });
};
const navTo = (menu, item) => {
  $router.push({
    path: item.path,
    query: { wId: item.webId, pageType: item.type },
  });
};
</script>
<style lang="scss" scoped>
.sidebar-el-menu {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: transparent;

  // 一级菜单项
  :deep(.el-menu-item) {
    height: 40px;
    line-height: 40px;
    margin: 2px 0;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    transition: all 0.2s;

    .el-icon { font-size: 16px; }

    &:hover, &:focus {
      background: rgba(255, 255, 255, 0.12) !important;
    }
  }

  // 一级菜单项选中 — 和 hover 类似的高亮效果
  :deep(.el-menu-item.is-active) {
    background: rgba(255, 255, 255, 0.12) !important;
    font-weight: 600;
  }

  // 子菜单标题
  :deep(.el-sub-menu > .el-sub-menu__title) {
    height: 40px;
    line-height: 40px;
    margin: 2px 0;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    transition: all 0.2s;

    .el-icon { font-size: 16px; }

    &:hover {
      background: rgba(255, 255, 255, 0.12) !important;
    }
  }

  // 含激活子路由的顶级子菜单 — 标题高亮
  :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
    background: rgba(255, 255, 255, 0.12) !important;
    font-weight: 600;
  }

  // 二级/三级子菜单项
  :deep(.el-sub-menu .el-menu .el-menu-item) {
    height: 36px;
    line-height: 36px;
    font-size: var(--font-size-xs);
    padding-left: 48px !important;
    margin: 1px 0;
    border-radius: var(--radius-sm);

    &:hover, &:focus {
      background: rgba(255, 255, 255, 0.1) !important;
    }
  }

  // 子菜单项选中
  :deep(.el-sub-menu .el-menu .el-menu-item.is-active) {
    background: rgba(255, 255, 255, 0.12) !important;
    font-weight: 600;
  }

  // 三级子菜单标题
  :deep(.el-sub-menu .el-menu .el-sub-menu > .el-sub-menu__title) {
    &:hover {
      background: rgba(255, 255, 255, 0.1) !important;
    }
  }

  // 折叠态图标居中
  &.el-menu--collapse {
    :deep(.el-menu-item) {
      padding: 0 !important;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-icon { margin: 0; }
    }
    :deep(.el-sub-menu__title) {
      padding: 0 !important;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-icon { margin: 0; }
      .el-sub-menu__icon-arrow { display: none; }
    }
  }
}
</style>

<!-- 侧边栏弹出子菜单（渲染在 body 下，需非 scoped） -->
<style lang="scss">
.el-menu--popup {
  background-color: var(--color-bg-card);
  padding: var(--spacing-xs);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);

  .el-menu-item {
    color: var(--color-text-primary);
    border-radius: var(--radius-sm);
    margin: 1px 0;
    font-size: var(--font-size-sm);

    &:hover {
      background: var(--color-primary-bg);
      color: var(--color-primary);
    }

    &.is-active {
      color: var(--color-primary);
      background: var(--color-primary-bg);
      font-weight: 500;
    }
  }

  .el-sub-menu__title {
    color: var(--color-text-primary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);

    &:hover {
      background: var(--color-primary-bg);
    }
  }
}
</style>
