<!-- 工具栏：面包屑导航栏 -->
<template>
    <span class="tool-fox nav-breadcrumb">
        <el-breadcrumb separator="/">
            <transition-group name="bre">
                <el-breadcrumb-item class="bre-item" v-for="(item, index) in state.levelArray" :key="item.id">
                    <span class="bre-text" v-if="index === state.levelArray.length - 1">{{ item.title }}</span>
                    <b v-else>{{ item.title }}</b>
                </el-breadcrumb-item>
            </transition-group>
        </el-breadcrumb>
    </span>
</template>

<script setup name="nav-tool-breadcrumb">
import {nextTick, reactive, watch} from "vue";
import {useAppStore} from "../../../store/app";
import {homeTab} from "../../../router/home";
const appStore = useAppStore();

const state = reactive({
    levelArray: [homeTab] // 面包屑信息
})

// 刷新面包屑信息
function f5BreadcrumbInfo() {
    // 如果是首屏
    if(appStore.nativeTab.id === homeTab.id) {
        return state.levelArray = [homeTab];
    }

    // 否则从搜索列表中搜寻
    for (let item of appStore.searchList) {
        if(item.id === appStore.nativeTab.id) {
            return state.levelArray = [homeTab, ...item.level];
        }
    }

    // 如果遍历全局没有找到
    return state.levelArray = [homeTab, appStore.nativeTab];
}

// 监听 tab 切换，刷新一下
watch(() => appStore.nativeTab, () => {
    f5BreadcrumbInfo();
})

// 组件加载时触发一下
nextTick(function (){
    f5BreadcrumbInfo();
})


</script>

<style scoped lang="scss">
.nav-breadcrumb{
  height: 100%;
  vertical-align: middle;
  margin-left: -8px;
  cursor: text !important;
  display: inline-block;
}
.nav-breadcrumb:hover{
  background-color: rgba(0,0,0,0) !important;
}
.bre-item{cursor: text; display: inline-block; }
.bre-text{color: #888}


.bre-enter-active,
.bre-leave-active {
  will-change: transform;
  transition: all 0.5s ease;
}
.bre-enter-from,
.bre-leave-to {
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
}

</style>
