<template>
  <div v-if="update" class="bar-right relative">
    <div class="absolute right-0">
      <d-menu v-if="mListMore.length === 0" width="100%" class="py-0 px-0 h-[47px]" mode="horizontal"
        :disable-overflow-style="false" :default-select-keys="[id]" @select="handleNav">
        <template v-for="item in menuList" :key="item.id">
          <d-menu-item v-if="item.label !== '社区'" :key="item.id" class="g-menu-item"
            :class="{ 'devui-menu-item-select': pType === item.id }">
            <GLink :href="getLink(item)" :to="getTo(item)" class="flex gap-2 items-center">
              <GIcon v-if="(pType === item.id) && item.activeIcon" :name="item.activeIcon" />
              <GIcon :name="item.icon" v-else-if="item.icon" />
              <span class="hover:text-light">{{ item.label }}</span>
              <span v-if="item.num" class="hover:text-light"><Number :number="item.num" /></span>
            </GLink>
          </d-menu-item>
        </template>
      </d-menu>

      <template v-else>
        <d-menu width="100%" class="py-0 px-0 h-[47px]" mode="horizontal" :default-select-keys="[id]" @select="handleNav">
          <template v-for="item in mList" :key="item.id">
            <d-menu-item v-if="item.label !== '社区'" :key="item.id" class="g-menu-item"
              :class="{ 'devui-menu-item-select': pType === item.id }">
              <GLink :href="getLink(item)" :to="getTo(item)" class="flex gap-2 items-center">
                <GIcon v-if="(pType === item.id) && item.activeIcon" :name="item.activeIcon" />
                <GIcon :name="item.icon" v-else-if="item.icon" />
                <span class="hover:text-light">{{ item.label }}</span>
                <span v-if="item.num" class="hover:text-light"><Number :number="item.num" /></span>
              </GLink>
            </d-menu-item>
          </template>
          <d-sub-menu title="..." key="systemMore" class="d_menu_more">
            <template v-for="item in mListMore" :key="item.id">
              <d-menu-item v-if="item.label !== '社区'" :key="item.id" class="g-menu-item"
                :class="{ 'devui-menu-item-select': pType === item.id }">
                <div class="flex item_div">
                  <GLink :href="getLink(item)" :to="getTo(item)" class="flex gap-2 items-center">
                  <GIcon :name="item.icon" v-if="item.icon" />
                  <span class="hover:text-light">{{ item.label }}</span>
                  <span v-if="item.num" class="hover:text-light"><Number :number="item.num" /></span>
                </GLink>
                </div>
              </d-menu-item>
            </template>
          </d-sub-menu>
        </d-menu>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { orgInfoStore } from '@/stores/Org';
import { useGlobalInfoStore } from '@/stores/Global';
import { storeToRefs } from 'pinia';
import { useRepoId } from '@/utils/hooks/useRepoId';

const globalInfoStore = useGlobalInfoStore();

const orgStore = orgInfoStore();
interface Props {
  filter?: Function | null;
}
const props = defineProps<Props>();
const route = useRoute();
const router = useRouter();
const update = ref<boolean>(true);
const id = ref('');
const pType = computed(() => route.meta.pType); // 页面归属的tab高亮

const { menuInfo, customMenuInfo } = storeToRefs(globalInfoStore);
const menuList = computed(() => {
  let list: any;
  if (globalInfoStore.menuType === 'org') {
    list = [...menuInfo.value, ...customMenuInfo.value];
  } else {
    list = [...menuInfo.value];
  }
  // 菜单过滤
  if (props.filter) {
    list = list.filter(props.filter);
  }

  // 自定义菜单排序
  if (customMenuInfo.value?.length) {
    const index = list.findIndex((item) => item.id === 'orgSetting');
    if (index >= 0) {
      const orgSetting = list.splice(index, 1);
      list.push(orgSetting[0]);
    }
  }
  return list;
});

const mList = ref<any>([]);
const mListMore = ref<any>([]);
let seTime: any;
const computeW = () => {
  if (seTime) clearTimeout(seTime);
  seTime = setTimeout(() => {
    mList.value = [];
    mListMore.value = [];
    nextTick(() => {
      // 获取div元素的引用
      const d1: any = document.querySelector('.bar-right');
      const d2: any = document.querySelector('.devui-menu');
      if (!d1.clientWidth) return;
      let w = 0;
      for (let i = 0; i < d2.children.length - 1; i++) {
        w = w + d2.children[i].clientWidth + 32;
        if (w < d1.clientWidth - 85) {
          mList.value.push(menuList.value[i]);
        } else {
          mListMore.value.push(menuList.value[i]);
        }
      }
    });
  }, 100);
};

