import { drawerKey, mainMountedKey, tableMountedKey } from '../utils/key';
import { computed, defineComponent, inject, provide, Ref, ref } from 'vue';

const Main = defineComponent({
  setup(props, { slots }) {
    const tableMounted = ref(false);
    provide(tableMountedKey, tableMounted);

    const mainMounted = inject<Ref<boolean>>(mainMountedKey)!;
    // 通知父组件这个组件被挂载
    mainMounted.value = true;

    const drawer = inject<Ref<boolean>>(drawerKey)!;

    /**
     * table 被挂载，样式要做出改变
     */
    const clsTableMounted = computed(
      () => `${tableMounted.value ? 'flex flex-col' : 'overflow-y-auto'}`
    );

    return () => (
      <div
        class={`table-layout__main h-full ${clsTableMounted.value} ${
          drawer.value ? 'flex-1' : ''
        }`}
      >
        {slots.default?.()}
      </div>
    );
  }
});

export { Main };
