import { defineComponent, onMounted, ref, computed } 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 { useResizeObserver } from '@vueuse/core';
import { onBeforeRouteLeave } from 'vue-router';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import { storeToRefs } from 'pinia';
import LessonsGuide from '@/custom-plugins/guide-page/lessons-guide';
export default defineComponent({
  name: 'prepare-lessons',
  setup() {
    const prepareStore = usePrepareStore();

    console.log(prepareStore, 'prepareStore');
    const { treeList, coursewareList } = storeToRefs(prepareStore);
    const showGuide = computed(() => {
      return treeList.value.length > 0 && coursewareList.value.length > 0;
    });
    const directroyRef = ref();
    onMounted(() => {
      useResizeObserver(
        document.querySelector('#lessons-1') as HTMLElement,
        (entries: any) => {
          const entry = entries[0];
          const { height } = entry.contentRect;
          document.documentElement.style.setProperty(
            '--window-page-lesson-height',
            height + 'px'
          );
        }
      );
    });

    // 当前页面离开时
    onBeforeRouteLeave(() => {
      // 离开时恢复默认
      prepareStore.setTabType('courseware');
      prepareStore.setSelectMusicStatus(false);
      prepareStore.setSelectResourceStatus(false);
      prepareStore.setIsAddResource(false);
      prepareStore.setIsAddTrain(false);
      // prepareStore.setCoursewareList([]);
      // prepareStore.setTreeList([]);
      // prepareStore.setTrainList([]);
    });
    return () => (
      <div class={styles.prepareLessons}>
        {/* 左侧目录 */}
        <div class={styles.directoryMain} ref={directroyRef.value}>
          <DirectoryList />
        </div>
        {/* 中间排课 */}
        <div class={styles.lessonMain}>
          <LessonMain />
        </div>
        {/* 资源 */}
        <div
          class={[
            styles.resourceMain
            // prepareStore.getSelectMusicStatus ||
            // prepareStore.getSelectResourceStatus
            //   ? styles.resourceClose
            //   : ''
          ]}
          id="lessons-1">
          <ResourceMain />
        </div>
        {showGuide.value ? <LessonsGuide></LessonsGuide> : null}
      </div>
    );
  }
});