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

import {
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  ref,
  watch
} from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NTooltip,
  NCarousel,
  NIcon,
  NImage,
  NInput,
  NModal,
  NScrollbar,
  NSelect,
  NSpace,
  NSpin,
  NTabPane,
  NTabs,
  useMessage
} from 'naive-ui';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import add from '@/views/studentList/images/add.png';
import iconSlideRight from '../../../images/icon-slide-right.png';
import CoursewareType from '../../../model/courseware-type';
import TheEmpty from '/src/components/TheEmpty';
import RelatedClass from '../../../model/related-class';
import { state } from '/src/state';
import { useResizeObserver } from '@vueuse/core';
import AttendClass from '/src/views/prepare-lessons/model/attend-class';
import {
  api_addByOpenCourseware,
  api_teacherChapterLessonCoursewareRemove,
  api_queryOpenCoursewareByPage,
  api_updateCoursewareInfo,
  teacherChapterLessonCoursewareList,
  courseScheduleStart
} from '../../../api';
import { useRoute, useRouter } from 'vue-router';
import TheMessageDialog from '/src/components/TheMessageDialog';
import { eventGlobal, fscreen } from '/src/utils';
import PreviewWindow from '/src/views/preview-window';
import Related from './related';
import Train from '../train';
import ResourceMain from '../../resource-main';

