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

import { defineComponent, nextTick, reactive, ref, watch } from 'vue';
import styles from './index.module.less';
// import { NTabPane, NTabs } from 'naive-ui';
import Courseware from './courseware/addCourseware';
// import Train from './train';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
// import TrainPresets from './train-presets';
import { eventGlobal } from '/src/utils';
import CoursewarePresets from './courseware-presets';
import CoursewareHead from './courseware-head';
import { NButton, NSpace } from 'naive-ui';

export default defineComponent({
  name: 'lesson-main',
  setup() {
    const prepareStore = usePrepareStore();
    const state = reactive({
      editCoursewareShow: false, // 是否编辑课件
      coursewareType: 'create' as 'create' | 'edit',
      addParam: {
        isAdd: false, // 是否添加
        id: null,
        addName: '' // 添加的名称
      },
      editCourseware: {} as any, //
      // editWorkShow: false, // 是否编辑预设
      editWork: {} as any // 预设模板编号
    });
    const coursewareHeadRef = ref();

    // 取消
    const onCancelCourseware = () => {
      eventGlobal.emit('coursewareClosed', coursewareHeadRef.value?.getForms());
    };

    const onSaveCourseware = () => {
      // console.log(
      //   coursewareHeadRef.value,
      //   coursewareHeadRef.value?.getForms(),
      //   '12'
      // );
      eventGlobal.emit('coursewareSave', coursewareHeadRef.value?.getForms());
    };

    return () => (
      <div
        class={[state.editCoursewareShow && styles.coursewareSection]}
        style={{ height: '100%' }}>
        {/* 编辑作业头部标题 */}
        {state.editCoursewareShow && (
          <div class={styles.coursewareHeader}>
            <CoursewareHead ref={coursewareHeadRef} />
          </div>
        )}

        <div class={styles['lesson-main']}>
          {state.editCoursewareShow ? (
            // <NTabs
            //   ref={lessonMainRef}
            //   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', false);
            //     if (val !== 'train') {
            //       state.editWorkShow = false;
            //     }
            //   }}>
            //   {!state.editWorkShow && (
            //     <NTabPane
            //       name="courseware"
            //       tab={
            //         state.editCoursewareShow
            //           ? state.coursewareType === 'create'
            //             ? '创建课件'
            //             : '编辑课件'
            //           : '课件'
            //       }
            //       displayDirective="if">
            //       <Courseware
            //         groupItem={state.editCourseware}
            //         onChange={(val: any) => {
            //           if (val.addParam) {
            //             state.addParam = val.addParam;
            //           }
            //           state.editCoursewareShow = val.status;
            //           prepareStore.setIsEditResource(val.status);
            //           if (!val.status) {
            //             eventGlobal.emit('teacher-slideshow', false);
            //           }
            //         }}
            //       />
            //     </NTabPane>
            //   )}
            // </NTabs>

            <Courseware
              groupItem={state.editCourseware}
              onChange={(val: any) => {
                if (val.addParam) {
                  state.addParam = val.addParam;
                }
                state.editCoursewareShow = val.status;
                prepareStore.setIsEditResource(val.status);
                if (!val.status) {
                  eventGlobal.emit('teacher-slideshow', false);
                }
              }}
            />
          ) : (
            <CoursewarePresets
              addParam={state.addParam}
              onChange={(val: any) => {
                state.coursewareType = val.type;
                state.editCoursewareShow = val.status;
                prepareStore.setIsEditResource(val.status);
                state.editCourseware = val.groupItem;
                state.addParam = {
                  isAdd: false, // 是否添加
                  id: null,
                  addName: '' // 添加的名称
                };
              }}
            />
          )}
        </div>

        {/* 编辑作业底部操作 */}
        {state.editCoursewareShow && (
          <div class={styles.coursewareFooter}>
            <NSpace>
              <NButton
                bordered={false}
                type="error"
                onClick={onCancelCourseware}>
                取消
              </NButton>
              <NButton type="primary" onClick={onSaveCourseware}>
                保存课件
              </NButton>
            </NSpace>
          </div>
        )}
      </div>
    );
  }
});