import { mainMountedKey, tableMountedKey } from '../utils/key';
import {
  computed,
  defineComponent,
  inject,
  provide,
  type Ref,
  ref,
  watchEffect
} 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' : 'not-table'}`
    );

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

    watchEffect(() => {
      console.log('tableMounted.value :>> ', tableMounted.value);
    });

    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 };
