<!--
 * @Description: 面包屑
 * @Author: ZCY
 * @Date: 2022年12月7日09:49:19
-->
<template>
  <div class="u-layout-breadcrumb">
    <a-breadcrumb :routes="routes" class="!mx-1">
      <template #itemRender="{ route, routes }">
        <template v-if="route.path === '/'">
          <Icon class="u-layout-breadcrumb-home" icon="carbon:home" @click="jumpPage('/')" />
          <span v-if="currentMenu?.key === '/'" class="u-layout-breadcrumb-span" v-text="route.breadcrumbName" />
        </template>
        <span
          v-else-if="routes.indexOf(route) === routes.length - 1"
          class="u-layout-breadcrumb-span"
          v-text="route.breadcrumbName"
        />
        <span
          v-else-if="route.breadcrumbName !== 'redirect'"
          class="u-layout-breadcrumb-sub-span"
          v-text="route.breadcrumbName"
        />
      </template>
    </a-breadcrumb>
  </div>
</template>

<script lang="ts" setup>
import type { ComputedRef, Ref } from 'vue';
import { computed, inject, ref, watch } from 'vue';
import { Icon } from '@iconify/vue';
import { generateEachPathByPath } from '../../utils';
import type { AntMenu } from '../../types';
import { clickedMenusKey, routeKey, routerKey, themeColorKey } from '../../utils/injectedKeys';

interface BreadCrumb {
  path: string;
  breadcrumbName?: string;
  children?: Array<BreadCrumb>;
}

const { router } = inject<{ router: Ref<any> }>(routerKey)!;
const { route } = inject<{ route: ComputedRef<Record<string, any>> }>(routeKey)!;
const { themeColor } = inject<{ themeColor: Ref<boolean> }>(themeColorKey)!;
const { clickedMenus } = inject<{ clickedMenus: Ref<AntMenu[]> }>(clickedMenusKey)!;

const currentMenu = computed(() => clickedMenus.value.find(menu => menu.key === route.value.path));

const routes = ref<BreadCrumb[]>([]);
const setBreadcrumb = () => {
  if (!route.value) return;
  routes.value = [];
  const paths = generateEachPathByPath(route.value.path, 0);
  routes.value.push({
    path: '/',
    breadcrumbName: currentMenu.value?.label
  });
  paths.forEach((path, index) => {
    const labelPath = currentMenu.value?.labelPath;
    const labelPathSplit = labelPath?.split('/').filter(i => i);
    const keyPath = currentMenu.value?.key;
    const keyPathSplit = keyPath?.split('/').filter(i => i);
    const breadcrumbName = labelPathSplit?.[index] || keyPathSplit?.[index];
    if (!breadcrumbName) return;
    routes.value.push({
      path,
      breadcrumbName
    });
  });
};

const jumpPage = (path: string) => {
  router.value.push({ path });
};

setBreadcrumb();

watch(
  () => route.value,
  () => {
    setBreadcrumb();
  },
  { deep: true }
);
</script>

<style scoped>
.u-layout-breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  padding: 0 0.75rem;
}
.u-layout-breadcrumb span {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.u-layout-breadcrumb-home {
  cursor: pointer;
  margin-right: 5px;
}
.u-layout-breadcrumb-home:hover {
  color: v-bind("themeColor.primary");
}
.u-layout-breadcrumb :deep(.ant-breadcrumb > ol) {
  flex-wrap: nowrap;
}
.u-layout-breadcrumb :deep(.ant-breadcrumb > ol > li) {
  display: flex;
  align-items: center;
}
.u-layout-breadcrumb :deep(.ant-breadcrumb-link) {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  color: v-bind("themeColor.topBarColor");
}
.u-layout-breadcrumb :deep(.ant-breadcrumb-separator) {
  color: v-bind("themeColor.topBarColor");
}
</style>
