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

import {
  defineComponent,
  onMounted,
  ref,
  computed,
  onUnmounted,
  reactive
} 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 state = reactive({
      sidebarShow: true
    });
    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);
      }
    };

    const onSlideChange = (val: boolean) => {
      state.sidebarShow = val;
    };
    onMounted(() => {
      // 指引事件
      eventGlobal.on('teacher-guideInfo', async (name: string) =>
        onUpdate(name)
      );

      eventGlobal.on('teacher-slideshow', onSlideChange);
    });
    onUnmounted(() => {
      eventGlobal.off('teacher-guideInfo', onUpdate);
      eventGlobal.off('teacher-slideshow', onSlideChange);
    });
    onMounted(() => {
      useResizeObserver(
        document.querySelector('#lessons-height') 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);
    });
    onUnmounted(() => {
      prepareStore.setSubjectId('');
    });
    return () => (
      <div
        class={[
          styles.prepareLessons,
          !state.sidebarShow && styles.hideSideBar
        ]}>
        {/* 左侧目录 */}
        <div
          class={styles.directoryMain}
          ref={directroyRef.value}
          id="lessons-height">
          <DirectoryList />
        </div>
        {/* 中间排课 */}
        <div class={styles.lessonMain}>
          <LessonMain />
        </div>
        {/* 资源 */}
        <div class={[styles.resourceMain]} id="lessons-1">
          <ResourceMain />
        </div>
        {showGuide.value ? <LessonsGuide></LessonsGuide> : null}
      </div>
    );
  }
});