<template>
  <div class="breadcrumb">
    <div
      class="step"
      v-for="(step, index) of navigationList"
      :key="index"
      :data-index="index"
    >
      <div class="icon medium fill-blue" v-if="index > 0">
        <SpIcon name="sp-chevron-right" />
      </div>
      <RouterLink class="h700 caps" :to="step.path">{{
        step.title
      }}</RouterLink>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const navigationList = ref([]);

    watch(
      () => router.currentRoute.value,
      (newVal) => {
        navigationList.value = [];

        for (let i = 0; i < newVal.matched.length; i++) {
          const breadcrumb = newVal.matched[i].meta.breadcrumb;
          const path = newVal.matched[i].path;

          if (breadcrumb) {
            const isFunction = typeof breadcrumb === "function";
            const title = isFunction ? breadcrumb() : breadcrumb;

            if (title) {
              navigationList.value.push({
                title,
                path,
              });
            }
          }
        }
      }
    );

    return {
      navigationList,
    };
  },
});
</script>
