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

import { defineComponent, onMounted, reactive, watch ,ref} from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NModal,
  NScrollbar,
  NSelect,
  NSpace,
  NSpin,
  useDialog,
  useMessage
} from 'naive-ui';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import { useCatchStore } from '/src/store/modules/catchData';
import TrainType from '/src/views/attend-class/model/train-type';
import TheEmpty from '/src/components/TheEmpty';
import Draggable from 'vuedraggable';
import {
  lessonPreTrainingBatchSave,
  lessonPreTrainingPage,
  lessonPreTrainingDelete
} from '../../../api';
import { evaluateDifficult } from '/src/utils/contants';
import TrainUpdate from '/src/views/attend-class/model/train-update';
import AssignHomework from './assign-homework';
import Trainguide from '@/custom-plugins/guide-page/train-guide'
export default defineComponent({
  name: 'courseware-modal',
  setup() {
    const catchStore = useCatchStore();
    const prepareStore = usePrepareStore();
    const dialog = useDialog();
    const message = useMessage();
    const forms = reactive({
      showAttendClass: false,
      list: [] as any,
      drag: false,
      loadingStatus: false,
      trainList: [] as any,
      assignHomeworkStatus: false,
      editStatus: false,
      editItem: {} as any
    });
    const showGuide = ref(false)
    // 完成编辑
    const onOverEdit = async () => {
      dialog.warning({
        title: '提示',
        content: `是否完成编辑？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            // 保存课件
            await lessonPreTrainingBatchSave({
              coursewareKnowledgeDetailId: prepareStore.getSelectKey,
              subjectId: prepareStore.getSubjectId,
              lessonPreTrainingDetails: forms.trainList
            });

            forms.drag = false;
            message.success('编辑成功');

            prepareStore.setCoursewareList(forms.trainList);
          } catch {
            //
          }
        }
      });
    };

    // 获取列表
    const getList = async () => {
      forms.loadingStatus = true;
      try {
        // 判断是否有选择对应的课件
        if (!prepareStore.getSelectKey) return;
        const { data } = await lessonPreTrainingPage({
          coursewareKnowledgeDetailId: prepareStore.getSelectKey,
          subjectId: prepareStore.getSubjectId,
          page: 1,
          rows: 99
        });
        const tempRows = data.rows || [];
        const temp: any = [];

        tempRows.forEach((row: any) => {
          let tList: string[] = [];
          const configJson = row.trainingConfigJson;
          if (row.trainingType === 'EVALUATION') {
            tList = [
              `${evaluateDifficult[configJson.evaluateDifficult]}`,
              '全部小节',
              `速度${configJson.evaluateSpeed}`,
              `${configJson.trainingTimes}分钟`
            ];
          } else {
            tList = [
              `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
              `速度${configJson.practiceSpeed}`,
              `${configJson.trainingTimes}分钟`
            ];
          }
          temp.push({
            typeList: tList || [],
            ...row
          });
        });

        forms.trainList = temp || [];
        prepareStore.setTrainList(temp || []);
        setTimeout(()=>{
          showGuide.value = true;
        },500)

      } catch {
        //
      }
      forms.loadingStatus = false;
    };

    // 监听选择的key 左侧选择了其它的课
    watch(
      () => prepareStore.getSelectKey,
      () => {
        forms.trainList = [];
        getList();
      }
    );
    watch(
      () => prepareStore.getIsAddTrain,
      (val: boolean) => {
        if (val) {
          forms.trainList = [];
          getList();
          prepareStore.setIsAddTrain(false);
        }
      }
    );

    // 删除
    const onDelete = (item: any) => {
      //
      const index = forms.trainList.findIndex((c: any) => c.id === item.id);
      forms.trainList.splice(index, 1);
      prepareStore.setCoursewareList(forms.trainList);
    };

    // 单个删除
    const onRemove = async (item: any) => {
      try {
        dialog.warning({
          title: '提示',
          content: '该训练已下架，是否删除？',
          positiveText: '确定',
          negativeText: '取消',
          onPositiveClick: async () => {
            await lessonPreTrainingDelete({ ids: item.id });
            message.success('删除成功');
            getList();
          }
        });
      } catch {
        //
      }
    };

    onMounted(async () => {
      // 获取教材分类列表
      await catchStore.getSubjects();

      const subjectList = catchStore.getSubjectList;
      if (subjectList.length > 0 && !prepareStore.getSubjectId) {
        prepareStore.setSubjectId(subjectList[0].id);
      }

      await getList();
    });
    return () => (
      <div class={styles.coursewareModal}>
        <div class={styles.btnGroup}>
          {forms.drag ? (
            <NSpace>
              <NButton type="default" onClick={onOverEdit}>
                完成编辑
              </NButton>
              <NButton
                type="error"
                onClick={() => {
                  forms.drag = false;
                  getList();
                }}>
                取消编辑
              </NButton>
              <NButton
                type="error"
                onClick={() => {
                  forms.trainList = [];
                  prepareStore.setTrainList([]);
                }}>
                清空资源
              </NButton>
              <span class={styles.tips}>拖动可将资源进行排序</span>
            </NSpace>
          ) : (
            <NSpace>
              <NSelect
                placeholder="选择声部"
                options={catchStore.getSubjectList}
                labelField="name"
                valueField="id"
                value={prepareStore.getSubjectId}
                onUpdate:value={(val: any) => {
                  prepareStore.setSubjectId(val);
                }}
              />
              <NButton type="default" onClick={() => (forms.drag = true)}>
                编辑
              </NButton>
            </NSpace>
          )}

          <NSpace>
            <NButton
              type="primary"
              {...{id:'train-0'}}
              disabled={forms.drag}
              onClick={() => {
                let count = 0;
                forms.trainList.forEach((item: any) => {
                  if (!item.removeFlag) {
                    count++;
                  }
                });
                if (count <= 0) {
                  message.error('训练内容不能为空');
                  return;
                }
                forms.assignHomeworkStatus = true;
              }}>
              布置训练
            </NButton>
          </NSpace>
        </div>

        <NScrollbar class={styles.listContainer}>
          <NSpin show={forms.loadingStatus}>
            <div
              class={[
                styles.listSection,
                !forms.loadingStatus && prepareStore.getTrainList.length <= 0
                  ? styles.emptySection
                  : ''
              ]}>
              {forms.trainList.length > 0 && (
                <>
                  {forms.drag ? (
                    <Draggable
                      v-model:modelValue={forms.trainList}
                      itemKey="id"
                      // tag="transition-group"
                      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.itemBlock}>
                              <TrainType
                                item={item}
                                isDelete
                                type="prepare"
                                onDelete={(child: any) => onDelete(child)}
                                offShelf={item.removeFlag ? true : false}
                                onOffShelf={() => onRemove(item)}
                              />
                            </div>
                          );
                        }
                      }}
                    </Draggable>
                  ) : (
                    <div class={styles.list}>
                      {forms.trainList.map((item: any) => (
                        <TrainType
                          item={item}
                          type="prepare"
                          offShelf={item.removeFlag ? true : false}
                          onOffShelf={() => onRemove(item)}
                          onEdit={(child: any) => {
                            console.log('edit', child);
                            const { trainingConfigJson, id, musicId, ...res } =
                              child;
                            forms.editItem = {
                              ...res,
                              id: musicId,
                              trainId: id,
                              ...trainingConfigJson
                            };
                            forms.editStatus = true;
                          }}
                        />
                      ))}
                    </div>
                  )}
                </>
              )}

              {!forms.loadingStatus &&
                prepareStore.getTrainList.length <= 0 && (
                  <TheEmpty description="暂无训练" />
                )}
            </div>
          </NSpin>
        </NScrollbar>

        {/* 编辑 */}
        <NModal
          v-model:show={forms.editStatus}
          class={['modalTitle background', styles.trainEditModal]}
          preset="card"
          title="训练设置">
          <TrainUpdate
            item={forms.editItem}
            onClose={() => (forms.editStatus = false)}
            onConfirm={() => {
              forms.editItem = {};
              prepareStore.setIsAddTrain(true);
            }}
          />
        </NModal>

        {/* 添加自定义教材 */}
        <NModal
          v-model:show={forms.assignHomeworkStatus}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.assignHomework]}
          title={'布置作业'}
          blockScroll={false}>
          <AssignHomework
            trainList={forms.trainList}
            onClose={() => (forms.assignHomeworkStatus = false)}
          />
        </NModal>
        {showGuide.value?<Trainguide></Trainguide>:null}

      </div>
    );
  }
});