<template>
  <div class="top-nav-bar">
    <div class="top-nav-left">
      <div class="top-nav-logo">
        <span class="top-nav-logo-text">智慧清洁</span>
      </div>
      <el-menu
        class="top-nav-menu"
        mode="horizontal"
        :default-active="onRoutes"
        :ellipsis="false"
        :background-color="sidebarBg"
        :text-color="sidebarText"
        :active-text-color="sidebarActive"
      >
        <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="navTo(item)">
              <el-icon><my-icon :type="item.icon"></my-icon></el-icon>
              <span>{{ item.title }}</span>
            </el-menu-item>
          </template>
          <template v-else>
            <el-sub-menu :index="item.id + ''" popper-class="top-nav-popper">
              <template #title>
                <el-icon><my-icon :type="item.icon"></my-icon></el-icon>
                <span>{{ 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="navTo(subItem)">
                    <span>{{ subItem.title }}</span>
                  </el-menu-item>
                </template>
                <template v-else>
                  <el-sub-menu :index="subItem.id + ''" popper-class="top-nav-popper top-nav-sub-popper">
                    <template #title>
                      <span>{{ subItem.title }}</span>
                    </template>
                    <el-menu-item
                      v-for="thirdItem in subItem.children"
                      :key="thirdItem.id"
                      :index="thirdItem.path"
                      @click="navTo(thirdItem)"
                    >
                      <span>{{ thirdItem.title }}</span>
                    </el-menu-item>
                  </el-sub-menu>
                </template>
              </template>
            </el-sub-menu>
          </template>
        </template>
      </el-menu>
    </div>

    <div class="top-nav-right">
      <header-com></header-com>
    </div>
  </div>
</template>

<script>
export default {
  name: "topMenuCom",
};
</script>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { commonService } from "../../ApiService/commonService";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import headerCom from "@/Components/common/headerCom.vue";

let menuArr = reactive([]);
let onRoutes = ref();
const $router = useRouter();
const $route = useRoute();

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);
  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 = (item) => {
  $router.push({
    path: item.path,
    query: { wId: item.webId, pageType: item.type },
  });
};
</script>

<style lang="scss" scoped>
.top-nav-bar {
  display: flex;
  align-items: center;
  height: var(--header-height);
  background: var(--sidebar-bg);
  padding: 0 var(--spacing-xl);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}

.top-nav-left {
  display: flex;
  align-items: center;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }
}

.top-nav-logo {
  flex-shrink: 0;
  margin-right: var(--spacing-2xl);
  padding-right: var(--spacing-xl);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  height: 60%;
  display: flex;
  align-items: center;
}

.top-nav-logo-text {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  white-space: nowrap;
}

.top-nav-menu {
  flex-shrink: 0;
  border-bottom: none;
  height: 100%;

  :deep(.el-menu-item),
  :deep(.el-sub-menu__title) {
    height: var(--header-height);
    line-height: var(--header-height);
    padding: 0 var(--spacing-lg);
    border-bottom: 2px solid transparent;
    font-size: var(--font-size-sm);
    transition: all 0.2s;
    color: var(--sidebar-text) !important;

    span, i, .el-icon {
      color: inherit !important;
    }

    &:hover {
      color: #fff !important;
      background: rgba(255, 255, 255, 0.06);
      span, i, .el-icon { color: inherit !important; }
    }
  }

  :deep(.el-menu-item.is-active) {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
    border-bottom-color: var(--sidebar-active);
    font-weight: 500;
    span, i, .el-icon { color: inherit !important; }
  }

  :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
    color: #fff !important;
    border-bottom-color: var(--sidebar-active);
    font-weight: 500;
    span, i, .el-icon { color: inherit !important; }
  }
}

.top-nav-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: var(--spacing-lg);
  padding-left: var(--spacing-lg);
  border-left: 1px solid rgba(255, 255, 255, 0.08);

  :deep(.header-actions) {
    padding: 0;
    gap: var(--spacing-sm);
  }

  :deep(.a-dropdown-link) {
    color: rgba(255, 255, 255, 0.85);
  }

  :deep(.user-avator img) {
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  :deep(.btn-action) {
    color: rgba(255, 255, 255, 0.6);
    &:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.1);
    }
  }
}
</style>

<!-- 弹出菜单样式（非 scoped） -->
<style lang="scss">
.top-nav-popper {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);

  .el-menu {
    background: var(--color-bg-card) !important;
    padding: var(--spacing-xs);
  }

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

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

  .el-sub-menu__title {
    background: transparent !important;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary) !important;
    &:hover {
      background: var(--color-primary-bg) !important;
      color: var(--color-primary) !important;
    }
  }

  .el-sub-menu.is-active > .el-sub-menu__title {
    color: var(--color-primary) !important;
  }
}

</style>
