import { 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;

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

    // 左边可能是非 table 布局，所以要加上滚动
    const clsTableMounted2 = computed(
      () => `${tableMounted.value ? '' : 'overflow-y-auto'}`
    );

    return () => (
      // 不能在外层设置 padding，否则子元素 main：flex1 和 drawer：flex1 不会平均分
      <div
        class={`table-layout__main bg-white h-full flex-1 ${clsTableMounted2.value}`}
      >
        <div
          class={`table-layout__main-inner px-[32px] py-[24px] h-full w-full ${clsTableMounted.value}`}
        >
          {slots.default?.()}
        </div>
      </div>
    );
  }
});

export { Main };
