<template>
  <div class="header-handle">
    <!-- 菜单折叠 -->
    <!-- <div class="header-handle-item" @click="toggleCollapsed" v-if="getHeaderCollapsed">
      <menu-unfold-outlined v-if="collapsed" />
      <menu-fold-outlined v-else />
    </div> -->
    <!-- 刷新 -->
    <div class="header-handle-item" v-if="getHeaderReload" @click="reloadPage">
      <a-tooltip placement="bottom">
        <template #title>刷新</template>
        <SyncOutlined />
      </a-tooltip>
    </div>
    <!-- 面包屑 -->
    <div class="flex items-center ml-4 header-handle-breadcrumb">
      <a-breadcrumb v-if="getCrumbsShow">
        <template v-for="routeItem in breadcrumbList" :key="routeItem.name">
          <a-breadcrumb-item v-if="routeItem.meta.breadcrumbView != false">
            <a-dropdown v-if="routeItem.children.length">
              <span class="link-text">
                <component
                  v-if="getCrumbsShowIcon && routeItem.meta.icon"
                  :is="routeItem.meta.icon"
                />
                {{ routeItem.meta.title }}
              </span>
              <template #overlay>
                <a-menu>
                  <a-menu-item
                    v-for="item in routeItem.children"
                    :key="item.name"
                    @click="dropdownSelect(item)"
                  >
                    <span>{{ item.meta.title }}</span>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
            <span class="link-text" v-else>
              <component
                v-if="getCrumbsShowIcon && routeItem.meta.icon"
                :is="routeItem.meta.icon"
              />
              {{ routeItem.meta.title }}
            </span>
          </a-breadcrumb-item>
        </template>
      </a-breadcrumb>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
  import { useGo, useRedo } from '@/hooks/web/usePage';
  import { SyncOutlined } from '@ant-design/icons-vue';

  // const emit = defineEmits(['update:collapsed']);

  // const collapsed = inject('collapsed');

  const { getCrumbsShow, getCrumbsShowIcon, getHeaderReload } = useProjectSetting();

  const router = useRouter();
  const route = useRoute();
  const go = useGo();

  const breadcrumbList = computed(() => {
    return generator(route.matched);
  });

  function generator(routerMap) {
    return routerMap.map((item) => {
      const currentMenu = {
        ...item,
        label: item.meta.title,
        key: item.name,
        disabled: item.path === '/',
      };
      // 是否有子菜单，并递归处理
      if (item.children && item.children.length > 0) {
        // Recursion
        currentMenu.children = generator(item.children);
      }
      return currentMenu;
    });
  }

  // 刷新页面
  async function reloadPage() {
    const redo = useRedo(router);
    await redo();
  }

  function dropdownSelect(item) {
    go(item, false);
  }

  // function toggleCollapsed() {
  //   emit('update:collapsed');
  // }
</script>

<style lang="less" scoped>
  .header-handle {
    display: flex;
    height: 100%;
    flex-shrink: 0;

    &-item {
      padding: 0 12px;
      font-size: 14px;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      &:hover {
        background: hsla(0, 0%, 100%, 0.08);
        //background: #f9f9f9;
      }
    }
  }
</style>