classroom-instruments/src/views/prepare-lessons/components/lesson-main/index.tsx

import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import { NTabPane, NTabs } from 'naive-ui';
import Courseware from './courseware';
import Train from './train';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import TrainPresets from './train-presets';
import { eventGlobal } from '/src/utils';

export default defineComponent({
  name: 'lesson-main',
  setup() {
    const prepareStore = usePrepareStore();
    const state = reactive({
      editWorkShow: false // 是否编辑预设
    });

    return () => (
      <div class={styles['lesson-main']}>
        <NTabs
          defaultValue="courseware"
          paneClass={styles.paneTitle}
          justifyContent="center"
          paneWrapperClass={styles.paneWrapperContainer}
          value={prepareStore.getTabType}
          onUpdate:value={(val: string) => {
            prepareStore.setTabType(val);
            // 重置编辑状态
            prepareStore.setIsEditResource(false);
            prepareStore.setIsEditTrain(false);

            eventGlobal.emit(
              'teacher-slideshow',
              val === 'train' ? false : true
            );
          }}>
          <NTabPane name="courseware" tab="课件" displayDirective="show">
            <Courseware />
          </NTabPane>
          <NTabPane
            name="train"
            tab="作业"
            displayDirective="if"
            v-slots={{ tab: () => <span id="lessons-4">作业</span> }}
            {...{ id: 'lessons-4' }}>
            <div>
              {state.editWorkShow ? (
                <Train
                  onChange={(val: any) => {
                    state.editWorkShow = val.status;
                    if (!val.status) {
                      eventGlobal.emit('teacher-slideshow', false);
                    }
                  }}
                />
              ) : (
                <TrainPresets
                  onChange={(val: any) => (state.editWorkShow = val.status)}
                />
              )}
            </div>
          </NTabPane>
        </NTabs>
      </div>
    );
  }
});