<template>
  <div class="sm:py-4 sm:px-0 mx-3 py-2">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">
        <el-icon class="cursor-pointer">
          <ElIconHouse/>
        </el-icon>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-if="data?.parentName">
        <span class="cursor-pointer hover:font-bold" @click="openSpmUrl(`/category`,data,data.categoryId)">{{ data.parentName }}</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-if="data?.categoryName">{{ title ? title : data.categoryName }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="title">{{ title }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

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

withDefaults(
    defineProps<{
      data?: any;
      title?: string;
    }>(),
    {}
);

</script>
