<template>
    <div v-if="!showHeader" class="header"></div>
    <a-layout class="default-layout">
        <a-layout>
            <a-layout-sider
                theme="dark"
                v-model:collapsed="collapsed"
                collapsible
                width="208"
                @collapse="collapseFn"
            >
                <ys-menu
                    v-if="flog"
                    :menu="routes"
                    :route="route"
                    :router="router"
                    :collapsed="collapsed"
                    :permissions="userInfo?.permissions"
                />
            </a-layout-sider>
            <a-layout
                :class="layoutType === 'new' ? 'base-layout1' : 'base-layout'"
            >
                <ys-bread
                    v-if="isBread"
                    :breadData="breadData"
                    :route="route"
                    :router="router"
                />
                <a-layout-content
                    class="layout-content"
                    :class="margin0 ? 'margin0' : ''"
                    id="fullpageshow"
                >
                    <router-view />
                </a-layout-content>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script lang="ts">
import { useStore } from 'vuex'
import { defineComponent, reactive, ref, toRefs, watchEffect } from 'vue'
import routes from '@/router/index'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
    setup(): any {
        const route: any = useRoute()
        const router = useRouter()
        const flog = ref(false)
        const store = useStore()
        const updateView = ref(true)
        const _this = reactive({
            deployType: window.globalConfig.deployType,
            updateMenu: true,
        })
        const breadData = ref<any[]>([])
        const collapseFn = e => {
            store.commit('COLLAPSED', e)
        }
        watchEffect(() => {
            if (route.name) {
                flog.value = true
            }
            if (route.meta.bread) {
                breadData.value = route.meta.bread.concat([
                    {
                        title: route.meta.title,
                    },
                ])
            } else {
                breadData.value = [{ title: route.meta.title }]
            }
        })

        return {
            flog,
            routes,
            route,
            router,
            breadData,
            collapsed: ref<boolean>(false),
            ...toRefs(store.state),
            ...toRefs(_this),
            updateView,
            collapseFn,
            showHeader: ref(window.__MICRO_APP_ENVIRONMENT__),
        }
    },
})
</script>
