<script lang="ts">
    import { computed, defineComponent, unref } from 'vue'
    import { Layout } from 'ant-design-vue'
    import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'

    import LayoutHeader from './header/index.vue'
    import LayoutContent from './content/index.vue'
    import LayoutSideBar from './sider/index.vue'
    import LayoutMultipleHeader from './header/MultipleHeader.vue'

    import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'
    import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'
    import { useDesign } from '/@/hooks/web/useDesign'
    import { useLockPage } from '/@/hooks/web/useLockPage'
    import { router } from '/@/router'

    import { useAppInject } from '/@/hooks/web/useAppInject'

    export default defineComponent({
        name: 'DefaultLayout',
        components: {
            LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
            LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')),
            LayoutHeader,
            LayoutContent,
            LayoutSideBar,
            LayoutMultipleHeader,
            Layout,
        },
        setup() {
            const { prefixCls } = useDesign('default-layout')
            const { getIsMobile } = useAppInject()
            const { getShowFullHeaderRef } = useHeaderSetting()
            const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting()

            // Create a lock screen monitor
            const lockEvents = useLockPage()

            const layoutClass = computed(() => {
                const cls: string[] = ['ant-layout']
                if (unref(getIsMixSidebar) || unref(getShowMenu)) {
                    cls.push('ant-layout-has-sider')
                }
                return cls
            })

            // 判断是否需要隐藏布局
            const hideLayout = computed(() => !!router.currentRoute.value.meta?.hideLayout)

            return {
                getShowFullHeaderRef,
                getShowSidebar,
                prefixCls,
                getIsMobile,
                getIsMixSidebar,
                layoutClass,
                lockEvents,
                hideLayout,
            }
        },
    })
</script>

<template>
    <Layout :class="prefixCls" v-bind="lockEvents">
        <LayoutFeatures />
        <LayoutHeader fixed v-if="getShowFullHeaderRef && !hideLayout" />
        <Layout :class="[layoutClass]">
            <LayoutSideBar v-if="(getShowSidebar || getIsMobile) && !hideLayout" />
            <Layout :class="`${prefixCls}-main`">
                <LayoutMultipleHeader v-if="!hideLayout" />
                <LayoutContent />
                <LayoutFooter v-if="!hideLayout" />
            </Layout>
        </Layout>
    </Layout>
</template>

<style lang="less">
    @prefix-cls: ~'@{namespace}-default-layout';

    .@{prefix-cls} {
        display: flex;
        width: 100%;
        min-height: 100%;
        background-color: @content-bg;
        flex-direction: column;

        > .ant-layout {
            min-height: 100%;
        }

        &-main {
            width: 100%;
            margin-left: 1px;
        }
    }
</style>
