<template>
    <el-breadcrumb
        v-if="!hideBread"
        class="app-breadcrumb"
        :separator-class="separatorClass"
    >
        <template
            v-for="(item, index) in levelList.list"
            :key="index"
        >
            <el-breadcrumb-item
                :to="item?.path"
            >
                <a
                    v-if="item?.href"
                    :href="item?.href"
                >
                    {{ item[breadKey] }}
                </a>
                <template v-else>
                    {{ item[breadKey] }}
                </template>
            </el-breadcrumb-item>
        </template>
    </el-breadcrumb>
</template>

<script lang="ts" setup>
import { reactive, computed, watch, onMounted } from 'vue'
import { __getItem, __setItem } from '../../script/index'
import { serveConfigInterface, levelListInterface } from './index'
const props = defineProps({
    separatorClass: {
        type: String,
        default: ''
    }
})
const router = window['router']
const route = window['route'] || {}
const serveConfig = reactive<serveConfigInterface>({
    data: {
        layoutType: ''
    }
})
const levelList = reactive<levelListInterface>({
    list: []
})
const hideBread = computed(() => {
    return (serveConfig.data.layoutType === 'new' ||serveConfig.data.layoutType === 'apex') && levelList.list.length <= 1
})
const breadKey = computed(() => {
    return 'zhName'
})
const getBreadcrumb = () => {
    levelList.list = route.meta?.breadcrumd as any || []
}
watch(() => route.path, () => {
    getBreadcrumb()
})
onMounted(() => {
    __getItem('serveConfig') && (serveConfig.data = __getItem('serveConfig'))
    getBreadcrumb()
})
</script>
<style lang="scss" scoped>

.app-breadcrumb {
    padding: 17px 15px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}
</style>
