<script lang="ts">
import { defineComponent, defineAsyncComponent } from "vue";
export default defineComponent({
  name: "SystemLayoutContent",
});
</script>

<script setup lang="ts">
// import LoginDrawer from '@/components/Service/Login/index/index.vue'
import ErrorLoading from "@/components/Module/AsyncContent/ErrorLoading.vue";
import { useRoute } from "vue-router";

const asyncContent = defineAsyncComponent({
  loader: () => import("@/components/Module/AsyncContent/index.vue"),
  delay: 2000,
  loadingComponent: ErrorLoading,
  errorComponent: ErrorLoading,
  timeout: 10000,
});

interface propsType {
  contentLoading: boolean;
}

let props = withDefaults(defineProps<propsType>(), {
  // 默认值
  contentLoading: true,
});

const route = useRoute();

const prefix = "_system-layout-content";
</script>

<!-- bgImg
 SiderImg-->
<template>
  <a-layout-content :class="prefix">
    <div class="router-view-box">
      <div v-if="props.contentLoading">
        <Suspense>
          <asyncContent>
            <RouterView :key="route.path" />
          </asyncContent>
          <template #fallback>
            <div class="empty-box">
              <a-spin />
            </div>
          </template>
        </Suspense>
      </div>
    </div>
    <!-- <LoginDrawer /> -->
  </a-layout-content>
</template>

<style lang="scss" scoped>
$prefix: "_system-layout-content";

.#{$prefix} {
  width: 100%;
  // background-color: #f4f6fc;
  width: 100%;
  height: calc(100vh - 60px);
  overflow: hidden;
  .router-view-box {
    width: 100%;
    height: 100%;
    // background-color: #f7f8fa;
    overflow: auto;
    box-sizing: border-box;
    > div {
      width: 100%;
      height: 100%;
    }
    .empty-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
