<template>
    <el-breadcrumb v-if="showBreadcrumb" separator="/">
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbList"
        :key="index"
      >
        <i v-if="item.icon" :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </template>
  
  <script>
  export default {
    data() {
      return {
        breadcrumbList: [],
        showBreadcrumb: false // 控制是否显示面包屑导航
      };
    },
    watch: {
      $route() {
        this.updateBreadcrumb();
      }
    },
    mounted() {
      this.updateBreadcrumb();
    },
    methods: {
      updateBreadcrumb() {
        const currentPath = this.$route.path;
        // 判断是否为子页面
        if(!this.$parent.menuData)return
        const isSubPage = this.isSubPage(currentPath);
        this.showBreadcrumb = isSubPage;
  
        if (isSubPage) {
          this.breadcrumbList = this.getBreadcrumbList(currentPath);
        } else {
          this.breadcrumbList = [];
        }
      },
      isSubPage(path) {
        console.log(this.$parent.menuData,'this.$parent.menuData==');
        // 判断当前路径是否为子页面
        for (const menu of this.$parent.menuData) {
          for (const subMenu of menu.children) {
            if (subMenu.path === path) {
              return true;
            }
          }
        }
        return false;
      },
      getBreadcrumbList(path) {
        const breadcrumbList = [];
        // 遍历菜单数据，查找匹配的面包屑路径
        for (const menu of this.$parent.menuData) {
          for (const subMenu of menu.children) {
            if (subMenu.path === path) {
              breadcrumbList.push({ title: menu.title, icon: menu.icon });
              breadcrumbList.push({ title: subMenu.title });
              break;
            }
          }
        }
        return breadcrumbList;
      }
    }
  };
  </script>
  
  <style scoped>
  .el-breadcrumb {
    margin-bottom: 20px;
  }
  </style>