src/views/examinationPaper/edit.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>{{ type == 1 ? "修改试卷" : "修改答案" }}</span>
      </template>
    </back-box>
    <div class="content">
      <template v-if="type == 1">
        <p class="tips" v-if="paperModifyLog.modifiedTime">
          <i class="fa fa-bell-o"></i>
          {{
            `${paperModifyLog.modifiedTime} ${paperModifyLog.realName}`
          }}老师修改了答案
        </p>
      </template>
      <div class="answer-title" :class="type == 1 ? 't-left' : ''">
        <p class="name-box" v-if="type == 1">
          <span>试卷名称：</span>
          <el-input class="ipt-name" v-model="form.title"></el-input>
        </p>
        <p class="name" v-else>{{ form.title }}</p>
        <p class="totals">卷面总分：{{ allScore }}分</p>
      </div>
      <div class="question-box">
        <ul
          class="questions-ul questions-ul2"
          v-if="!questionList[0]?.subQuestions"
        >
          <li class="sub-questions">
            <div class="qs-num">题号</div>
            <div class="qs-type">题型</div>
            <div class="qs-score">分数</div>
            <div class="qs-partScore">漏选得分</div>
            <div class="qs-options qs-options2">选项设置</div>
            <div class="qs-set">题干</div>
            <div class="qs-set">题目解析</div>
            <div class="qs-set">知识点</div>
          </li>
          <li v-for="(subQuestions, indexs) in questionList" :key="indexs">
            <p
              class="set-ans-btn"
              v-if="
                subQuestions.qusType &&
                subQuestions.subNum &&
                subQuestions.subNum > 4
              "
            >
              <el-button type="primary" @click="setFormAns(indexs)"
                >批量设置答案</el-button
              >
            </p>
            <div v-else class="sub-questions">
              <div class="qs-num">{{ subQuestions.questionIndex }}</div>
              <div class="qs-type">
                {{ setSubPro(subQuestions.questionType) }}
              </div>
              <div class="qs-score">
                {{ subQuestions.score }}
              </div>
              <div class="qs-partScore">
                <p v-if="subQuestions.questionType != 3">--</p>
                <el-input-number
                  class="number-ipt"
                  v-else
                  size="medium"
                  :min="0"
                  :precision="2"
                  :max="subQuestions.score"
                  :step="0.5"
                  v-model="subQuestions.partScore"
                  label="漏选得分"
                ></el-input-number>
              </div>
              <div class="qs-options qs-options2">
                <p v-if="subQuestions.questionType == 5">--</p>
                <p v-if="subQuestions.questionType == 4" class="answer-box">
                  <span
                    class="answer-s"
                    :class="subQuestions.correctAnswer == 1 ? 'active' : ''"
                    @click="subQuestions.correctAnswer = 1"
                    >✓</span
                  >
                  <span
                    class="answer-s"
                    :class="subQuestions.correctAnswer == 2 ? 'active' : ''"
                    @click="subQuestions.correctAnswer = 2"
                    >✗</span
                  >
                </p>
                <p v-if="subQuestions.questionType == 3" class="answer-box">
                  <template
                    v-for="option in subQuestions.answerOptions.split(',')"
                  >
                    <span
                      v-if="option"
                      class="answer-s"
                      :class="
                        subQuestions.correctAnswer.includes(option)
                          ? 'active'
                          : ''
                      "
                      :key="option"
                      @click="changAnswer(subQuestions, option)"
                      >{{ option }}</span
                    >
                  </template>
                </p>
                <p v-if="subQuestions.questionType == 2" class="answer-box">
                  <template
                    v-for="option in subQuestions.answerOptions.split(',')"
                  >
                    <span
                      class="answer-s"
                      v-if="option"
                      :class="
                        subQuestions.correctAnswer == option ? 'active' : ''
                      "
                      :key="option"
                      @click="subQuestions.correctAnswer = option"
                      >{{ option }}</span
                    >
                  </template>
                </p>
              </div>
              <div class="qs-set">
                <el-button
                  class="icon-tickets"
                  type="primary"
                  circle
                  size="mini"
                  icon="el-icon-tickets"
                  @click="openStem(subQuestions, 1, indexs)"
                ></el-button>
              </div>
              <div class="qs-set">
                <el-button
                  class="icon-tickets"
                  type="primary"
                  circle
                  size="mini"
                  icon="el-icon-tickets"
                  @click="openStem(subQuestions, 2, indexs)"
                ></el-button>
              </div>
              <div class="qs-set">
                <el-button
                  type="primary"
                  circle
                  size="mini"
                  icon="el-icon-price-tag"
                  @click="openKnowledge(subQuestions, indexs)"
                ></el-button>
              </div>
            </div>
          </li>
        </ul>
        <template v-if="questionList[0]?.subQuestions">
          <template v-for="(question, index) in questionList">
            <p class="question-title">
              <span>{{ setBigNum(index) }}、</span>
              <el-input
                class="ipt"
                v-model.trim="question.questionTitle"
                maxlength="30"
                placeholder="填写大题名称"
              ></el-input>
              <span>共 {{ setScore(question) }} 分</span>
            </p>
            <div class="questions-ul">
              <div class="sub-questions">
                <div class="qs-num">题号</div>
                <div class="qs-type">题型</div>
                <div class="qs-score">分数</div>
                <div class="qs-partScore">漏选得分</div>
                <div class="qs-options qs-options2">选项设置</div>
                <div class="qs-set">题干</div>
                <div class="qs-set">题目解析</div>
                <div class="qs-set">知识点</div>
              </div>
              <div
                v-for="(subQuestions, indexs) in question.subQuestions"
                :key="indexs"
              >
                <p
                  class="set-ans-btn"
                  v-if="
                    subQuestions.qusType &&
                    subQuestions.subNum &&
                    subQuestions.subNum > 4
                  "
                >
                  <el-button type="primary" @click="setFormAns(indexs, index)"
                    >批量设置答案</el-button
                  >
                </p>
                <div v-else class="sub-questions">
                  <div class="qs-num">{{ subQuestions.questionIndex }}</div>
                  <div class="qs-type">
                    {{ setSubPro(subQuestions.questionType) }}
                  </div>
                  <div class="qs-score">
                    <el-input-number
                      class="number-ipt"
                      size="medium"
                      :min="1"
                      :max="200"
                      :precision="2"
                      :step="1"
                      v-model="subQuestions.score"
                      label="单题分值"
                    ></el-input-number>
                  </div>
                  <div class="qs-partScore">
                    <p v-if="subQuestions.questionType != 3">--</p>
                    <el-input-number
                      class="number-ipt"
                      v-else
                      size="medium"
                      :min="0"
                      :precision="2"
                      :max="subQuestions.score"
                      :step="0.5"
                      v-model="subQuestions.partScore"
                      label="漏选得分"
                    ></el-input-number>
                  </div>
                  <div class="qs-options qs-options2">
                    <p v-if="subQuestions.questionType == 5">--</p>
                    <p v-if="subQuestions.questionType == 4" class="answer-box">
                      <span
                        class="answer-s"
                        :class="subQuestions.correctAnswer == 1 ? 'active' : ''"
                        @click="subQuestions.correctAnswer = 1"
                        >✓</span
                      >
                      <span
                        class="answer-s"
                        :class="subQuestions.correctAnswer == 2 ? 'active' : ''"
                        @click="subQuestions.correctAnswer = 2"
                        >✗</span
                      >
                    </p>
                    <p v-if="subQuestions.questionType == 3" class="answer-box">
                      <template
                        v-for="option in subQuestions.answerOptions.split(',')"
                      >
                        <span
                          v-if="option"
                          class="answer-s"
                          :class="
                            subQuestions.correctAnswer.includes(option)
                              ? 'active'
                              : ''
                          "
                          :key="option"
                          @click="changAnswer(subQuestions, option)"
                          >{{ option }}</span
                        >
                      </template>
                    </p>
                    <p v-if="subQuestions.questionType == 2" class="answer-box">
                      <template
                        v-for="option in subQuestions.answerOptions.split(',')"
                      >
                        <span
                          class="answer-s"
                          v-if="option"
                          :class="
                            subQuestions.correctAnswer == option ? 'active' : ''
                          "
                          :key="option"
                          @click="subQuestions.correctAnswer = option"
                          >{{ option }}</span
                        >
                      </template>
                    </p>
                  </div>
                  <div class="qs-set">
                    <el-button
                      class="icon-tickets"
                      type="primary"
                      circle
                      size="mini"
                      icon="el-icon-tickets"
                      @click="openStem(subQuestions, 1, index, indexs)"
                    ></el-button>
                  </div>
                  <div class="qs-set">
                    <el-button
                      class="icon-tickets"
                      type="primary"
                      circle
                      size="mini"
                      icon="el-icon-tickets"
                      @click="openStem(subQuestions, 2, index, indexs)"
                    ></el-button>
                  </div>
                  <div class="qs-set">
                    <el-button
                      type="primary"
                      circle
                      size="mini"
                      icon="el-icon-price-tag"
                      @click="openKnowledge(subQuestions, index, indexs)"
                    ></el-button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </template>
      </div>
      <div class="btn-box">
        <el-button type="danger" plain round @click="linkBack">取消</el-button>
        <el-button type="primary" round @click="save">保存</el-button>
      </div>
      <el-dialog
        :close-on-click-modal="false"
        title="批量设置答案"
        :visible.sync="diaSetAns"
        width="400"
        :modal-append-to-body="false"
      >
        <div class="qs-options set-questions">
          <p class="dia-tips">
            请点击选项按钮设置答案,多选题题目之间用“,”隔开，若添加5道题：“AC,AD,BD,AC,CD”
          </p>
          <p>{{ setSubPro(formAns.qusType) }}：</p>
          <p class="ipt">
            <el-input
              ref="formAnsIpt"
              v-if="formAns.qusType == 2 || formAns.qusType == 3"
              v-model="formAns.answerList"
              @keydown.native="keydownAnswer($event, formAns.qusType)"
              @input="setAllAnswer($event, formAns.qusType)"
            ></el-input>
            <el-input
              v-if="formAns.qusType == 4"
              v-model="formAns.answerList"
              readonly=""
            ></el-input>
          </p>
          <p class="answer-box">
            <template v-if="formAns.qusType == 4">
              <span
                class="answer-s active"
                @click="
                  formAns.answerList.length < formAns.subNum
                    ? (formAns.answerList += '✓')
                    : ''
                "
                >✓</span
              >
              <span
                class="answer-s active"
                @click="
                  formAns.answerList.length < formAns.subNum
                    ? (formAns.answerList += '✗')
                    : ''
                "
                >✗</span
              >
            </template>
            <template v-if="formAns.qusType == 3">
              <span
                class="answer-s active"
                v-for="option in formAns.answerOptions.split(',')"
                :key="option"
                @click="setMultiple(formAns, option)"
                >{{ option }}</span
              >
              <span class="answer-s active" @click="setMultiple(formAns, ',')"
                >,</span
              >
            </template>
            <template v-if="formAns.qusType == 2">
              <span
                class="answer-s active"
                v-for="option in formAns.answerOptions.split(',')"
                :key="option"
                @click="
                  formAns.answerList.length < formAns.subNum
                    ? (formAns.answerList += option)
                    : ''
                "
                >{{ option }}</span
              >
            </template>
            <span
              class="answer-s delButton"
              @click="formAns.answerList = formAns.answerList.slice(0, -1)"
              >x</span
            >
            <span class="answer-s ac" @click="formAns.answerList = ''">ac</span>
          </p>
        </div>
        <div class="dialog-footer" slot="footer">
          <el-button @click="saveFormAns">确 定</el-button>
          <el-button @click="diaSetAns = false">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog
        :close-on-click-modal="false"
        :title="stem.type == 1 ? '上传题干' : '上传题目解析'"
        :visible.sync="dialogStem"
        v-if="dialogStem"
        width="500"
      >
        <div class="upload-box">
          <div v-loading="iframeLoading">
            <template v-if="stem.type == 1">
              <iframe
                ref="screenshot"
                class="screenshot"
                v-if="stem.screenshot"
                :src="stem.screenshot"
                @load="iframeLoading = false"
              ></iframe>
            </template>
            <template v-else>
              <iframe
                ref="screenshot"
                class="screenshot"
                v-if="stem.answerScreenshot"
                :src="stem.answerScreenshot"
                @load="iframeLoading = false"
              ></iframe>
            </template>
          </div>
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :limit="1"
            :on-success="upSuccess"
            :on-error="upError"
            accept="image/*"
          >
            <el-button size="small" type="primary">选择照片</el-button>
          </el-upload>
        </div>
        <div slot="footer">
          <el-button @click="dialogStem = false">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        :close-on-click-modal="false"
        title="知识点"
        :visible.sync="dialogKnowledge"
        width="500"
      >
        <div>
          <el-form ref="form" :model="stem" label-width="160px">
            <el-form-item label="知识点：">
              <el-cascader
                size="small"
                filterable
                :show-all-levels="false"
                clearable
                placeholder="选择知识点"
                v-model="stem.knowledge"
                :options="knowledgeData"
                :props="{
                  expandTrigger: 'hover',
                  multiple: true,
                  checkStrictly: true,
                }"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer">
          <el-button @click="dialogKnowledge = false">取 消</el-button>
          <el-button type="primary" @click="setKnowledge">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { deepClone, checkAnswer } from "utils";
