<script lang="tsx">
import { defineComponent, computed, watch, onUnmounted, Fragment } from 'vue'
import { useWindowSize } from '@vueuse/core'
import { useSkyConfiger } from '../../../hooks/hook-configer'

export default defineComponent({
    name: 'SkyContainer',
    emits: ['resize'],
    props: {
        headerHeight: { type: String, default: '60px' },
        headerBorder: { type: Boolean, default: true },
        headerHidden: { type: Boolean, default: false },
        asideMaxWidth: { type: String, default: '240px' },
        asideCollapsedWidth: { type: String, default: '65px' },
        asideBorder: { type: Boolean, default: true },
        asideHidden: { type: Boolean, default: false }
    },
    setup(props, { emit, slots }) {
        const { width, height } = useWindowSize()
        const { state, stateOption, setResize } = useSkyConfiger()

        const uninstall = watch(() => [width.value, height.value], onWindowResize, { immediate: true })
        onUnmounted(uninstall)

        const asideWidth = computed(() => {
            if (state.device === 'Mobile') return '0px'
            return state.collapsed ? props.asideCollapsedWidth : props.asideMaxWidth
        })

        async function onWindowResize() {
            return await setResize({ width: width.value, height: height.value }).then(() => {
                return emit('resize', stateOption.value)
            })
        }

        return () => (
            <el-config-provider namespace={state.namespace}>
                <el-container class="skyline-container" direction="vertical">
                    {!props.headerHidden && (
                        <el-header class={{ 'skyline-header': true, 'is-border': props.headerBorder }} height={props.headerHeight}>
                            {slots.header?.(stateOption.value)}
                        </el-header>
                    )}
                    <el-container direction="horizontal" v-loading={state.loading} style={{ overflow: 'hidden' }}>
                        {!props.asideHidden && !state.loading && (
                            <el-aside class={{ 'skyline-aside': true, 'is-border': props.asideBorder }} width={asideWidth.value}>
                                <el-scrollbar class="skyline-scrollbar">{slots.aside?.(stateOption.value)}</el-scrollbar>
                            </el-aside>
                        )}
                        {!state.loading && (
                            <el-container class="skyline-context-container" direction="vertical">
                                {slots.bookmark?.(stateOption.value)}
                                <el-main style={{ overflow: 'hidden', padding: '0px' }}>
                                    {slots.default && <Fragment>{slots.default(stateOption.value)}</Fragment>}
                                </el-main>
                            </el-container>
                        )}
                    </el-container>
                </el-container>
            </el-config-provider>
        )
    }
})
</script>

<style lang="scss" scoped>
.skyline-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    :deep(.el-sky-loading-mask) {
        background-color: #ffffff;
        .circular {
            width: 48px;
            height: 48px;
        }
        .path {
            stroke-width: 4px;
        }
    }
}
.skyline-context-container {
    height: 100%;
    overflow: hidden;
}
.skyline-header {
    position: relative;
    padding: 0;
    &.is-border {
        border-bottom: 1px solid var(--el-sky-border-color);
    }
}
.skyline-scrollbar > :deep(.el-sky-scrollbar__wrap > .el-sky-scrollbar__view) {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.skyline-aside {
    transition: width 0.3s;
    &.is-border {
        border-right: 1px solid var(--el-sky-border-color);
    }
}
</style>
