<script setup>
import { inject, ref, computed, getCurrentInstance } from "vue";
import { useNamespace } from "@yh-ui/hooks";
import { useComponentTheme } from "@yh-ui/theme";
import { breadcrumbItemProps } from "./breadcrumb";
defineOptions({
  name: "YhBreadcrumbItem"
});
const props = defineProps(breadcrumbItemProps);
const ns = useNamespace("breadcrumb-item");
const breadcrumbContext = inject(
  "breadcrumbProps"
);
const { themeStyle } = useComponentTheme(
  "breadcrumb-item",
  computed(() => props.themeOverrides || breadcrumbContext?.themeOverrides?.value)
);
const instance = getCurrentInstance();
const router = computed(() => {
  const globalRouter = instance?.appContext.config.globalProperties?.$router;
  return globalRouter ?? null;
});
const linkRef = ref();
const linkClass = computed(() => [ns.e("link"), ns.is("link", !!props.to)]);
const handleLinkClick = (e) => {
  const activeRouter = router.value;
  if (!props.to || !activeRouter) return;
  e.preventDefault();
  if (props.replace) {
    activeRouter.replace(props.to);
  } else {
    activeRouter.push(props.to);
  }
};
</script>

<template>
  <span :class="ns.b()" :style="themeStyle">
    <!-- 文字/链接内容 -->
    <span ref="linkRef" role="link" :class="linkClass" @click="handleLinkClick">
      <slot />
    </span>

    <!-- 分隔符 -->
    <span :class="ns.e('separator')" role="presentation">
      <template v-if="breadcrumbContext?.separatorIcon?.value">
        <component :is="breadcrumbContext.separatorIcon.value" />
      </template>
      <template v-else>
        {{ breadcrumbContext?.separator?.value }}
      </template>
    </span>
  </span>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: normal;
  color: var(--yh-text-color-regular);
}
.yh-breadcrumb__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  cursor: pointer;
  color: var(--yh-text-color-placeholder);
  transition: color 0.2s;
}
.yh-breadcrumb__ellipsis:hover {
  color: var(--yh-color-primary);
}

.yh-breadcrumb {
  /* 最后一个子项隐藏分隔符 */
}
.yh-breadcrumb > span:last-child .yh-breadcrumb-item__separator {
  display: none;
}
.yh-breadcrumb > span:last-child .yh-breadcrumb-item__link {
  color: var(--yh-text-color-primary);
  font-weight: 500;
  cursor: default;
}
.yh-breadcrumb > span:last-child .yh-breadcrumb-item__link:hover {
  color: var(--yh-text-color-primary);
}

.yh-breadcrumb-item {
  display: inline-flex;
  align-items: center;
}
.yh-breadcrumb-item__link {
  transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  color: var(--yh-text-color-regular);
  cursor: default;
}
.yh-breadcrumb-item__link.is-link {
  font-weight: 500;
  cursor: pointer;
}
.yh-breadcrumb-item__link.is-link:hover {
  color: var(--yh-color-primary);
}

.yh-breadcrumb-item__separator {
  margin: 0 8px;
  color: var(--yh-text-color-placeholder);
  display: inline-flex;
  align-items: center;
}
.yh-breadcrumb-item__separator svg {
  width: 1em;
  height: 1em;
}
</style>
