<template>
  <Layout :class="prefixCls" v-bind="lockEvents">
    <!-- <LayoutFeatures /> -->
    <LayoutHeader />
    <Layout :class="[layoutClass]">
      <!-- 左边 -->
      <LayoutSideBar
        v-if="menus?.menus?.title != '首页' && menus?.menus?.title != '待办事项' && menus?.menus?.title != '空间一张图'" />
      <!-- 左边结束 -->
      <Layout :class="`${prefixCls}-main`" class="fixed right-0 bottom-0 top-[60px] overflow-auto"
        style=" height: calc(100% - 60px);"
        :style="`width:${(menus?.menus?.title != '首页' && menus?.menus?.title != '待办事项' && menus?.menus?.title != '空间一张图') ? 'calc(100% - 213px)' : '100vw'}`">
        <LayoutMultipleHeader
          v-if="menus?.menus?.title != '首页' && menus?.menus?.title != '待办事项' && menus?.menus?.title != '空间一张图'" />
        <LayoutContent />
        <LayoutFooter />
      </Layout>
    </Layout>
  </Layout>
</template>

<script lang="ts">
import { defineComponent, computed, unref, toRef, watch } from 'vue';
import { Layout } from 'ant-design-vue';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import menusStore from '/@/store/menu'
import { useSplitMenu } from '/@/layouts/default/menu/useLayoutMenu';
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 { useRoute } from 'vue-router';
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 { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { useAppInject } from '/@/hooks/web/useAppInject';

export default defineComponent({
  name: 'DefaultLayout',
  props: {
    splitType: {
      type: Number as PropType<MenuSplitTyeEnum>,
      default: MenuSplitTyeEnum.NONE,
    },

    // menu Mode
    menuMode: {
      type: [String] as PropType<Nullable<MenuModeEnum>>,
      default: '',
    },
  },
  components: {
    LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
    LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')),
    LayoutHeader,
    LayoutContent,
    LayoutSideBar,
    LayoutMultipleHeader,
    Layout,
  },
  setup(props) {
    const { prefixCls } = useDesign('default-layout');
    const { getIsMobile } = useAppInject();
    const { getShowFullHeaderRef } = useHeaderSetting();
    const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
    const menus = menusStore()
    // Create a lock screen monitor
    const lockEvents = useLockPage();
    const router = useRoute();
    const { menusRef } = useSplitMenu(toRef(props, 'splitType'));

    watch(
      () => menusRef.value,
      () => {
        menusRef?.value.forEach((v: any) => {
          if (router.matched[0] && v.title == router.matched[0].meta.title) {
            menus.setMenus(v)
          }
        });
      }
    );

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

    return {
      getShowFullHeaderRef,
      getShowSidebar,
      prefixCls,
      getIsMobile,
      getIsMixSidebar,
      layoutClass,
      lockEvents,
      menus,
    };
  },
});
</script>
<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>
