<template>
  <el-breadcrumb v-if="data" class="sm:py-4 sm:px-0 px-3 py-2" :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }"><el-icon><ElIconHouse /></el-icon></el-breadcrumb-item>
    <el-breadcrumb-item v-if="data.parentName" :to="{ path: data.parentStatus == 0 ? data.parentPath : ''}">{{ data.parentName }}</el-breadcrumb-item>
    <el-breadcrumb-item v-if="data.categoryName" :to="{ path: data.categoryPath }">{{ data.categoryName }}</el-breadcrumb-item>
    <el-breadcrumb-item>{{ data.title }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import type {Navigation} from "~/api/cms/navigation/model";
  withDefaults(
    defineProps<{
      // 选中的角色
      data?: Navigation;
    }>(),
    {}
);
</script>
