<template>
  <div class="flex-justify-between h-f margin-left-lg margin-right-lg">
    <n-space class="flex-center h-f">
      <n-button
        quaternary
        @click="() => (collapsed = !collapsed)"
      >
        <template #icon>
          <Icon
            :name="collapsed ? 'LineMdMenuFoldRight' : 'LineMdMenuFoldLeft'"
          />
        </template>
      </n-button>
      <n-breadcrumb>
        <n-breadcrumb-item v-if="route.fullPath === INDEX_ROUTER.path">
          <Icon
            :name="INDEX_ROUTER?.meta?.icon"
            size="18"
          >
            {{ INDEX_ROUTER?.meta?.title }}
          </Icon>
        </n-breadcrumb-item>
        <n-breadcrumb-item
          v-for="item in breadcrumbList"
          :key="item.value"
        >
          <Icon
            :name="item?.extData?.icon"
            size="18"
          >
            {{ item.label }}
          </Icon>
        </n-breadcrumb-item>
      </n-breadcrumb>
    </n-space>
    <n-space>
      <FullScreen />
      <ToggleTheme />
      <UserAvatar />
    </n-space>
  </div>
</template>

<script setup lang="tsx">
  import { INDEX_ROUTER } from "@/config/constant";
  import { Icon } from "@/components/icon";
  import { usePermissionStore } from "@/stores/permission";
  import { computed } from "vue";
  import { useRoute, useRouter } from "vue-router";
  const permissionStore = usePermissionStore();
  import FullScreen from "@/components/fullScreen/index.vue";
  import ToggleTheme from "@/components/toggleTheme/index.vue";
  import UserAvatar from "@/components/userAvatar/index.vue";
  const route = useRoute();
  const router = useRouter();
  const collapsed = defineModel("collapsed");
  const breadcrumbList = computed(() => {
    const breadcrumbData =
      permissionStore.breadcrumbList[
        route.matched[route.matched.length - 1].path
      ] ?? [];
    return !breadcrumbData || breadcrumbData.length === 0 ? [] : breadcrumbData;
  });

  //todo 先不做处理
  const onBreadcrumbClick = (item: SelectNodeVo<string>, index: number) => {
    if (index !== breadcrumbList.value.length - 1) {
      router.push(item.value);
    }
  };
</script>
<style lang="scss" scoped>
  :deep(.n-breadcrumb-item__link) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>