export default defineComponent({
  name: 'courseware-presets',
  props: {
    addParam: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    const prepareStore = usePrepareStore();
    const message = useMessage();
    const route = useRoute();
    const router = useRouter();
    const localStorageSubjectId = localStorage.getItem(
      'prepareLessonSubjectId'
    );

    const forms = reactive({
      // 选取参数带的，后取缓存
      leftWidth: '100%',
      rightWidth: '0',
      messageLoading: false,
      subjectId: route.query.subjectId
        ? Number(route.query.subjectId)
        : localStorageSubjectId
        ? Number(localStorageSubjectId)
        : '',
      courseScheduleSubjectId: route.query.courseScheduleSubjectId,
      classGroupId: route.query.classGroupId,
      preStudentNum: route.query.preStudentNum,
      bodyWidth: '100%',
      loading: false,
      openLoading: false,
      showRelatedClass: false,
      tableList: [] as any,
      openTableShow: true, // 是否显示
      openTableList: [] as any,
      selectItem: {} as any,
      editTitleVisiable: false,
      editTitle: null,
      editBtnLoading: false,
      preRemoveVisiable: false,
      addVisiable: false, // 是否有添加的课件
      carouselIndex: 0,
      showAttendClass: false,
      attendClassType: 'change', //
      attendClassItem: {} as any,
      previewModal: false,
      previewParams: {
        type: '',
        courseId: '',
        subjectId: '',
        detailId: ''
      } as any,
      workVisiable: false
    });

    const getCoursewareList = async () => {
      forms.loading = true;
      try {
        // 判断是否有选择对应的课件 或声部
        if (!prepareStore.getSelectKey) return (forms.loading = false);
        const { data } = await teacherChapterLessonCoursewareList({
          subjectId: prepareStore.getSubjectId,
          coursewareDetailKnowledgeId: prepareStore.getSelectKey
        });
        if (!Array.isArray(data)) {
          return;
        }
        const tempList: any = [];
        data.forEach((item: any) => {
          const firstItem: any =
            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
          tempList.push({
            id: item.id,
            lessonPreTrainingId: item.lessonPreTrainingId,
            openFlag: item.openFlag,
            openFlagEnable: item.openFlagEnable,
            subjectNames: item.subjectNames,
            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
            name: item.name,
            coverImg: firstItem?.bizInfo.coverImg,
            type: firstItem?.bizInfo.type,
            isNotWork: item.lessonPreTrainingNum <= 0 ? true : false // 是否布置作业
          });
        });
        forms.tableList = tempList;
      } catch {
        //
      }
      forms.loading = false;
    };

    // 监听选择的key 左侧选择了其它的课
    watch(
      () => [prepareStore.getSelectKey, prepareStore.getSubjectId],
      async () => {
        await getCoursewareList();
        // await getOpenCoursewareList();
        eventGlobal.emit('openCoursewareChanged');

        subjectRef.value?.syncBarPosition();
      }
    );

    watch(
      () => prepareStore.getSubjectList,
      () => {
        checkSubjectIds();
      }
    );

    const checkSubjectIds = () => {
      const subjectList = prepareStore.getSubjectList;

      // 并且没有声部时才会更新
      if (subjectList.length > 0) {
        const prepareLessonCourseWareSubjectIsNull = sessionStorage.getItem(
          'prepareLessonCourseWareSubjectIsNull'
        );
        if (prepareLessonCourseWareSubjectIsNull === 'true') {
          prepareStore.setSubjectId('');
          return;
        }

        // 并且声部在列表中
        const localStorageSubjectId = localStorage.getItem(
          'prepareLessonSubjectId'
        );
        // // 先取 上次上课声部，在取班级声部 最后取缓存
        let subjectId = null;
        let index = -1;
        if (forms.courseScheduleSubjectId) {
          // 判断浏览器上面是否有
          index = subjectList.findIndex(
            (subject: any) => subject.id == forms.courseScheduleSubjectId
          );
          if (index >= 0) {
            subjectId = Number(forms.courseScheduleSubjectId);
          }
        }
        // 判断班级上面声部 & 还没有声部
        if (forms.subjectId && !subjectId) {
          // 判断浏览器上面是否有
          index = subjectList.findIndex(
            (subject: any) => subject.id == forms.subjectId
          );
          if (index >= 0) {
            subjectId = Number(forms.subjectId);
          }
        }
        // 缓存声部 & 还没有声部
        if (localStorageSubjectId && !subjectId) {
          // 判断浏览器上面是否有
          index = subjectList.findIndex(
            (subject: any) => subject.id == localStorageSubjectId
          );
          if (index >= 0) {
            subjectId = Number(localStorageSubjectId);
          }
        }
        // 判断是否选择为空
        if (subjectId && index >= 0) {
          prepareStore.setSubjectId(subjectId);
          // forms.subjectId = subjectId;
        } else {
          // 判断是否有缓存
          // prepareStore.setSubjectId(subjectList[0].id);
          // forms.subjectId = subjectList[0].id;
        }

        // 保存
        localStorage.setItem(
          'prepareLessonSubjectId',
          prepareStore.getSubjectId as any
        );

        subjectRef.value?.syncBarPosition();
      }
    };

    const subjectRef = ref();
    onMounted(async () => {
      useResizeObserver(
        document.querySelector('#presetsLeftRef') as HTMLElement,
        (entries: any) => {
          const entry = entries[0];
          const { width } = entry.contentRect;
          forms.leftWidth = width + 'px';
        }
      );
      useResizeObserver(
        document.querySelector('#presetsRightRef') as HTMLElement,
        (entries: any) => {
          const entry = entries[0];
          const { width } = entry.contentRect;
          forms.rightWidth = width + 'px';
        }
      );

      prepareStore.setClassGroupId(route.query.classGroupId as any);
      if (!prepareStore.getSubjectId) {
        // 获取教材分类列表
        checkSubjectIds();
      }

      await getCoursewareList();

      console.log(props.addParam, 'addCourseware');
      if (props.addParam.isAdd) {
        forms.addVisiable = true;
      }
    });

    const getModalHeight = () => {
      const dom: any = document.querySelector('#model-homework-height');
      if (dom) {
        useResizeObserver(dom as HTMLElement, (entries: any) => {
          const entry = entries[0];
          const { height } = entry.contentRect;
          dom.style.setProperty('--window-page-lesson-height', height + 'px');
        });
      }
    };

    // 重命名
    // const onEditTitleSubmit = async () => {
    //   try {
    //     await api_updateCoursewareInfo({
    //       id: forms.selectItem.id,
    //       name: forms.editTitle
    //     });
    //     message.success('修改成功');
    //     getCoursewareList();
    //     // getOpenCoursewareList()
    //     forms.editTitleVisiable = false;
    //   } catch {
    //     //
    //   }
    // };

    // 删除
    const onRemove = async () => {
      forms.messageLoading = true;
      try {
        await api_teacherChapterLessonCoursewareRemove({
          id: forms.selectItem.id
        });
        message.success('删除成功');
        getCoursewareList();
        // getOpenCoursewareList();
        eventGlobal.emit('openCoursewareChanged');
        forms.preRemoveVisiable = false;
      } catch {
        //
      }
      setTimeout(() => {
        forms.messageLoading = false;
      }, 100);
    };

    // 添加课件
    const onAddCourseware = async (item: any) => {
      if (forms.messageLoading) return;
      forms.messageLoading = true;
      try {
        await api_addByOpenCourseware({ id: item.id });
        message.success('添加成功');
        getCoursewareList();
        // getOpenCoursewareList();
        eventGlobal.emit('openCoursewareChanged');
      } catch {
        //
      }
      setTimeout(() => {
        forms.messageLoading = false;
      }, 100);
    };

    // 预览上课
    const onPreviewAttend = (id: string) => {
      // 判断是否在应用里面
      if (window.matchMedia('(display-mode: standalone)').matches) {
        state.application = window.matchMedia(
          '(display-mode: standalone)'
        ).matches;
        forms.previewModal = true;
        fscreen();
        forms.previewParams = {
          type: 'preview',
          courseId: id,
          subjectId: prepareStore.getSubjectId,
          detailId: prepareStore.getSelectKey,
          lessonCourseId: prepareStore.getBaseCourseware.id
        };
      } else {
        const { href } = router.resolve({
          path: '/attend-class',
          query: {
            type: 'preview',
            courseId: id,
            subjectId: prepareStore.getSubjectId,
            detailId: prepareStore.getSelectKey,
            lessonCourseId: prepareStore.getBaseCourseware.id
          }
        });
        window.open(href, +new Date() + '');
      }
    };

    const onStartClass = async (item: any, classGroupId: any) => {
      if (classGroupId) {
        // 开始上课
        const res = await courseScheduleStart({
          lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
          classGroupId: classGroupId,
          useChapterLessonCoursewareId: item.id,
          subjectId: prepareStore.getSubjectId
        });
        if (window.matchMedia('(display-mode: standalone)').matches) {
          state.application = window.matchMedia(
            '(display-mode: standalone)'
          ).matches;
          forms.previewModal = true;
          fscreen();
          forms.previewParams = {
            type: 'class',
            classGroupId: classGroupId,
            courseId: item.id,
            subjectId: prepareStore.getSubjectId,
            detailId: prepareStore.getSelectKey,
            classId: res.data,
            lessonCourseId: prepareStore.getBaseCourseware.id,
            preStudentNum: forms.preStudentNum
          };
        } else {
          const { href } = router.resolve({
            path: '/attend-class',
            query: {
              type: 'class',
              classGroupId: classGroupId,
              courseId: item.id,
              subjectId: prepareStore.getSubjectId,
              detailId: prepareStore.getSelectKey,
              classId: res.data,
              lessonCourseId: prepareStore.getBaseCourseware.id,
              preStudentNum: forms.preStudentNum
            }
          });
          window.open(href, +new Date() + '');
        }
      } else {
        forms.showAttendClass = true;
        forms.attendClassType = 'change';
        forms.attendClassItem = item;
      }
    };

    // const carouselRef = ref();
    // const onChangeSlide = (type: 'left' | 'right') => {
    //   if (type === 'left') {
    //     carouselRef.value?.prev();
    //   } else if (type === 'right') {
    //     carouselRef.value?.next();
    //   }
    // };
    return () => (
      <div
        class={[
          styles.coursewarePresetsContainer,
          forms.openTableShow && styles.rightLineShow
        ]}>
        <div
          class={styles.presetsLeft}
          id="presetsLeftRef"
          style={{ width: `calc(${forms.leftWidth} - ${forms.rightWidth})` }}>
          <NTabs
            ref={subjectRef}
            defaultValue="subject"
            paneClass={styles.paneTitle}
            justifyContent="start"
            paneWrapperClass={styles.paneWrapperContainer}
            value={prepareStore.getSubjectId?.toString()}
            onUpdate:value={val => {
              prepareStore.setSubjectId(val);
              // 保存
              forms.subjectId = val;

              if (!val) {
                sessionStorage.setItem(
                  'prepareLessonCourseWareSubjectIsNull',
                  val ? 'false' : 'true'
                );
              }
            }}
            v-slots={{
              suffix: () => (
                <NButton
                  class={styles.addBtn}
                  type="primary"
                  bordered={false}
                  onClick={() => {
                    eventGlobal.emit('teacher-slideshow', true);
                    emit('change', {
                      status: true,
                      type: 'create'
                    });
                  }}>
                  <NImage
                    class={styles.addBtnIcon}
                    previewDisabled
                    src={add}></NImage>
                  创建课件
                </NButton>
              )
            }}>
            {[{ name: '全部声部', id: '' }, ...prepareStore.getSubjectList].map(
              (item: any) => (
                <NTabPane
                  name={`${item.id}`}
                  tab={item.name}
                  displayDirective="if"></NTabPane>
              )
            )}
          </NTabs>
          <NSpin show={forms.loading}>
            <NScrollbar class={styles.coursewarePresets}>
              <div style={{ overflow: 'hidden' }}>
                <div
                  class={[
                    styles.list,
                    !forms.loading &&
                      forms.tableList.length <= 0 &&
                      styles.listEmpty
                  ]}>
                  {forms.tableList.map((item: any) => (
                    <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
                      <div class={styles.itemWrapBox}>
                        <CoursewareType
                          operate
                          isEditName
                          item={item}
                          onClick={() => onPreviewAttend(item.id)}
                          // onEditName={() => {
                          //   forms.selectItem = item;
                          //   forms.editTitle = item.name;
                          //   forms.editTitleVisiable = true;
                          // }}
                          onEdit={() => {
                            //
                            eventGlobal.emit('teacher-slideshow', true);
                            emit('change', {
                              status: true,
                              type: 'update',
                              groupItem: { id: item.id }
                            });
                          }}
                          onStartClass={() =>
                            onStartClass(item, forms.classGroupId)
                          }
                          onDelete={() => {
                            forms.selectItem = item;
                            forms.preRemoveVisiable = true;
                          }}
                          // 布置作业
                          onWork={() => {
                            forms.workVisiable = true;
                            forms.selectItem = item;
                            nextTick(() => {
                              getModalHeight();
                            });
                          }}
                        />
                      </div>
                    </div>
                  ))}
                  {!forms.loading && forms.tableList.length <= 0 && (
                    <TheEmpty
                      class={styles.empty1}
                      description="当前章节暂无课件，快点击右上角创建课件吧"
                    />
                  )}
                </div>
              </div>
            </NScrollbar>
          </NSpin>
        </div>

        <div class={styles.presetsRight} id="presetsRightRef">
          <NTooltip showArrow={false}>
            {{
              trigger: () => (
                <div
                  class={[
                    styles.presetsArrar,
                    !forms.openTableShow && styles.presetsArrarActive
                  ]}
                  onClick={() => (forms.openTableShow = !forms.openTableShow)}>
                  <NIcon>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                      <path
                        d="M16.62 2.99a1.25 1.25 0 0 0-1.77 0L6.54 11.3a.996.996 0 0 0 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76z"
                        fill="currentColor"></path>
                    </svg>
                  </NIcon>
                </div>
              ),
              default: () => <div>{forms.openTableShow ? '收起' : '展开'}</div>
            }}
          </NTooltip>

          <Related
            onMore={() => (forms.showRelatedClass = true)}
            onAdd={(item: any) => {
              onAddCourseware(item);
            }}
            onLook={(item: any) => {
              onPreviewAttend(item.id);
            }}
          />
        </div>
        {/* )} */}

        <NModal
          v-model:show={forms.showRelatedClass}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.attendClassModal1]}
          title={'相关课件'}
          blockScroll={false}>
          <RelatedClass
            tableList={forms.tableList}
            subjectList={prepareStore.getSubjectList}
            subjectId={prepareStore.getSubjectId as any}
            coursewareDetailKnowledgeId={prepareStore.getSelectKey}
            onClose={() => (forms.showRelatedClass = false)}
            onAdd={(item: any) => onAddCourseware(item)}
            onClick={(item: any) => {
              onPreviewAttend(item.id);
              forms.showRelatedClass = false;
            }}
          />
        </NModal>

        {/* <NModal
          v-model:show={forms.editTitleVisiable}
          preset="card"
          class={['modalTitle', styles.removeVisiable1]}
          title={'课件重命名'}>
          <div class={styles.studentRemove}>
            <NInput
              placeholder="请输入课件名称"
              v-model:value={forms.editTitle}
              maxlength={15}
              onKeyup={(e: any) => {
                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {
                  e.stopPropagation();
                }
              }}
            />

            <NSpace class={styles.btnGroupModal} justify="center">
              <NButton round onClick={() => (forms.editTitleVisiable = false)}>
                取消
              </NButton>
              <NButton
                round
                type="primary"
                onClick={onEditTitleSubmit}
                loading={forms.editBtnLoading}>
                确定
              </NButton>
            </NSpace>
          </div>
        </NModal> */}

        <NModal
          v-model:show={forms.preRemoveVisiable}
          preset="card"
          class={['modalTitle', styles.removeVisiable1]}
          title={'删除课件'}>
          <TheMessageDialog
            content={`<p style="text-align: left;">请确认是否删除【${forms.selectItem.name}】，删除后不可恢复</p>`}
            cancelButtonText="取消"
            confirmButtonText="确认"
            loading={forms.messageLoading}
            onClose={() => (forms.preRemoveVisiable = false)}
            onConfirm={() => onRemove()}
          />
        </NModal>

        <NModal
          v-model:show={forms.addVisiable}
          preset="card"
          class={['modalTitle', styles.removeVisiable1]}
          title={'保存成功'}>
          <TheMessageDialog
            content={`<p style="text-align: left;">【${props.addParam.name}】暂未设置课件作业，是否现在去设置课件作业</p>`}
            cancelButtonText="稍后设置"
            confirmButtonText="立即设置"
            // loading={forms.messageLoading}
            onClose={() => (forms.addVisiable = false)}
            onConfirm={() => {
              forms.addVisiable = false;
              forms.workVisiable = true;
              forms.selectItem = {
                id: props.addParam.id,
                name: props.addParam.name
              };
            }}
          />
        </NModal>

        {/* 应用内预览或上课 */}
        <PreviewWindow
          v-model:show={forms.previewModal}
          type="attend"
          params={forms.previewParams}
        />

        <NModal
          v-model:show={forms.showAttendClass}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.attendClassModal]}
          title={'选择班级'}
          blockScroll={false}>
          <AttendClass
            onClose={() => (forms.showAttendClass = false)}
            type={forms.attendClassType}
            onPreview={(item: any) => {
              if (window.matchMedia('(display-mode: standalone)').matches) {
                state.application = window.matchMedia(
                  '(display-mode: standalone)'
                ).matches;
                forms.previewModal = true;
                forms.previewParams = {
                  ...item
                };
              } else {
                const { href } = router.resolve({
                  path: '/attend-class',
                  query: {
                    ...item
                  }
                });
                window.open(href, +new Date() + '');
              }
            }}
            onConfirm={async (item: any) => {
              onStartClass(forms.attendClassItem, item.classGroupId);
            }}
          />
        </NModal>

        <NModal
          v-model:show={forms.workVisiable}
          preset="card"
          class={['modalTitle background', styles.workVisiable]}
          title={
            forms.selectItem.lessonPreTrainingId ? '编辑作业' : '创建作业'
          }>
          <div id="model-homework-height" class={styles.workContainer}>
            <div class={styles.workTrain}>
              <Train
                cardType="prepare"
                lessonPreTraining={{
                  title: '',
                  chapterId: forms.selectItem.id, // 课件编号
                  id: forms.selectItem.lessonPreTrainingId // 作业编号
                }}
                onChange={(val: any) => {
                  forms.workVisiable = val.status;
                  getCoursewareList();
                }}
              />
            </div>
            <div class={styles.resourceMain}>
              <ResourceMain cardType="prepare" />
            </div>
          </div>
        </NModal>
      </div>
    );
  }
});