<template>
  <div class="page-header" style="margin-bottom:12px">
    <slot name="breadcrumb">
      <!-- 默认面包屑： 首页 > 当前模块 > 当前页面 -->
      <el-breadcrumb separator="/" style="margin:0 0 12px 0;">
        <el-breadcrumb-item>
          <router-link :to="homePath">首页</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <router-link :to="sectionPath">{{ sectionLabel }}</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </slot>
    <div style="display:flex;align-items:center;gap:12px">
      <el-button v-if="showBack" @click="$router.back()"><el-icon><ArrowLeft /></el-icon> 返回</el-button>
      <span style="font-size:16px;font-weight:600">{{ title }}</span>
    </div>
  </div>
</template>

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

// Props
const props = defineProps<{
  title: string
  showBack?: boolean
}>()
const showBack = props.showBack ?? true

// 当前路由信息，用于动态判断 Mock 模式与路径标签
const route = useRoute()

// Mock 模式下自动前缀处理
const isMockPath = typeof window !== 'undefined' && window.location.pathname.startsWith('/mock')
const homePath = isMockPath ? '/mock/dashboard' : '/dashboard'

// 侧边/模块名称的简要映射，尽量贴合现有路由设计
const pathHint = computed(() => {
  const p = route.path
  if (p.startsWith('/machine')) return '设备管理'
  if (p.startsWith('/worker')) return '工人管理'
  if (p.startsWith('/collect-address')) return '采集地址'
  return '管理中心'
})
const sectionPath = computed(() => (isMockPath ? '/mock' : '') + route.path.split('?')[0])
const sectionLabel = computed(() => pathHint.value)
</script>

<style scoped>
/* 该组件保留简单样式，交由全局样式统一风格 */
.page-header {
  /* 后续可扩展样式 */
}
</style>