const { repoId } = useRepoId();
watch(
  [repoId],
  () => {
    globalInfoStore.setMenuType(route?.meta?.type);

    id.value = route.name as string;
    update.value = false; // 需要强制刷新 疑似devui Bug
    nextTick(() => {
      update.value = true;
      computeW();
    });
  },
  { immediate: true, deep: true }
);

watch(props, (val) => {
  // listen to filter function changes
  if (val.filter) {
    update.value = false;
    nextTick(() => {
      update.value = true;
      computeW();
    });
  }
});

watch(
  () => menuList.value,
  () => {
    computeW();
  },
  { immediate: true, deep: true }
);

// 点击tab跳转路由
const handleNav = (val: any) => {
  if (/^\/organization/.test(val.key)) {
    // 社区相关路由
    const openUrl = val.key.replace(':namespace', orgStore.orgInfo.full_path);
    window.open(openUrl, '_self');
  }
};

const getTo = (data: any) => {
  const link = {
    href: data.link || (data.content || ''), // 如有传入了链接，使用链接打开，此时新页面会全量加载
    to: null // 未传入链接，基于router-link打开，此时路由切换走spa router局部加载
  };

  if (!link.href) {
    try {
      link.to = router.resolve({
        name: data.id,
        params: {
          ...route.params
        }
      }).fullPath;
    } catch (err) {
      // ignore
    }
  }
  return link.to ? link.to : null;
};
const getLink = (data: any) => {
  return data.link || data.content || null;
};
const init = () => {
  computeW();
  window.addEventListener('resize', computeW);
};
onMounted(() => {
  init();
});
onUnmounted(() => {
  window.removeEventListener('resize', computeW);
  if (seTime) clearTimeout(seTime);
});
</script>

<style lang="scss" scoped>
.lidiv {
  line-height: var(--devui-line-height-base, 1.5);
  display: inline-flex;
  align-items: center;
  transform: translateY(-2.5px);
  text-align: center;
  white-space: nowrap;
}

:deep(.devui-submenu-title-content::after) {
  content: '更多';
  font-weight: 400;
  color: var(--color-light);
  margin-left: 0.5rem;
}

:deep.devui-menu-horizontal {
  .devui-menu-item {
    padding: 0 !important;
    margin: 0 16px;
  }
}

:deep .devui-menu-item-horizontal-wrapper-show {
  top: 40px !important;
  left: -55% !important;
  box-shadow: 0px 4px 8px 0px rgba(148, 163, 184, 0.1);
  border-radius: 3px !important;
  border: 1px solid #e6e7e8;
  padding: 0 !important;

  .devui-menu-item {
    line-height: 24px !important;
    margin: 16px 16px !important;
  }
}

:deep .devui-menu-item-horizontal-wrapper-hidden {
  top: 40px !important;
  left: -55% !important;
  box-shadow: 0px 4px 8px 0px rgba(148, 163, 184, 0.1);
  border-radius: 3px;
  border: 1px solid #e6e7e8;

  .devui-menu-item {
    line-height: 24px !important;
    margin: 16px 16px !important;
  }
}

:deep(.devui-submenu-title) {
  line-height: 46px !important;
  padding: 0 16px !important;
}

:deep(.devui-menu-item) {
  line-height: 46px !important;
}

:deep(.devui-menu-item-select) {

  span,
  svg {
    color: var(--color-font) !important;
    font-weight: 600 !important;
  }
}

:deep(.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-up,
  .devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-right) {
  display: none;
}

:deep(.devui-menu-horizontal .devui-menu-item:after) {
  left: 0;
  width: 100%;
}

ul.g-menu {
  padding: 0;
  background-color: transparent;
  height: 49px;
  overflow-x: auto;

  .g-menu-item {
    line-height: 45px;
    padding: 0 16px !important;

    &:after {
      left: 16px;
      right: 16px;
    }

    &:last-of-type {
      padding-right: 0 !important;

      &::after {
        right: 0;
      }
    }
  }

  :deep(.devui-menu-overflow-container) {
    &:after {
      left: 16px;
      right: 16px;
    }
  }

  .g-menu-item1 {
    pointer-events: none;
  }

  :deep(.devui-menu-item-select) {

    span,
    svg {
      color: var(--color-font) !important;
      font-weight: 600 !important;
    }
  }

  :deep(.devui-submenu) {
    line-height: 36px;
  }
}
.item_div{
  a {
    display: inline-block; /* 使 span 元素能够设置宽度 */
    width: 106px; /* 设置 span 元素的宽度 */
    overflow: hidden; /* 隐藏溢出内容 */
    white-space: nowrap; /* 防止文本换行 */
    text-overflow: ellipsis; /* 使用省略号来代表被省略的文本 */
    span{
      margin-left: 8px;
    }
  }
}
</style>
<style>
@media screen and (max-width: 1000px) {
  .g-header .devui-menu-horizontal .devui-menu-item:hover:after {
    width: 0;
  }
}
</style>
