<!--
 * @Description: 面包屑
 * @Author: ZCY
 * @Date: 2022年12月7日09:49:19
-->
<script lang="ts" setup>
import type { BreadcrumbProps } from 'ant-design-vue';
import type { ComputedRef, Ref } from 'vue';
import { computed, inject } from 'vue';
import { Icon } from '@iconify/vue';
import type { AntMenu } from '../types';
import { tagsKey, routeKey, routerKey, themeColorKey } from '../../../utils/injectedKeys';

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

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

const { breadcrumb } = inject<{
  breadcrumb: Ref<BreadcrumbProps['routes']>;
  setBreadcrumb: (_: BreadcrumbProps['routes']) => void;
}>(tagsKey)!;

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

<template>
  <div class="u-layout-breadcrumb">
    <a-breadcrumb :routes="breadcrumb" class="!mx-1">
      <template #itemRender="item">
        <template v-if="item.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="item.route.breadcrumbName" />
        </template>
        <span
          v-else-if="item.routes.indexOf(item.route) === item.routes.length - 1"
          class="u-layout-breadcrumb-span"
          v-text="item.route.breadcrumbName"
        />
        <span
          v-else-if="item.route.breadcrumbName !== 'redirect'"
          class="u-layout-breadcrumb-sub-span"
          v-text="item.route.breadcrumbName"
        />
      </template>
    </a-breadcrumb>
  </div>
</template>

<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>
