<template>
  <!-- <div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: yellow"></div> -->
  <Layout :class="prefixCls" v-bind="lockEvents">
    <LayoutFeatures />
    <LayoutHeader />
    <SystemSelect />
    <SimpleMap />
    <LayoutContent />
  </Layout>
</template>

<script lang="ts">
  import { defineComponent, computed, 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 SystemSelect from './feature/SystemSelect.vue';
  import SimpleMap from './feature/SimpleMap.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 { useAppInject } from '/@/hooks/web/useAppInject';

  export default defineComponent({
    name: 'DefaultLayout',
    components: {
      LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
      LayoutHeader,
      LayoutContent,
      Layout,
      SystemSelect,
      SimpleMap,
    },
    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(() => {
        let cls: string[] = ['ant-layout'];
        if (unref(getIsMixSidebar) || unref(getShowMenu)) {
          cls.push('ant-layout-has-sider');
        }
        return cls;
      });

      return {
        getShowSidebar,
        prefixCls,
        getIsMixSidebar,
        layoutClass,
        lockEvents,
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-default-layout';

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

    > .ant-layout {
      height: 0;
      margin: 10px;
      background-color: transparent;
      position: relative;
      z-index: @layout-basic-z-index;
    }

    &-main {
      width: 100%;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      // background-color: #aaaaaa32;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      // 代码逻辑说明:【issues/8709】LayoutContent样式多出1px
      // margin-left: 1px;
    }
  }
</style>
