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

import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  ref,
  watch
} from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NTooltip,
  NIcon,
  NImage,
  NModal,
  NScrollbar,
  NSpin,
  NTabPane,
  NTabs,
  useMessage,
  NPopselect
} 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 { modalClickMask, state } from '/src/state';
import { useResizeObserver } from '@vueuse/core';
import AttendClass from '/src/views/prepare-lessons/model/attend-class';
import {
  api_addByOpenCourseware,
  api_teacherChapterLessonCoursewareRemove,
  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,
      instrumentId: route.query.instrumentId
        ? Number(route.query.instrumentId)
        : 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: '',
        instrumentId: '',
        detailId: ''
      } as any,
      workVisiable: false,
      wikiCategoryIdChild: null
    });

    const getCoursewareList = async () => {
      forms.loading = true;
      try {
        // 判断是否有选择对应的课件 或声部
        if (!prepareStore.getSelectKey) return (forms.loading = false);

        const { data } = await teacherChapterLessonCoursewareList({
          instrumentId: prepareStore.getInstrumentId,
          coursewareDetailKnowledgeId: prepareStore.getSelectKey
        });
        if (!Array.isArray(data)) {
          return;
        }

        const tempList: any = [];
        data.forEach((item: any) => {
          // const firstItem: any =
          //   item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];

          const firstItem: any =
            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList;
          tempList.push({
            id: item.id,
            lessonPreTrainingId: item.lessonPreTrainingId,
            openFlag: item.openFlag,
            openFlagEnable: item.openFlagEnable,
            instrumentNames: item.instrumentNames,
            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
            name: item.name,
            coverImg: firstItem && firstItem[0]?.bizInfo.coverImg,
            type: firstItem && firstItem[0]?.bizInfo.type,
            isNotWork: item.lessonPreTrainingNum <= 0 ? true : false // 是否布置作业
          });
        });
        forms.tableList = tempList;
      } catch {
        //
      }
      forms.loading = false;
    };

    // 监听选择的key 左侧选择了其它的课
    let timer: any = null;
    watch(
      () => [prepareStore.getSelectKey, prepareStore.getInstrumentId],
      async () => {
        clearTimeout(timer);
        timer = setTimeout(async () => {
          if (!prepareStore.getInstrumentId) {
            // 获取教材分类列表
            checkInstrumentIds();
          } else {
            getInitInstrumentId();
          }
          eventGlobal.emit('openCoursewareChanged');
          await getCoursewareList();
          subjectRef.value?.syncBarPosition();
        }, 100);
      }
    );

    watch(
      () => prepareStore.getInstrumentList,
      () => {
        checkInstrumentIds();
      }
    );

    const checkInstrumentIds = () => {
      const instrumentsList = prepareStore.getSingleInstrumentList;

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

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

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

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

    const getInitInstrumentId = () => {
      let instrumentId: any = '';
      prepareStore.getInstrumentList.forEach((item: any) => {
        if (Array.isArray(item.instruments)) {
          item.instruments.forEach((child: any) => {
            if (child.id === prepareStore.getInstrumentId) {
              instrumentId = child.id;
            }
          });
        }
      });
      if (instrumentId) {
        forms.wikiCategoryIdChild = instrumentId;
      }
    };
    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.getInstrumentId) {
        // 获取教材分类列表
        checkInstrumentIds();
      } else {
        getInitInstrumentId();
      }

      await getCoursewareList();

      if (props.addParam.isAdd) {
        forms.addVisiable = true;
      }
    });

    // 删除
    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,
          instrumentId: prepareStore.getInstrumentId,
          detailId: prepareStore.getSelectKey,
          lessonCourseId: prepareStore.getBaseCourseware.id
        };
      } else {
        const { href } = router.resolve({
          path: '/attend-class',
          query: {
            type: 'preview',
            courseId: id,
            instrumentId: prepareStore.getInstrumentId,
            detailId: prepareStore.getSelectKey,
            lessonCourseId: prepareStore.getBaseCourseware.id
          }
        });
        window.open(href, +new Date() + '');
      }
    };

    const onStartClass = async (
      item: any,
      classGroupId: any,
      instrumentId?: any
    ) => {
      if (classGroupId) {
        // 开始上课
        const res = await courseScheduleStart({
          lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
          classGroupId: classGroupId,
          useChapterLessonCoursewareId: item.id
          // instrumentId: prepareStore.getInstrumentId
        });
        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,
            instrumentId: instrumentId || route.query.instrumentId,
            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,
              // instrumentId: prepareStore.getInstrumentId,
              instrumentId: instrumentId || route.query.instrumentId,
              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 selectChildObj = (item: any) => {
      const obj: any = {};
      item?.forEach((child: any) => {
        if (child.id === forms.wikiCategoryIdChild) {
          obj.selected = true;
          obj.name = child.name;
          obj.label = child.name;
        }
      });
      return obj;
    };

    const tabInstrumentValue = computed(() => {
      let instrumentId: any = prepareStore.getInstrumentId
        ? prepareStore.getInstrumentId
        : '';
      prepareStore.getFormatInstrumentList.forEach((item: any) => {
        if (Array.isArray(item.instruments)) {
          item.instruments.forEach((child: any) => {
            if (child.id === prepareStore.getInstrumentId) {
              instrumentId = item.id + '';
            }
          });
        }
      });
      return instrumentId;
    });
    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=""
            paneClass={styles.paneTitle}
            justifyContent="start"
            paneWrapperClass={styles.paneWrapperContainer}
            value={tabInstrumentValue.value}
            onUpdate:value={(val: any) => {
              prepareStore.getFormatInstrumentList.forEach((item: any) => {
                if (item.value.toString() === val.toString()) {
                  prepareStore.setInstrumentId(val);
                  // 保存
                  forms.instrumentId = val;
                  forms.wikiCategoryIdChild = null;
                }
              });

              if (!val) {
                prepareStore.setInstrumentId(val);
                // 保存
                forms.instrumentId = val;
                forms.wikiCategoryIdChild = null;
                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: '', label: '全部乐器', value: '' },
              ...prepareStore.getFormatInstrumentList
            ].map((item: any, index: number) => (
              <NTabPane
                name={`${item.value}`}
                tab={item.label}
                disabled={item.instruments?.length > 0}
                displayDirective="if">
                {{
                  tab: () =>
                    item.instruments?.length > 0 ? (
                      <NPopselect
                        options={item.instruments}
                        trigger="hover"
                        v-model:value={forms.wikiCategoryIdChild}
                        onUpdate:value={(val: any) => {
                          // onSearch();
                          prepareStore.setInstrumentId(val);
                          // 保存
                          forms.instrumentId = val;

                          if (!val) {
                            sessionStorage.setItem(
                              'prepareLessonCourseWareSubjectIsNull',
                              val ? 'false' : 'true'
                            );
                          }
                        }}
                        key={item.id}
                        class={styles.popSelect}>
                        <span
                          class={[
                            styles.textBtn,
                            selectChildObj(item.instruments).selected &&
                              styles.textBtnActive
                          ]}>
                          {selectChildObj(item.instruments).label || item.label}
                          <i class={styles.iconArrow}></i>
                        </span>
                      </NPopselect>
                    ) : (
                      item.label
                    )
                }}
              </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;
                          }}
                        />
                      </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} animated={false} duration={0} delay={0}>
            {{
              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
          maskClosable={modalClickMask}
          v-model:show={forms.showRelatedClass}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.attendClassModal1]}
          title={'相关课件'}
          blockScroll={false}>
          <RelatedClass
            tableList={forms.tableList}
            instrumentList={prepareStore.getInstrumentList}
            instrumentId={prepareStore.getInstrumentId 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
          maskClosable={modalClickMask}
          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
          maskClosable={modalClickMask}
          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
          maskClosable={modalClickMask}
          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,
                item.instrumentId
              );
            }}
          />
        </NModal>

        <NModal
          maskClosable={modalClickMask}
          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: forms.selectItem.name + '-课后作业',
                  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>
    );
  }
});