<template>
    <div
        :class="[
            'super-breadcrumb',
            superBreadcrumbData.length <= 1 && (customSystemRouter || homePage)
                ? 'super-breadcrumb-hide'
                : ''
        ]"
    >
        <div
            v-for="(item, index) in superBreadcrumbData"
            :key="index"
            :class="[
                'breadcrumb-item',
                (item.disabled && !item.compName) ||
                superBreadcrumbData.length === index + 1 ||
                (!item.hasHomePage && index === 0)
                    ? 'breadcrumb-item-disabled'
                    : ''
            ]"
            @click="breadcrumbClick(item, index)"
        >
            <i class="before-arrow" />
            <div class="breadcrumb-item-content">
                <svgIcon
                    v-if="item.menuIcon"
                    :icon-class="item.menuIcon"
                    icon-style="icon header-icon"
                />
                <span>{{ item.name }}</span>
            </div>
            <i class="after-arrow" />
        </div>
    </div>
</template>
<script lang="ts" setup>
import { computed, defineEmits, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useMenuStore } from '@/stores/menu'
import { generateBreadcrumbPath } from '@/utils/menu'

const menuStore = useMenuStore()
const router = useRouter()
const route = useRoute()

interface BreadcrumbItem {
    alias: string
    routerPath: string
    level: number
    isDirectory: boolean
    isCurrentRoute: boolean
    menuIcon?: string
    name?: string
    disabled?: boolean
    compName?: string

    [key: string]: any // 允许其他属性
}

const emit = defineEmits(['directory-click'])

const superBreadcrumbData = ref<BreadcrumbItem[]>([])
const customSystemRouter = computed(() => {
    return route?.meta?.customSystemRouter || false
})
const singlePageRouter = computed(() => {
    return route?.meta?.singlePage || false
})
const homePage = computed(() => {
    return route?.meta?.isHomePage || false
})
const currentMenuGroup = computed(() => menuStore.getCurrentMenuGroup)
const currentRoutePath = computed(() => route.path)

watch(
    () => route.path,
    (newPath) => {
        getBreadcrumbData()
    },
    { immediate: true }
)

function getBreadcrumbData() {
    if (singlePageRouter.value) {
        const name = route?.meta?.label || ''
        superBreadcrumbData.value = [
            {
                disable: true,
                name
            }
        ]
    } else if (currentMenuGroup.value) {
        const breadcrumbPath = generateBreadcrumbPath(
            route.path,
            [currentMenuGroup.value] // 将当前菜单组作为根节点
        )

        superBreadcrumbData.value = breadcrumbPath.map((item, index) => {
            const { children, routerPath, tabsStyle, ..._item } = item
            const level = routerPath.split('/').length - 2
            const hasHomePage = tabsStyle && JSON.parse(tabsStyle).tabType === 'card' // 利用菜单标签风格字段：选项卡样式
            return {
                routerPath, // 路由地址
                hasHomePage,
                level, // 层级
                isDirectory: level === 2, // 是否为目录（暂时只能约束2级）
                isCurrentRoute: currentRoutePath.value === routerPath, // 是否为当前路由
                ..._item
            }
        })
    } else {
        superBreadcrumbData.value = []
    }
}

function breadcrumbClick(item: any, index: number) {
    if (
        (item.disabled && !item.compName) ||
        superBreadcrumbData.value.length === index + 1 ||
        (!item.hasHomePage && index === 0)
    )
        return

    if (item.isDirectory) {
        emit('directory-click', item)
    } else {
        // 获取路由名称
        const routeName = item.alias || item.name

        // 优先使用store中存储的参数
        const storedParams = routeName ? menuStore.getRouteParams(routeName) : null

        const targetRoute = {
            path: item.routerPath,
            params: storedParams?.params || {},
            query: storedParams?.query || {}
        }
        router.push(targetRoute)
    }
}
</script>

<style lang="scss" scoped>
.super-breadcrumb {
    width: 100%;
    background-color: var(--theme-system-module-1);
    display: flex;
    align-items: center;
    column-gap: 12px;
    padding-left: 24px;
    transition: all 0.1s;
    height: 58px;

    $border-color: var(--border-color, #{$system-border-color2});
    $font-color: var(--theme-text-primary);

    &.super-breadcrumb-hide {
        height: 0;
        overflow: hidden;
    }

    .breadcrumb-item {
        padding: 0 5px 0 20px;
        height: 40px;
        margin: 8px 0;
        background: var(--theme-system-module-1);
        position: relative;
        border-top: 1px solid $border-color;
        border-bottom: 1px solid $border-color;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s;

        &:hover {
            --border-color: var(--theme-primary);
            --font-color: var(--theme-primary);

            .breadcrumb-item-content {
                span {
                    color: var(--theme-primary) !important;
                }
            }
        }

        &:first-child {
            border-radius: 8px 0 0 8px;
            border-left: 1px solid $border-color;
            padding: 0 5px 0 15px;

            .before-arrow {
                display: none;
            }
        }

        &:last-child {
            --font-color: #43a1ff !important;

            .breadcrumb-item-content {
                svg {
                    color: var(--theme-primary) !important;
                }

                span {
                    font-weight: 700;
                    color: var(--theme-primary) !important;
                }
            }
        }

        &.breadcrumb-item-disabled {
            --border-color: #{$system-border-color2};
            --font-color: var(--theme-text-primary);
            cursor: default;
        }

        .before-arrow {
            position: absolute;
            width: 0;
            height: 0;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            border-width: 20.5px 12px 20.5px 12px;
            border-style: solid;
            border-color: transparent transparent transparent $border-color;
            transition: all 0.2s;

            &::after {
                content: '';
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: -12px;
                border-width: 19.5px 11px 19.5px 11px;
                border-style: solid;
                border-color: transparent transparent transparent var(--theme-system-module-1);
            }
        }

        .breadcrumb-item-content {
            display: flex;
            align-items: center;
            column-gap: 5px;

            svg {
                margin-top: 1.5px;
                font-size: 18px;
                color: $font-color;
                transition: all 0.2s;
            }

            span {
                font-size: 14px;
                font-family:
                    Microsoft YaHei,
                    Microsoft YaHei,
                    serif;
                color: $font-color;
                transition: all 0.2s;
            }
        }

        .after-arrow {
            position: absolute;
            width: 0;
            height: 0;
            top: 50%;
            right: -22.5px;
            transform: translateY(-50%);
            border-width: 20.5px 12px 20.5px 12px;
            border-style: solid;
            border-color: transparent transparent transparent $border-color;
            transition: all 0.2s;

            &::after {
                content: '';
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: -9px;
                border-width: 19.5px 11px 19.5px 11px;
                border-style: solid;
                border-color: transparent transparent transparent var(--theme-system-module-1);
            }
        }
    }
}
</style>
