import { defineComponent, nextTick, onMounted, ref } from 'vue';
import styles from './index.module.less';
import DirectoryList from './components/directory-main';
import LessonMain from './components/lesson-main';
import ResourceMain from './components/resource-main';
import { useElementSize, useResizeObserver } from '@vueuse/core';
import { useRect } from '@vant/use';

export default defineComponent({
  name: 'prepare-lessons',
  setup() {
    const directroyRef = ref();
    // const
    onMounted(() => {
      // console.log(document.querySelector('#resourceRef')?.clientHeight);

      useResizeObserver(
        document.querySelector('#resourceRef') as HTMLElement,
        (entries: any) => {
          const entry = entries[0];
          const { height } = entry.contentRect;
          // document.body.setAttribute
          document.documentElement.style.setProperty(
            '--window-page-lesson-height',
            height + 'px'
          );
        }
      );
    });
    return () => (
      <div class={styles.prepareLessons}>
        {/* 左侧目录 */}
        <div class={styles.directoryMain} ref={directroyRef.value}>
          <DirectoryList />
        </div>
        {/* 中间排课 */}
        <div class={styles.lessonMain}>
          <LessonMain />
        </div>
        {/* 资源 */}
        <div class={styles.resourceMain} id="resourceRef">
          <ResourceMain />
        </div>
      </div>
    );
  }
});