import knowledgeList from "assets/js/knowledgeList.js";
export default {
  data() {
    return {
      role: "",
      title: "",
      type: 1,
      questionList: [],
      paperType: 1, //1 备题（随堂问） /2 组卷
      //答题卡详情
      form: {
        examType: 2, //考试类型：0-未知/1-随堂问/2-即时测/3-xx考
        title: "",
        tag: "",
        subjectId: "",
        examsDuration: 90,
        sectionName: "",
        gradeName: "",
        share: 1,
        questionList: [],
      },
      paperModifyLog: {
        realName: "",
        modifiedTime: "",
      },
      diaSetAns: false,
      formAns: {
        listIndex: 0, //大题位置
        endIndex: 0, //相同题目最后一位题目的questionIndex
        index: 0,
        qusType: "", //题目类型
        subNum: 0, //数量
        answerOptions: [], //答案选项
        answerList: "", //答案列表-字符串
      },
      //v1.5
      dialogStem: false, //截图开关
      dialogKnowledge: false, //知识点开关
      knowledgeList: { ...knowledgeList },
      stem: {
        type: 1,
        index: 0, //大题位置
        indexs: 0, //小题位置
        screenshot: "", //题干图片地址
        answerScreenshot: "", //题目解析图片地址
        knowledge: [], //知识点
      },
      gradeClassList: [], //学段列表
      uploadUrl: "/file/uploadImgToHtml",
      iframeLoading: false,
    };
  },
  computed: {
    allScore: function () {
      let score = 0;
      this.questionList?.map((item) => {
        if (item.subQuestions) {
          score += item.subQuestions.reduce((a, b) => {
            return a + (Number(b.score) || 0);
          }, 0);
        } else {
          score += item.score || 0;
        }
      }, 0);
      return Number(score).toFixed(2);
    },
    // 知识点列表 根据学段-科目筛选
    knowledgeData: function () {
      let jsons = [];
      if (this.form.gradeName && this.form.subjectName) {
        let sectionName = "";
        this.gradeClassList?.map((item) => {
          if (this.form.gradeName == item.gradeName) {
            sectionName = item.sectionName;
          }
        });
        console.log(this.gradeClassList);
        console.log(sectionName);
        if (
          sectionName &&
          Object.keys(this.knowledgeList).includes(sectionName)
        ) {
          if (
            Object.keys(this.knowledgeList[sectionName]).includes(
              this.form.subjectName
            )
          ) {
            jsons = this.knowledgeList[sectionName][this.form.subjectName];
          }
        }
      }
      return jsons;
    },
  },
  created() {
    this.role =
      this.$store.getters.info.showRole ||
      this.$store.getters.info.permissions[0].role;
    this.type = this.$route.query.type || 1;
    this.paperType = this.$route.query.paperType || 1;
    this.form.title = this.$route.query.title || "";
    this._QueryDetail();
    this._GradeList();
  },
  methods: {
    // v1.5
    //上传截图
    openStem(obj, type, index, indexs) {
      this.iframeLoading = true;
      this.stem.type = type;
      this.stem.index = index;
      this.stem.indexs = indexs;
      if (type == 1) {
        if (obj.screenshot == "") {
          this.iframeLoading = false;
        }
        this.stem.screenshot = obj.screenshot || "";
        this.stem.answerScreenshot = "";
      } else {
        if (obj.answerScreenshot == "") {
          this.iframeLoading = false;
        }
        this.stem.answerScreenshot = obj.answerScreenshot || "";
        this.stem.screenshot = "";
      }
      this.dialogStem = true;
    },
    //图片上传成功
    upSuccess(res, file) {
      if (res && res.status == 0) {
        this.stem.screenshot = res.data.url;
        if (this.stem.type == 1) {
          if (this.questionList[0]?.subQuestions) {
            this.questionList[this.stem.index].subQuestions[
              this.stem.indexs
            ].screenshot = this.stem.screenshot;
          } else {
            this.questionList[this.stem.index].screenshot =
              this.stem.screenshot;
          }
        } else {
          if (this.questionList[0]?.subQuestions) {
            this.questionList[this.stem.index].subQuestions[
              this.stem.indexs
            ].answerScreenshot = this.stem.answerScreenshot;
          } else {
            this.questionList[this.stem.index].answerScreenshot =
              this.stem.answerScreenshot;
          }
        }
        this.$message.success("上传成功");
      } else {
        this.$message.error(res.info);
      }
    },
    async _GradeList() {
      let fetchClassList =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pClassList
          : this.$request.fetchClassList;
      const { data, status, info } = await fetchClassList();
      if (status == 0) {
        this.gradeClassList = data.list;
      } else {
        this.$message.error(info);
      }
    },
    upError(res) {
      this.$message.error("上传失败");
    },
    // 打开知识点
    openKnowledge(obj, index, indexs) {
      this.stem.index = index;
      this.stem.indexs = indexs || 0;
      this.stem.knowledge = (obj.knowledge && obj.knowledge.split("#")) || [];
      this.dialogKnowledge = true;
    },
    // 选择知识点
    setKnowledge() {
      if (this.questionList[0]?.subQuestions) {
        this.questionList[this.stem.index].subQuestions[
          this.stem.indexs
        ].knowledge = this.stem.knowledge.join("#");
      } else {
        this.questionList[this.stem.index].knowledge =
          this.stem.knowledge.join("#");
      }
      this.dialogKnowledge = false;
    },
    //end
    linkBack() {
      this.$router.go(-1);
    },
    setSubPro(type) {
      let tit;
      switch (type) {
        case 2:
          tit = "单选题";
          break;
        case 3:
          tit = "多选题";
          break;
        case 4:
          tit = "判断题";
          break;
        case 5:
          tit = "主观题";
          break;
      }
      return tit;
    },
    setBigNum(num) {
      let txt = "";
      let bigNum = [
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十",
        "十一",
        "十二",
        "十三",
        "十四",
        "十五",
        "十六",
        "十七",
        "十八",
        "十九",
        "二十",
      ];
      txt = bigNum[num];
      return txt;
    },
    setScore(question) {
      let score = question.subQuestions.reduce((a, b) => {
        return a + (b.score || 0);
      }, 0);
      return Number(score).toFixed(2);
    },
    changAnswer(sub, option) {
      //设置多选答案
      let str = new RegExp(option, "g");
      if (sub.correctAnswer?.includes(option)) {
        sub.correctAnswer = sub.correctAnswer.replace(str, "");
      } else {
        let arrs = (sub.correctAnswer && sub.correctAnswer.split("")) || [];
        arrs.push(option);
        sub.correctAnswer = arrs.sort().join("");
      }
    },
    keydownAnswer(event, type) {
      let answerA = "ABCDEFG";
      let answer_a = "abcdefg";
      answerA = answerA.substring(0, this.formAns.subNum);
      answer_a = answer_a.substring(0, this.formAns.subNum);
      answerA += answer_a;
      answerA = type == 2 ? answerA : answerA + ",";
      if (
        event.key == "Meta" ||
        event.key == "CapsLock" ||
        event.key == "Shift" ||
        event.key == "Enter" ||
        event.key == "Alt" ||
        event.key == "Backspace" ||
        event.key == "Delete" ||
        event.key == "ArrowUp" ||
        event.key == "ArrowDown" ||
        event.key == "ArrowLeft" ||
        event.key == "v" ||
        event.key == "V" ||
        event.key == "ArrowRight"
      )
        return;
      if (!answerA.includes(event.key)) {
        event.returnValue = "";
      }
    },
    setAllAnswer(event, type) {
      let str = this.formAns.answerList;
      let str2 = checkAnswer(
        str,
        type,
        this.formAns.answerOptions.split(",").length,
        this.formAns.subNum
      );
      this.formAns.answerList = str2;
    },
    setAnswer(type, ans) {
      let txt = "";
      if (type == 2) {
        txt = ans;
      } else if (type == 3) {
        txt = ans + ",";
      } else if (type == 4) {
        txt = ans == 1 ? "✓" : ans == 2 ? "✗" : "";
      }
      return txt;
    },
    insertTxtAndSetcursor(answerList, str) {
      let element = this.$refs.formAnsIpt.$el.children[0]; // 获取到指定标签
      let startPos = element.selectionStart; // 获取光标开始的位置
      if (startPos === undefined) {
        // 如果没有光标位置 不操作
        return answerList;
      } else {
        return {
          text:
            answerList.substring(0, startPos) +
            str +
            answerList.substring(startPos), // 将文本插入
          startPos: startPos + str.length,
        };
      }
    },
    //多选答案设置
    setMultiple(obj, answer) {
      let resault = this.insertTxtAndSetcursor(obj.answerList || "", answer);
      obj.answerList = resault.text;
      let str = obj.answerList;
      let str2 = checkAnswer(
        str,
        3,
        obj.answerOptions.split(",").length,
        obj.subNum
      );
      obj.answerList = str2;
      this.$refs.formAnsIpt.$el.children[0].focus();
      this.$refs.formAnsIpt.$el.children[0].selectionStart = resault.startPos;
    },
    //初始化要修改的答案
    setFormAns(indexs, index) {
      let answerList = "";
      if (this.questionList[0]?.subQuestions) {
        this.formAns = { ...this.questionList[index].subQuestions[indexs] };
        this.formAns.listIndex = index;
        let startIndex = indexs - this.formAns.subNum; //批量设置大难开始位置
        this.questionList[index].subQuestions.map((item, subIdx) => {
          if (subIdx >= startIndex && subIdx < indexs) {
            answerList += this.setAnswer(item.questionType, item.correctAnswer);
            if (item.qusType == 3) {
              answerList = answerList.slice(0, -1);
            }
          }
        });
      } else {
        this.formAns = { ...this.questionList[indexs] };
        let startIndex = indexs - this.formAns.subNum; //批量设置开始位置
        this.formAns.answerList = [];
        this.formAns.listIndex = indexs;
        this.questionList.map((item, subIdx) => {
          if (subIdx >= startIndex && subIdx < indexs) {
            answerList += this.setAnswer(item.questionType, item.correctAnswer);
            if (item.qusType == 3) {
              answerList = answerList.slice(0, -1);
            }
          }
        });
      }
      this.formAns.answerList = answerList;
      this.diaSetAns = true;
    },
    saveFormAns() {
      //批量修改答案
      let EndIndex;
      let subNum = this.formAns.subNum - 1;
      if (this.questionList[0]?.subQuestions) {
        this.questionList[this.formAns.listIndex].subQuestions.some(
          (item, index) => {
            if (this.formAns.endIndex == item.questionIndex) {
              EndIndex = index;
            }
            return this.formAns.endIndex == item.questionIndex;
          }
        );
      } else {
        this.questionList.some((item, index) => {
          if (this.formAns.endIndex == item.questionIndex) {
            EndIndex = index;
          }
          return this.formAns.endIndex == item.questionIndex;
        });
      }
      for (let i = 0; i <= subNum; i++) {
        let correctAnswer = "";
        if (this.formAns.qusType == 2) {
          correctAnswer = this.formAns.answerList[subNum - i] || "";
        } else if (this.formAns.qusType == 3) {
          correctAnswer = this.formAns.answerList.split(",")[subNum - i] || "";
        } else if (this.formAns.qusType == 4) {
          correctAnswer =
            this.formAns.answerList[subNum - i] == "✓"
              ? 1
              : this.formAns.answerList[subNum - i] == "✗"
              ? 2
              : "";
        }
        if (this.questionList[0]?.subQuestions) {
          this.questionList[this.formAns.listIndex].subQuestions[
            EndIndex - i
          ].correctAnswer = correctAnswer;
        } else {
          this.questionList[EndIndex - i].correctAnswer = correctAnswer;
        }
      }
      this.diaSetAns = false;
    },
    async save() {
      for (let i = 0; i < this.questionList.length; i++) {
        if (this.questionList[0]?.subQuestions) {
          for (let j = 0; j < this.questionList[i].subQuestions.length; j++) {
            if (this.questionList[i].subQuestions[j].qusType) {
              this.questionList[i].subQuestions.splice(j, 1);
            }
          }
        } else {
          if (this.questionList[i].qusType) {
            this.questionList.splice(i, 1);
            i--;
          }
        }
      }
      let questionList = this.questionList.map((item) => {
        item.score = null;
        // item.questionId = "";
        // item.questionIndex = "";
        return item;
      });
      //更新答题卡
      let modifyPaper, params;
      if (this.type == 1) {
        modifyPaper =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pModifyPaper
            : this.$request.modifyPaper;
        params = {
          paperId: this.$route.query.paperId,
          questionList: questionList,
        };
      } else if (this.type == 2) {
        modifyPaper =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pSetExamAnswer
            : this.$request.setExamAnswer;
        params = {
          examId: this.$route.query.paperId,
          questionList: questionList,
        };
      } else {
        modifyPaper =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pSetPeriodAnswer
            : this.$request.setPeriodAnswer;
        params = {
          periodId: this.$route.query.paperId,
          questionList: questionList,
        };
      }
      const { data, status, info } = await modifyPaper({
        title: this.form.title,
        ...params,
      });
      if (status == 0) {
        this.$router.go(-1);
      } else {
        this.$message.error(message);
      }
    },
    async _QueryDetail() {
      //查询详情
      let detail;
      if (this.role == "ROLE_PERSONAL") {
        detail =
          this.type == 1
            ? this.$request.pPaperDetail
            : this.type == 2
            ? this.$request.pExamQuestionList
            : this.$request.pPeriodQuestionList;
      } else {
        detail =
          this.type == 1
            ? this.$request.fetchPaperDetail
            : this.type == 2
            ? this.$request.examQuestionList
            : this.$request.periodQuestionList;
      }
      let params =
        this.type == 1
          ? { paperId: this.$route.query.paperId }
          : this.type == 2
          ? { examId: this.$route.query.paperId }
          : {
              periodId: this.$route.query.paperId,
            };
      const { data, status, info } = await detail(params);
      if (status == 0) {
        if (this.type == 1) {
          //修改答案信息
          this.paperModifyLog = {
            ...this.paperModifyLog,
            ...this.form.paperModifyLog,
          };
          this.form = deepClone(data);
          this.questionList = deepClone(this.form.questionList);
        } else {
          this.questionList = data.list.sort((a, b) => {
            return a.questionIndex - b.questionIndex;
          });
        }
        this.formateQuestion();
      } else {
        this.$message.error(info);
      }
    },
    formateQuestion() {
      if (this.questionList[0]?.subQuestions) {
        this.questionList?.map((item) => {
          let types = [{}];
          let addndex = 0;
          item.subQuestions.map((sub, index) => {
            if (!!sub.questionType) {
              if (
                sub.questionType == types[addndex].qusType &&
                sub.questionType != 5
              ) {
                //同类型批量答案+1
                types[addndex].subNum += 1;
                if (
                  types[addndex].answerOptions.length < sub.answerOptions.length
                ) {
                  types[addndex].answerOptions = sub.answerOptions;
                }
                types[addndex].answerList += this.setAnswer(
                  sub.questionType,
                  sub.correctAnswer
                );
                if (index == item.subQuestions.length - 1) {
                  //循环最后类型数量大于等于5，保存批量答案
                  if (types[addndex].subNum && types[addndex].subNum >= 5) {
                    types[addndex].endIndex = sub.questionIndex;
                    types[addndex].index = index;
                  }
                }
              } else {
                if (types[addndex].subNum && types[addndex].subNum >= 5) {
                  //不同类型时如果原有类型数量大于等于5，保存批量答案
                  types[addndex].endIndex =
                    item.subQuestions[index - 1].questionIndex;
                  types[addndex].index = index - 1;
                  addndex += 1;
                  types[addndex] = {};
                }
                //不同类型初始化批量答案
                types[addndex].qusType = sub.questionType;
                types[addndex].subNum = 1;
                types[addndex].answerOptions = sub.answerOptions;
                types[addndex].answerList = this.setAnswer(
                  sub.questionType,
                  sub.correctAnswer
                );
              }
            }
          });
          for (let i = 0; i < types.length; i++) {
            if (types[i].qusType == 3) {
              types[i].answerList = types[i].answerList.slice(0, -1);
            }
            if (types[i].subNum >= 5) {
              item.subQuestions.splice(
                types[i].index + i + 1,
                0,
                deepClone(types[i])
              );
            }
          }
        });
      } else {
        let types = [{}];
        let addndex = 0;
        this.questionList?.map((sub, index) => {
          if (!!sub.questionType) {
            if (
              sub.questionType == types[addndex].qusType &&
              sub.questionType != 5
            ) {
              //同类型批量答案+1
              types[addndex].subNum += 1;
              if (
                types[addndex].answerOptions.length < sub.answerOptions.length
              ) {
                types[addndex].answerOptions = sub.answerOptions;
              }
              types[addndex].answerList += this.setAnswer(
                sub.questionType,
                sub.correctAnswer
              );
              if (index == this.questionList.length - 1) {
                //循环最后类型数量大于等于5，保存批量答案
                if (types[addndex].subNum && types[addndex].subNum >= 5) {
                  types[addndex].endIndex = sub.questionIndex;
                  types[addndex].index = index;
                }
              }
            } else {
              if (types[addndex].subNum && types[addndex].subNum >= 5) {
                //不同类型时如果原有类型数量大于等于5，保存批量答案
                types[addndex].endIndex =
                  this.questionList[index - 1].questionIndex;
                types[addndex].index = index - 1;
                addndex += 1;
                types[addndex] = {};
              }
              //不同类型初始化批量答案
              types[addndex].qusType = sub.questionType;
              types[addndex].subNum = 1;
              types[addndex].answerOptions = sub.answerOptions;
              types[addndex].answerList = this.setAnswer(
                sub.questionType,
                sub.correctAnswer
              );
            }
          }
        });
        for (let i = 0; i < types.length; i++) {
          if (types[i].qusType == 3) {
            types[i].answerList = types[i].answerList.slice(0, -1);
          }
          if (types[i].subNum >= 5) {
            this.questionList.splice(
              types[i].index + i + 1,
              0,
              deepClone(types[i])
            );
          }
        }
      }
    },
  },
};
</script>
<style>
.screenshot-box {
  width: 600px;
}
.screenshot {
  width: 100%;
  box-shadow: none;
  border: none;
  height: 400px;
}
.screenshot-img {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 10px;
}
</style>
<style lang="scss" scoped>
.content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 50px 60px;
  .ml-20 {
    margin-left: 20px;
  }
  .btn-box {
    width: calc(100% - 240px);
    position: fixed;
    right: 40px;
    bottom: 20px;
    padding: 10px 0 5px;
    background: #fff;
    text-align: right;
    margin-left: 140px;
    z-index: 10;
  }
  .tips {
    height: 48px;
    line-height: 48px;
    padding: 0 16px;
    border: 1px solid #fac7cc;
    background-color: #ffebec;
    font-size: 14px;
    color: #fd9795;
    margin: 10px 0 20px 0;
    .fa-bell-o {
      font-size: 18px;
      margin-right: 5px;
    }
  }
}
.answer-title {
  text-align: center;
  font-size: 20px;
  color: #333;
  font-weight: 700;
  padding: 20px 0;
  &.t-left {
    text-align: left;
  }
  .totals {
    font-size: 16px;
    color: #666;
    font-weight: normal;
  }
  .name-box {
    display: flex;
    white-space: nowrap;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: normal;
    :deep(.el-input__inner) {
      font-size: 16px;
      color: #333;
      font-weight: 700;
    }
  }
}
.question-title {
  line-height: 40px;
  .ipt {
    width: 300px;
    margin: 0 16px 0 10px;
    :deep(.el-input__inner) {
      border-radius: 20px;
      border-color: #667ffd;
      background: rgba($color: #667ffd, $alpha: 0.05);
    }
  }
  .delete {
    margin-right: 8px;
  }
  .title-txt {
    margin-right: 20px;
    font-size: 16px;
    font-weight: 700;
  }
}
.question-box {
  margin-bottom: 20px;
  .screenshot-box {
    width: 100%;
    border: 1px solid #e2e2e2;
    margin-bottom: 20px;
    .screenshot-img {
      margin: 0;
    }
  }
}
.set-ans-btn {
  width: 100%;
  padding: 10px 0 10px 630px;
  box-sizing: border-box;
  border-bottom: 1px solid #e2e2e2;
  border-right: 1px solid #e2e2e2;
}
.el-input-number {
  width: 140px;
}
.delete {
  margin-left: 8px;
}
.questions-ul {
  border-left: 1px solid #e2e2e2;
  border-top: 1px solid #e2e2e2;
  margin: 12px 0;
}
.questions-ul2 {
  margin: 0;
  border-top: none;
  &:nth-child(1) {
    border-top: 1px solid #e2e2e2;
  }
}
.sub-questions {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #e2e2e2;
  & > div {
    min-height: 40px;
    padding: 5px;
    flex-shrink: 0;
    border-right: 1px solid #e2e2e2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .qs-num {
    width: 80px;
  }
  .qs-type {
    width: 160px;
  }
  .qs-score,
  .qs-partScore {
    width: 160px;
  }
  .qs-set {
    width: 60px;
  }
  .qs-options {
    flex: 1;
  }
  .qs-options2 {
    text-align: left;
    justify-content: flex-start;
    padding-left: 20px;
  }
  .answer-s {
    cursor: pointer;
  }
  :deep(.el-select) {
    .el-input__inner {
      border-radius: 20px;
      border-color: #667ffd;
      width: 150px;
      height: 32px;
      line-height: 32px;
      background: rgba($color: #667ffd, $alpha: 0.05);
    }
    .el-input__icon {
      line-height: 32px;
    }
  }
}
.set-questions {
  .answer-box {
    .answer-s {
      cursor: pointer;
      user-select: none;
      &:first-of-type {
        margin-left: 0;
      }
    }
  }
}
.upload-box {
  .upload-demo {
    text-align: center;
  }
  .stem-pic {
    display: block;
    margin: 0 auto 20px;
    max-width: 100%;
    max-height: 200px;
    object-fit: cover;
  }
}
</style>