<template>
  <!-- Breadcrumb and Title -->
  <div class="flex justify-between items-center mb-4">
    <h1 class="text-lg font-medium">{{ displayTitle }}</h1>
    <div class="text-xs breadcrumbs">
      <ul>
        <li v-for="(item, index) in breadcrumbItems" :key="index">
          <template v-if="item.path">
            <a 
              :href="item.path" 
              class="text-gray-500"
            >
              {{ item.name }}
            </a>
          </template>
          <template v-else>
            <span class="text-gray-500">{{ item.name }}</span>
          </template>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const props = defineProps({
  title: {
    type: String,
    default: null  // 默认为null，将从路由中获取
  },
  // Optional custom breadcrumb items
  customBreadcrumbs: {
    type: Array,
    default: () => []
  }
});

const route = useRoute();

// Generate breadcrumb items based on current route
// 生成面包屑项
const breadcrumbItems = computed(() => {
  if (props.customBreadcrumbs.length > 0) {
    return props.customBreadcrumbs;
  }
  
  // 获取当前路径并分割成段
  const pathSegments = route.path.split('/').filter(segment => segment);
  
  return pathSegments.map((segment, index) => {
    const name = segment.charAt(0).toUpperCase() + segment.slice(1);
    
    // 对于最后一段，不设置链接
    if (index === pathSegments.length - 1) {
      return { name, path: '' };
    }
    
    // 创建到此段的路径
    const path = '/' + pathSegments.slice(0, index + 1).join('/');
    return { name, path };
  });
});

// 显示的标题：如果提供了自定义标题则使用，否则使用当前路径的最后一段
const displayTitle = computed(() => {
  if (props.title) {
    return props.title;
  }
  
  const pathSegments = route.path.split('/').filter(segment => segment);
  if (pathSegments.length > 0) {
    const lastSegment = pathSegments[pathSegments.length - 1];
    return lastSegment.charAt(0).toUpperCase() + lastSegment.slice(1);
  }
  
  return 'Dashboard';
});
</script>