<template>
  <div>
    <span v-for="(crumb, index) in breadcrumbList" :key="index">
      {{ crumb.menuNm }}
      <span v-if="index < breadcrumbList.length - 1"> &gt; </span>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      breadcrumbList: [],
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.generateBreadcrumb();
      }
    }
  },
  methods: {
    generateBreadcrumb() {
      const fullMenuList = this.$store.state.menuList || []; // 전체 메뉴 트리
      const currentPath = this.$route.path;
      const findMenuPath = (menus, path, trail = []) => {
        for (const menu of menus) {
          const newTrail = [...trail, menu];
          if (menu.routerUrl === path) return newTrail;
          if (menu.childList?.length) {
            const found = findMenuPath(menu.childList, path, newTrail);
            if (found) return found;
          }
        }
        return null;  
      };

      const breadcrumb = findMenuPath(fullMenuList, currentPath);
      this.breadcrumbList = breadcrumb || [];
    }
  },
};
</script>
