<template>
  <el-breadcrumb
    separator="/"
    style="margin: 15px 10px; font-size: 1.05rem; opacity: 0.9"
  >
    <el-breadcrumb-item>
      <span class="title">工控運維管理平台</span>
    </el-breadcrumb-item>
    <el-breadcrumb-item
      v-for="(item, idx) in breadcrumbs"
      :key=" idx"
      :to="item.name ? { name: item.name } : undefined"
    >
      <span>{{ item.title }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { menuConfig } from "../../constants/menuConfig.js";

const route = useRoute();

function findBreadcrumbs(menu, route, path = []) {
  for (const item of menu) {
    const currentPath = [...path, { title: item.title, name: item.routeName || null }];
    if (item.routeName === route.name) {
      if (item.params) {
        const paramsMatch = Object.keys(item.params).every(key => item.params[key] == route.params[key]);
        if (paramsMatch) {
          return currentPath;
        }
      } else {
        return currentPath;
      }
    }
    if (item.children) {
      const result = findBreadcrumbs(item.children, route, currentPath);
      if (result) return result;
    }
  }
  return null;
}

const breadcrumbs = computed(() => {
  return findBreadcrumbs(menuConfig, route) || [];
});
</script>
