<script lang="ts">
export default {
  name: "LayLayout",
};
</script>

<script setup lang="ts">
import { Component, computed, useSlots } from "vue";
import Header from "../header/index.vue";
import "./index.less";

export interface LayLayoutProps {
  isVertical?: boolean;
}

const slots = useSlots();

const props = withDefaults(defineProps<LayLayoutProps>(), {
  isVertical: false,
});

const isVertical = computed(() => {
  if (!slots.default) return false;
  const vNodes = slots.default();
  return vNodes.some((vNode) => {
    const componentName = (vNode.type as Component).name;
    if (!componentName) return false;
    return [Header.name].includes(componentName);
  });
});

const classes = computed(() => {
  return ["layui-layout", { "layui-layout-vertical": isVertical.value }];
});
</script>

<template>
  <section :class="classes">
    <slot />
  </section>
</template>