<template>
    <el-aside
        v-if="!navTabs.state.tabFullScreen"
        :class="[
            config.layout.menuCollapse ? '' : 'layout-aside-collapse',
            'layout-aside-' + config.layout.layoutMode + ' ' + (config.layout.shrink ? 'shrink' : ''),
        ]"
    >
        <Logo v-if="config.layout.menuShowTopBar" />

        <MenuVerticalChildren v-if="config.layout.layoutMode == 'Double'" />
        <MenuVertical v-else />
        <div class="layout-toggle-bar" @click="onMenuCollapse">
            <div class="layout-toggle-bar__top"></div>
            <div class="layout-toggle-bar__bottom"></div>
        </div>
    </el-aside>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import Logo from '/@/layouts/backend/components/logo.vue'
import MenuVertical from '/@/layouts/backend/components/menus/menuVertical.vue'
import MenuVerticalChildren from '/@/layouts/backend/components/menus/menuVerticalChildren.vue'
import { useConfig } from '/@/stores/config'
import { useNavTabs } from '/@/stores/navTabs'

defineOptions({
    name: 'layout/aside',
})

const config = useConfig()
const navTabs = useNavTabs()

const menuWidth = ref(config.menuWidth())

const onMenuCollapse = () => {
    if (config.layout.menuCollapse) {
        config.setLayout('menuCollapse', false)
    } else {
        config.setLayout('menuCollapse', true)
    }
    resizeHandler()
}
onMounted(() => {
    // 监听窗口大小变化
    window.addEventListener('resize', resizeHandler)
})

onUnmounted(() => {
    // 组件卸载前移除监听器
    window.removeEventListener('resize', resizeHandler)
})
const resizeHandler = () => {
    menuWidth.value = config.menuWidth()
}
</script>

<style scoped lang="scss">
.layout-aside-Default {
    background: var(--ba-bg-color-overlay);
    margin: 16px 0 16px 16px;
    height: calc(100vh - 32px);
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-border-radius-base);
    overflow: hidden;
    transition: width 0.3s ease;
    width: v-bind(menuWidth);
}
.layout-aside-Classic,
.layout-aside-Double {
    background-image: linear-gradient(90deg, #eaf6ff 0%, #fbfdff 100%) !important;
    margin: 0;
    height: 100vh;
    overflow: hidden;
    transition: width 0.3s ease;
    width: v-bind(menuWidth);
    position: relative;
}
.shrink {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
}
.layout-toggle-bar {
    cursor: pointer;
    height: 72px;
    width: 32px;
    position: absolute;
    top: calc(50% - 36px);

    right: -9px;
    .layout-toggle-bar__top {
        background-color: rgba(191, 191, 191, 1);
        position: absolute;
        width: 4px;
        border-radius: 2px;
        height: 38px;
        left: 14px;
        transition:
            background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .layout-toggle-bar__bottom {
        background-color: rgba(191, 191, 191, 1);
        position: absolute;
        width: 4px;
        border-radius: 2px;
        height: 38px;
        left: 14px;
        top: 34px;
        transition:
            background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    &:hover {
        .layout-toggle-bar__top {
            background-color: rgba(153, 153, 153, 1);
            transform: rotate(-12deg) scale(1.15) translateY(-2px);
        }
        .layout-toggle-bar__bottom {
            background-color: rgba(153, 153, 153, 1);
            transform: rotate(12deg) scale(1.15) translateY(2px);
        }
    }
}
.layout-aside-collapse {
    .layout-toggle-bar {
        &:hover {
            .layout-toggle-bar__top {
                background-color: rgba(153, 153, 153, 1);
                transform: rotate(12deg) scale(1.15) translateY(-2px);
            }
            .layout-toggle-bar__bottom {
                background-color: rgba(153, 153, 153, 1);
                transform: rotate(-12deg) scale(1.15) translateY(2px);
            }
        }
    }
}
</style>
