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

import {
  defineComponent,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  watch
} from 'vue';
import styles from './addCourseware.module.less';
import {
  NButton,
  NModal,
  NScrollbar,
  NSelect,
  NSpace,
  NSpin,
  useMessage,
  useDialog,
  NSwitch,
  NInput,
  NTooltip,
  NImage,
  NIcon
} from 'naive-ui';
import CardType from '/src/components/card-type';
// import AttendClass from '/src/views/prepare-lessons/model/attend-class';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import { useCatchStore } from '/src/store/modules/catchData';
// import TheEmpty from '/src/components/TheEmpty';
import {
  api_teacherChapterLessonCoursewareAdd,
  api_teacherChapterLessonCoursewareUpdate,
  api_teacherChapterLessonCoursewareDetail,
  // courseScheduleStart,
  // queryCourseware,
  saveCourseware
} from '../../../api';
import Draggable from 'vuedraggable';
import iconDelete from '../../../images/icon-delete-default.png';
import iconAddMusic from '../../../images/icon-add-music.png';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
// import deepClone from '/src/helpers/deep-clone';
import CardPreview from '/src/components/card-preview';
import PreviewWindow from '/src/views/preview-window';
// import { state } from '/src/state';
import SubjectSync from '../../../model/subject-sync';
import { eventGlobal } from '/src/utils';
// import iconTips from '../../../images/icon-tips.png';
import TheMessageDialog from '/src/components/TheMessageDialog';
import AddItemModel from '../../../model/add-item-model';
import AddOtherSource from '../../../model/add-other-source';
import deepClone from '/src/helpers/deep-clone';
export default defineComponent({
  name: 'courseware-modal',
  props: {
    groupItem: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    const catchStore = useCatchStore();
    const prepareStore = usePrepareStore();
    // const route = useRoute();
    const router = useRouter();
    // const dialog = useDialog();
    const message = useMessage();

    const forms = reactive({
      subjects: [] as any,
      openFlagEnable: true, // 是否支持修改公开状态
      name: '',
      openFlag: false,
      baseCoursewareList: [
        {
          name: '',
          id: null,
          list: [] as any
        }
      ] as any, // 基础数据
      coursewareList: [
        {
          name: '',
          id: null,
          list: [] as any
        }
      ] as any,
      loadingStatus: false,
      showAttendClass: false,
      attendClassType: 'change', //
      removeIds: [] as any, // 临时删除的编号
      editSubjectIds: '', // 声部编号
      addCoursewareVisiable: false,
      addCoursewareItem: {} as any,
      messageCallBack: null as any,
      messageOperation: {
        visiable: false,
        loading: false, // 是否显示加载
        type: 'delete' as 'delete' | 'addItem' | 'save' | 'pageLive',
        contentDirection: 'center' as 'left' | 'center' | 'right',
        title: '删除知识点',
        content: '请确认是否删除该知识点，删除知识点后将同步删除知识点下的资源',
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        index: 0
      },
      subjectSyncVisiable: false, // 同步声部
      show: false,
      item: {} as any,
      previewModal: false,
      previewParams: {
        type: '',
        subjectId: '',
        detailId: ''
      } as any,
      addOtherSource: false,
      addOtherIndex: 0 // 添加其它的索引
    });

    // 获取列表
    const getList = async () => {
      forms.loadingStatus = true;
      try {
        if (!props.groupItem.id) return (forms.loadingStatus = false);

        const { data } = await api_teacherChapterLessonCoursewareDetail(
          props.groupItem.id
        );
        const tempRows = data.chapterKnowledgeList || [];
        forms.name = data.name;
        forms.subjects = data.subjectIds
          ? data.subjectIds.split(',').map((s: any) => {
              return Number(s);
            })
          : [];
        forms.openFlag = data.openFlag;
        forms.openFlagEnable = data.openFlagEnable;
        const temp: any = [];
        tempRows.forEach((row: any) => {
          const child: any = row.chapterKnowledgeMaterialList;
          const childList: any[] = [];
          if (Array.isArray(child) && child.length > 0) {
            child.forEach((sub: any) => {
              childList.push({
                id: sub.id,
                materialId: sub.bizId,
                coverImg: sub.bizInfo.coverImg,
                type: sub.type,
                title: sub.bizInfo.name,
                dataJson: sub.dataJson,
                // isCollect: !!sub.favoriteFlag,
                isSelected: sub.source === 'PLATFORM' ? true : false,
                content: sub.bizInfo.content,
                removeFlag: sub.removeFlag
              });
            });
          }
          temp.push({
            name: row.name,
            id: row.id,
            list: [...childList]
          });
        });
        forms.coursewareList = temp;
        forms.baseCoursewareList = deepClone(temp);
      } catch (e) {
        //
        console.log(e);
      }
      forms.loadingStatus = false;
    };

    // 删除
    const onDelete = (j: number, index: number) => {
      const coursewareItem = forms.coursewareList[index];
      if (!coursewareItem) return;
      coursewareItem.list.splice(j, 1);
    };

    // 完成编辑
    const onOverEdit = async () => {
      try {
        const temp: any = [];
        forms.coursewareList.forEach((item: any) => {
          temp.push({
            materialName: item.name,
            materialType: item.type,
            materialId: item.materialId,
            id: item.id
          });
        });
        // 保存课件
        // 判断是否编辑，如果编辑则取选择的声部
        await saveCourseware({
          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
          lessonCoursewareId: prepareStore.getLessonCoursewareId,
          lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
          // subjectId: forms.isEdit
          //   ? forms.editSubjectIds
          //   : prepareStore.getSubjectId,
          materialList: [...temp]
        });

        message.success('编辑成功');
        // forms.removeVisiable = false;
        prepareStore.setIsEditResource(false);
        // 重置临时删除编号
        forms.removeIds = [];
        await getList();
      } catch {
        //
      }
    };

    const isPointInsideElement = (element: any, x: number, y: number) => {
      const rect = element.getBoundingClientRect();
      return (
        x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
      );
    };
    const isPointOnLeft = (element: any, x: number) => {
      const rect = element.getBoundingClientRect();
      const elementCenterX = rect.left + rect.width / 2;
      return x < elementCenterX;
    };

    // 操作
    const onChangePoint = (type: string, index: number, item?: any) => {
      if (type === 'up') {
        // 向上移动
        if (index === 0) return;
        const temp = forms.coursewareList[index - 1];
        forms.coursewareList[index - 1] = forms.coursewareList[index];
        forms.coursewareList[index] = temp;
      } else if (type === 'down') {
        // 向下移动
        if (index >= forms.coursewareList.length - 1) return;
        const temp = forms.coursewareList[index + 1];
        forms.coursewareList[index + 1] = forms.coursewareList[index];
        forms.coursewareList[index] = temp;
      } else if (type === 'remove') {
        forms.messageOperation = {
          visiable: true,
          type: 'delete',
          contentDirection: 'left',
          title: '删除知识点',
          loading: false,
          content: `请确认是否删除${
            item.name ? '【' + item.name + '】' : '该知识点'
          }，删除知识点后将同步删除知识点下的资源`,
          cancelButtonText: '取消',
          confirmButtonText: '确认',
          index
        };
      }
    };

    //
    const onMessageConfirm = async () => {
      const type = forms.messageOperation.type;
      if (type === 'delete') {
        forms.coursewareList.splice(forms.messageOperation.index, 1);
      } else if (type === 'addItem') {
        forms.coursewareList.push({ name: '', list: [] });
        addCoursewareItem(forms.addCoursewareItem);
      } else if (type === 'save' || type === 'pageLive') {
        if (forms.messageOperation.loading) return;
        if (!forms.name) {
          message.error('请输入课件标题');
          forms.messageOperation.visiable = false;
          return;
        }
        if (forms.subjects.length <= 0) {
          message.error('请选择声部');
          forms.messageOperation.visiable = false;
          return;
        }

        if (forms.coursewareList.length <= 0) {
          message.error('未配置知识点');
          forms.messageOperation.visiable = false;
          return;
        }

        let isNotAdd = false;
        for (const item of forms.coursewareList) {
          if (!item.name) {
            message.error('请输入知识点名称');
            forms.messageOperation.visiable = false;
            return;
          }
          if (Array.isArray(item.list) && item.list.length <= 0) {
            isNotAdd = true;
          }
        }

        if (isNotAdd) {
          message.error('请至少添加一个资源');
          forms.messageOperation.visiable = false;
          return;
        }

        forms.messageOperation.loading = true;
        await onSaveCourseWare();
        forms.messageOperation.loading = false;

        if (
          type === 'pageLive' &&
          typeof forms.messageCallBack === 'function'
        ) {
          forms.messageCallBack();
        }
        emit('change', { status: false });
        eventGlobal.emit('teacher-slideshow', false);
      }
      forms.messageOperation.visiable = false;
    };

    const addCoursewareItem = (item: any, point?: any) => {
      nextTick(() => {
        if (point) {
          const rowGroupDom = document.querySelectorAll('.row-group');
          const dom = rowGroupDom[item.index].querySelectorAll('.row-nav');
          // const dom = document.querySelectorAll('.row-nav');
          let isAdd = false;
          dom.forEach((child: any, index: number) => {
            // console.log(child);
            const status = isPointInsideElement(child, point.x, point.y);
            if (status) {
              const array: any =
                forms.coursewareList[item.index || 0].list || [];
              const left = isPointOnLeft(child, point.x);
              if (!left) {
                array.splice(index + 1, 0, item);
              } else {
                array.splice(index, 0, item);
              }
              isAdd = true;
              forms.coursewareList[item.index || 0].list = array;
            }
          });
          if (!isAdd) {
            forms.coursewareList[item.index || 0].list.push(item);
          }
        } else {
          forms.coursewareList[item.index || 0].list.push(item);
          message.success('添加成功');
        }
      });
    };

    // 提交
    const onSubmit = async () => {
      try {
        if (!forms.name) {
          message.error('请输入课件标题');
          return;
        }
        if (forms.subjects.length <= 0) {
          message.error('请选择声部');
          return;
        }

        let isNotAdd = false;
        for (const item of forms.coursewareList) {
          if (!item.name) {
            message.error('请输入知识点名称');
            return;
          }
          if (Array.isArray(item.list) && item.list.length <= 0) {
            isNotAdd = true;
          }
        }

        if (isNotAdd) {
          message.error('请至少添加一个资源');
          return;
        }
        await onSaveCourseWare(true);
      } catch {
        //
      }
    };
    const onSaveCourseWare = async (hasBack = false) => {
      try {
        const params = {
          name: forms.name,
          subjectIds: forms.subjects.join(','),
          openFlag: forms.openFlag,
          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
          chapterKnowledgeList: [] as any
        };

        console.log(forms.coursewareList, '121212');
        forms.coursewareList.forEach((item: any) => {
          let tempItem: any = [];
          if (Array.isArray(item.list) && item.list.length > 0) {
            tempItem = item.list.map((child: any) => {
              return {
                bizId: child.materialId,
                type: child.type,
                dataJson: !['IMG', 'VIDEO', 'SONG', 'MUSIC', 'PPT'].includes(
                  child.type
                )
                  ? JSON.stringify({
                      setting: child.dataJson,
                      coverImg: child.coverImg,
                      bizId: child.bizId,
                      content: child.content,
                      name: child.title
                    })
                  : ''
              };
            });
          }
          params.chapterKnowledgeList.push({
            name: item.name,
            chapterKnowledgeMaterialList: tempItem
          });
        });
        if (props.groupItem?.id) {
          await api_teacherChapterLessonCoursewareUpdate({
            id: props.groupItem.id,
            ...params
          });
        } else {
          await api_teacherChapterLessonCoursewareAdd(params);
        }
        message.success('保存成功');

        if (hasBack) {
          emit('change', { status: false });
          eventGlobal.emit('teacher-slideshow', false);
        }
      } catch {
        //
      }
    };

    const addItem = (item: any, point?: any) => {
      if (forms.coursewareList.length <= 0) {
        // 添加到临时对象
        forms.addCoursewareItem = item;
        forms.messageOperation = {
          visiable: true,
          type: 'addItem',
          contentDirection: 'center',
          title: '添加到知识点',
          loading: false,
          content: '当前课件暂无知识点，请添加知识点后操作',
          cancelButtonText: '取消',
          confirmButtonText: '添加知识点',
          index: 0
        };
      } else if (forms.coursewareList.length > 1 && item.addType !== 'drag') {
        forms.addCoursewareVisiable = true;
        forms.addCoursewareItem = item;
      } else {
        addCoursewareItem(item, point);
      }
    };

    // 当页面离开时
    const onPageBeforeLeave = (event: any) => {
      const objA = JSON.stringify(forms.coursewareList);
      const objB = JSON.stringify(forms.baseCoursewareList);
      if (objA === objB) {
        if (typeof event === 'function') {
          event();

          emit('change', { status: false });
          eventGlobal.emit('teacher-slideshow', false);
        }
      } else {
        forms.messageCallBack = event;
        forms.messageOperation = {
          visiable: true,
          type: 'pageLive',
          loading: false,
          contentDirection: 'center',
          title: '保存课件',
          content: '当前课件暂未保存，是否保存？',
          cancelButtonText: '不保存',
          confirmButtonText: '保存',
          index: 0
        };
      }
    };
    onMounted(async () => {
      await getList();
      // 动态添加数据
      eventGlobal.on('onPrepareAddItem', addItem);

      eventGlobal.on('pageBeforeLeave', onPageBeforeLeave);
    });

    onUnmounted(() => {
      eventGlobal.off('onPrepareAddItem', addItem);
      eventGlobal.off('pageBeforeLeave', onPageBeforeLeave);
    });

    // 当列表数据更新时同步缓存数据
    watch(
      () => forms.coursewareList,
      () => {
        prepareStore.setCoursewareList = forms.coursewareList;
      },
      {
        deep: true
      }
    );

    // 全选
    const chioseAll = (list: any) => {
      forms.subjects = list.map((child: any) => {
        return child.id;
      }) as any;
    };
    return () => (
      <div class={styles.coursewareModal}>
        <div class={styles.btnGroup}>
          <NSpace>
            <div class={styles.btnItem}>
              <span class={styles.btnTitle}>
                <span>*</span>标题：
              </span>
              <NInput
                placeholder="请输入课件标题"
                v-model:value={forms.name}
                maxlength={20}
                clearable
              />
            </div>
            <div class={styles.btnItem}>
              <span class={styles.btnTitle}>
                <span>*</span>声部：
              </span>
              <NSelect
                placeholder="请选择声部（可多选）"
                class={styles.btnSubjectList}
                options={prepareStore.getSubjectList}
                labelField="name"
                valueField="id"
                multiple
                maxTagCount={1}
                size="small"
                v-model:value={forms.subjects}
                clearable
                v-slots={{
                  action: () => (
                    <>
                      <NButton
                        text
                        style=" --n-width: 100% "
                        size="small"
                        onClick={() => chioseAll(prepareStore.getSubjectList)}>
                        全选
                      </NButton>
                    </>
                  )
                }}
              />
            </div>
            <div class={styles.btnItem}>
              <span class={styles.btnTitle}>公开：</span>
              {!forms.openFlagEnable ? (
                <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
                  {{
                    trigger: () => (
                      <NSwitch
                        v-model:value={forms.openFlag}
                        disabled={!forms.openFlagEnable}
                      />
                    ),
                    default: () =>
                      '为尊重课件原作者，在“相关课件”中添加的课件不支持公开'
                  }}
                </NTooltip>
              ) : (
                <NSwitch
                  v-model:value={forms.openFlag}
                  disabled={!forms.openFlagEnable}
                />
              )}
            </div>
          </NSpace>

          {/* 编辑 */}
          <NSpace>
            <NButton
              type="error"
              onClick={() => {
                const objA = JSON.stringify(forms.coursewareList);
                const objB = JSON.stringify(forms.baseCoursewareList);
                if (objA === objB) {
                  emit('change', { status: false });
                  eventGlobal.emit('teacher-slideshow', false);
                } else {
                  forms.messageOperation = {
                    visiable: true,
                    type: 'save',
                    loading: false,
                    contentDirection: 'center',
                    title: '保存课件',
                    content: '当前课件暂未保存，是否保存？',
                    cancelButtonText: '不保存',
                    confirmButtonText: '保存',
                    index: 0
                  };
                }
              }}>
              取消
            </NButton>
            <NButton
              type="primary"
              onClick={onSubmit}
              disabled={forms.coursewareList.length <= 0}>
              保存课件
            </NButton>
            {/* <NButton
              type="primary"
              onClick={() => {
                forms.coursewareList = [{ name: '', list: [] }];
              }}>
              请空
            </NButton> */}
          </NSpace>
        </div>

        <NScrollbar class={[styles.listContainer]} {...{ id: 'lessons-2' }}>
          <NSpin show={forms.loadingStatus}>
            <div class={[styles.listSection]}>
              {forms.coursewareList.map((item: any, index: number) => (
                <div
                  class={[styles.listItems, 'row-group']}
                  onDragenter={(e: any) => {
                    e.preventDefault();
                  }}
                  onDragover={(e: any) => {
                    e.preventDefault();
                  }}
                  onDrop={(e: any) => {
                    let dropItem = e.dataTransfer.getData('text');
                    dropItem =
                      dropItem && e.dataTransfer.effectAllowed === 'all'
                        ? JSON.parse(dropItem)
                        : {};
                    // 判断是否有数据
                    if (dropItem.id) {
                      // 获取拖拽的目标元素
                      eventGlobal.emit(
                        'onPrepareAddItem',
                        {
                          materialId: dropItem.id,
                          coverImg: dropItem.coverImg,
                          type: dropItem.type,
                          title: dropItem.title,
                          isCollect: dropItem.isCollect,
                          isSelected: dropItem.isSelected,
                          content: dropItem.content,
                          removeFlag: false,
                          index,
                          addType: 'drag'
                        },
                        {
                          x: e.clientX,
                          y: e.clientY
                        }
                      );
                    }
                  }}>
                  <div class={styles.knowledgePoint}>
                    <div class={styles.btnItem}>
                      <span class={styles.btnTitle}>
                        <span>*</span>知识点名称：
                      </span>
                      <NInput
                        placeholder="未命名知识点"
                        v-model:value={item.name}
                        maxlength={15}
                        clearable
                      />
                    </div>
                  </div>

                  <NSpace class={styles.operationGroup}>
                    {index > 0 && (
                      <NTooltip showArrow={false}>
                        {{
                          trigger: () => (
                            <i
                              class={styles.iconCUp}
                              onClick={() => onChangePoint('up', index)}></i>
                          ),
                          default: () => '上移知识点'
                        }}
                      </NTooltip>
                    )}
                    {index < forms.coursewareList.length - 1 && (
                      <NTooltip showArrow={false}>
                        {{
                          trigger: () => (
                            <i
                              class={styles.iconCDown}
                              onClick={() => onChangePoint('down', index)}></i>
                          ),
                          default: () => '下移知识点'
                        }}
                      </NTooltip>
                    )}
                    <NTooltip showArrow={false}>
                      {{
                        trigger: () => (
                          <i
                            class={styles.iconCRemove}
                            onClick={() =>
                              onChangePoint('remove', index, item)
                            }></i>
                        ),
                        default: () => '删除知识点'
                      }}
                    </NTooltip>
                  </NSpace>

                  {item.list.length > 0 && (
                    <Draggable
                      v-model:modelValue={item.list}
                      itemKey="id"
                      componentData={{
                        itemKey: 'id',
                        tag: 'div',
                        animation: 200,
                        group: 'description',
                        disabled: false
                      }}
                      class={styles.list}>
                      {{
                        item: (element: any) => {
                          const item = element.element;
                          return (
                            <div
                              data-id={item.id}
                              class={[
                                styles.itemWrap,
                                styles.itemBlock,
                                'row-nav'
                              ]}>
                              <div class={styles.itemWrapBox}>
                                <CardType
                                  class={[styles.itemContent]}
                                  isShowCollect={false}
                                  offShelf={item.removeFlag ? true : false}
                                  // onOffShelf={() => onRemove(item)}
                                  item={item}
                                  disabledMouseHover={false}
                                  onClick={() => {
                                    if (item.type === 'IMG') return;
                                    forms.show = true;
                                    forms.item = item;
                                  }}
                                />
                                <div class={styles.itemOperation}>
                                  <img
                                    src={iconDelete}
                                    class={styles.iconDelete}
                                    onClick={(e: MouseEvent) => {
                                      e.stopPropagation();
                                      onDelete(element.index, index);
                                    }}
                                  />
                                </div>
                              </div>
                            </div>
                          );
                        },
                        footer: () => (
                          <div class={styles.itemWrap}>
                            <div class={styles.itemWrapBox}>
                              <div
                                class={[
                                  styles.itemContent,
                                  styles.addMusicItem,
                                  'handle'
                                ]}
                                onClick={() => {
                                  forms.addOtherSource = true;
                                  forms.addOtherIndex = index;
                                }}>
                                <img src={iconAddMusic} />

                                <p class={styles.addMusicName}>添加功能</p>
                              </div>
                            </div>
                          </div>
                        )
                      }}
                    </Draggable>
                  )}
                  {item.list <= 0 && (
                    <div class={styles.list}>
                      <div class={styles.itemWrap}>
                        <div class={styles.itemWrapBox}>
                          <div
                            class={[
                              styles.itemContent,
                              styles.addMusicItem,
                              'handle'
                            ]}
                            onClick={() => {
                              forms.addOtherSource = true;
                              forms.addOtherIndex = index;
                            }}>
                            <img src={iconAddMusic} />

                            <p class={styles.addMusicName}>添加功能</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              ))}

              <NButton
                block
                type="primary"
                secondary
                class={styles.addKnowledgePoint}
                onClick={() => {
                  forms.coursewareList.push({
                    name: '',
                    list: []
                  });
                }}>
                <i class={styles.iconCAdd}></i>
                添加知识点
              </NButton>
            </div>
          </NSpin>
        </NScrollbar>

        {/* 弹窗查看 */}
        <CardPreview
          size={
            ['INSTRUMENT', 'THEORY', 'MUSIC_WIKI', 'MUSICIAN'].includes(
              forms.item.type
            )
              ? 'large'
              : ''
          }
          v-model:show={forms.show}
          item={forms.item}
        />

        <NModal
          v-model:show={forms.addCoursewareVisiable}
          preset="card"
          class={['modalTitle', styles.addCourseware]}
          title={'添加到知识点'}>
          <AddItemModel
            coursewareList={forms.coursewareList}
            onClose={() => (forms.addCoursewareVisiable = false)}
            onConfirm={(selects: number[]) => {
              if (Array.isArray(selects) && selects.length > 0) {
                selects.forEach(select => {
                  addCoursewareItem({
                    ...forms.addCoursewareItem,
                    index: select
                  });
                });

                forms.addCoursewareVisiable = false;
              } else {
                message.error('请选择需要添加的知识点');
              }
            }}
          />
        </NModal>

        <NModal
          v-model:show={forms.messageOperation.visiable}
          preset="card"
          class={['modalTitle', styles.removeVisiable1]}
          title={forms.messageOperation.title}>
          <TheMessageDialog
            content={forms.messageOperation.content}
            contentDirection={forms.messageOperation.contentDirection}
            cancelButtonText={forms.messageOperation.cancelButtonText}
            confirmButtonText={forms.messageOperation.confirmButtonText}
            loading={forms.messageOperation.loading}
            onClose={() => {
              forms.messageOperation.visiable = false;
              if (
                forms.messageOperation.type === 'save' ||
                forms.messageOperation.type === 'pageLive'
              ) {
                emit('change', { status: false });
                eventGlobal.emit('teacher-slideshow', false);
                if (
                  forms.messageOperation.type === 'pageLive' &&
                  typeof forms.messageCallBack === 'function'
                ) {
                  forms.messageCallBack();
                }
              }
            }}
            onConfirm={() => onMessageConfirm()}
          />
        </NModal>

        <PreviewWindow
          v-model:show={forms.previewModal}
          type="attend"
          params={forms.previewParams}
        />

        {/* 完成编辑时，选择声部 */}
        <NModal
          v-model:show={forms.subjectSyncVisiable}
          preset="card"
          class={['modalTitle background', styles.subjectSyncModal]}
          title={'同步声部'}>
          <SubjectSync
            subjectId={prepareStore.getSubjectId as any}
            onClose={() => (forms.subjectSyncVisiable = false)}
            onConfirm={async (subjectIds: any) => {
              //
              try {
                forms.editSubjectIds = subjectIds.join(',');
                await onOverEdit();
                forms.subjectSyncVisiable = false;
              } catch {
                //
              }
            }}
          />
        </NModal>

        {/* 添加其它类型的资源 */}
        <NModal
          v-model:show={forms.addOtherSource}
          preset="card"
          class={['modalTitle background', styles.addOtherSource]}
          title={'添加功能'}>
          <AddOtherSource
            onClose={() => (forms.addOtherSource = false)}
            onComfirm={item => {
              if (Array.isArray(item)) {
                item.forEach((child: any) => {
                  addCoursewareItem({ ...child, index: forms.addOtherIndex });
                });
              } else {
                addCoursewareItem({ ...item, index: forms.addOtherIndex });
              }
            }}
          />
        </NModal>
      </div>
    );
  }
});