<!--面包屑-->
<script setup lang="ts">
import {ArrowRight} from '@element-plus/icons-vue'

withDefaults(
    defineProps<{
      data?: any;
      // 父级栏目
      categoryName?: string;
      // 当前栏目
      title?: string;
      // 正文
      detail?: string;
    }>(),
    {}
);
</script>
<template>
  <el-breadcrumb :separator-icon="ArrowRight"  class="py-4">
    <el-breadcrumb-item :to="{ path: '/' }">
      <el-icon class="cursor-pointer">
        <ElIconHouse/>
      </el-icon>
    </el-breadcrumb-item>
    <el-breadcrumb-item>
      <nuxt-link :to="data.path ? navTo(data) : navTo(data,`/${data.model}/${data.categoryId}.html`)" class="cursor-pointer hover:font-bold">{{ categoryName || data.parentName }}</nuxt-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item v-if="detail">
      <span>{{ detail }}</span>
    </el-breadcrumb-item>
    <el-breadcrumb-item v-else>
      <span>{{ title || data.title }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>
