<template>
    <el-container class="is-vertical fullPage bg">
        <Navigator />
        <el-container style="overflow-x: hidden; overflow-y: hidden">
            <side-menu ref="sideMenu" />
            <el-main
                class="main-container corporate-customers"
                :class="homePage ? 'home-page' : ''"
            >
                <Breadcrumb @directory-click="breadcrumbClickDirectory" />
                <transition :name="transitionName" mode="out-in" appear>
                    <el-card
                        v-if="showPage"
                        class="app-box__card"
                        shadow="never"
                        :key="`${routePath}-show`"
                    >
                        <keep-alive v-if="keepAlive">
                            <router-view class="fullheight"></router-view>
                        </keep-alive>
                        <router-view v-else class="fullheight"></router-view>
                    </el-card>
                    <el-card v-else class="app-box__card" shadow="never" :key="`${routePath}-hide`">
                        <keep-alive v-if="keepAlive">
                            <router-view class="fullheight"> </router-view>
                        </keep-alive>
                        <router-view v-else class="fullheight"> </router-view>
                    </el-card>
                </transition>
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { computed, watch, ref } from 'vue'
import { useRoute } from 'vue-router'
import Navigator from './Navigator/index.vue'
import SideMenu from './SideMenu/index.vue'
import Breadcrumb from './Breadcrumb/index.vue'

const route = useRoute()

const homePage = false

const keepAlive = computed(() => {
    return route?.meta?.keepAlive || false
})

const routePath = computed(() => {
    return route.path
})

const showPage = ref(false)
const transitionName = ref('fade')

watch(
    () => routePath.value,
    (newPath, oldPath) => {
        const newPathLevel = newPath.split('/').filter(Boolean).length
        const oldPathLevel = oldPath ? oldPath.split('/').filter(Boolean).length : 0
        if (newPath === '/platLayout/homePage') {
            transitionName.value = 'fade'
        } else if (newPathLevel === 5 && oldPathLevel === 5) {
            transitionName.value = 'fold-left-slow'
        } else {
            transitionName.value = 'fold-left'
        }
    },
    { immediate: true }
)

import type { ComponentPublicInstance } from 'vue'

const sideMenu = ref<ComponentPublicInstance<{
    showDirectory: (item: any) => void
}> | null>(null)

const breadcrumbClickDirectory = (item: any) => {
    if (sideMenu.value) {
        sideMenu.value.showDirectory(item)
    }
}
</script>

<style lang="scss" scoped>
.fold-left-enter-active {
    animation: fold-left-in 0.5s;
}

.fold-left-leave-active {
    animation: fold-left-on 0.5s;
}

.fold-left-slow-enter-active {
    animation: fold-left-in 0.3s;
}

.fold-left-slow-leave-active {
    animation: fold-left-on 0.3s;
}

@keyframes fold-left-in {
    0% {
        transform: translate3d(-10%, 0, 0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes fold-left-on {
    0% {
        transform: translate3d(0%, 0, 0);
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        transform: translate3d(10%, 0, 0);
        opacity: 0;
    }
}

#app {
    background: var(--theme-system-bg);
    height: 100%;
}

.main-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background:
        url('@/assets/img/layout/loading.gif') no-repeat 50%,
        var(--theme-bg-primary);
}

.home-page.main-container {
    background-color: $color-primary;
}

.home-page > .el-card {
    box-shadow: none;
}

:deep(.el-card) {
    border-radius: 0;
    border: none;
    flex: 1;
}

.el-main {
    padding: 0;
    //background: #f0f8fe;
}

.app-box__card {
    height: 100%;
    background-color: var(--theme-system-bg);
    box-sizing: border-box;
}

.app-box__card :deep(> .el-card__header) {
    padding: 12px 20px;
    margin-bottom: 10px;
}

.app-box__card :deep(> .el-card__body) {
    height: 100%;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.single-sepical.app-box__card :deep(> .el-card__body) {
    height: 100%;
}

.home-page > .app-box__card :deep(> .el-card__body) {
    height: 100% !important;
}

.box-card-noheader :deep(> .el-card__body) {
    height: 100% !important;
}

:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
    background-color: rgba(155, 194, 230, 0.2) !important;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #211bce;
    font-weight: bold;
}

.fullheight {
    flex: 1;
}

:deep(.el-card) {
    border: 0;
    border-radius: 0;
}
</style>
