classroom-instruments/src/views/prepare-lessons/index.tsx

import { defineComponent, onMounted, ref, computed, onUnmounted } 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';
import { eventGlobal } from '/src/utils';
import { setGuidance } from '/src/custom-plugins/guide-page/api';
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 &&
        isEndMounted.value
      );
    });
    const isEndMounted = ref(false);
    const directroyRef = ref();
    const onUpdate = async (name: string) => {
      if (name === 'prepare-lessons') {
        if (prepareStore.getTabType === 'courseware') {
          try {
            await setGuidance({
              guideTag: 'teacher-guideInfo',
              guideValue: JSON.stringify({ lessonsGuide: false })
            });
          } catch (e) {
            console.log(e);
          }
        }
        eventGlobal.emit('prepare-lessons-guide', prepareStore.getTabType);
      }
    };

    onMounted(() => {
      eventGlobal.on('teacher-guideInfo', async (name: string) =>
        onUpdate(name)
      );
    });
    onUnmounted(() => {
      eventGlobal.off('teacher-guideInfo', onUpdate);
    });
    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'
          );
        }
      );
      setTimeout(() => {
        isEndMounted.value = true;
      }, 300);
    });

    // 当前页面离开时
    onBeforeRouteLeave(() => {
      // 离开时恢复默认
      prepareStore.setTabType('courseware');
      prepareStore.setSelectMusicStatus(false);
      prepareStore.setSelectResourceStatus(false);
      prepareStore.setIsAddResource(false);
      prepareStore.setIsAddTrain(false);
      prepareStore.setIsEditResource(false);
      prepareStore.setIsEditTrain(false);
      // prepareStore.setSubjectId('');
      // prepareStore.setCoursewareList([]);
      // prepareStore.setTreeList([]);
      // prepareStore.setTrainList([]);
    });
    onUnmounted(() => {
      prepareStore.setSubjectId('');
    });
    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>
    );
  }
});