union-question-web/src/modules/questions/views/EditPaper.vue

<template>
  <div
    v-loading="loading"
    class="edit-paper"
    element-loading-text="拼命加载中。。。"
  >
    <div class="edit-header">
      <div class="edit-header-top box-justify">
        <div class="header-info">
          <div class="header-info-item">
            <span>课程代码：</span>
            <span>{{ paper.course.code }}</span>
          </div>
          <div class="header-info-item">
            <span>课程名称：</span>
            <span>{{ paper.course.name }}</span>
          </div>
          <div class="header-info-item">
            <span>试卷名称：</span>
            <span>
              <el-tooltip class="item" effect="dark" placement="top-start">
                <div slot="content">{{ paper.name }}</div>
                <el-input
                  v-model="paper.name"
                  size="mini"
                  class="header-info-input"
                  placeholder="试卷名称"
                ></el-input>
              </el-tooltip>
            </span>
          </div>
          <div class="header-info-item">
            <span>试卷总分：</span>
            <span>{{ paper.totalScore }}</span>
          </div>
        </div>
        <div class="header-btns">
          <el-button type="primary" size="small" @click="savePaper">
            保存
          </el-button>
          <el-button
            type="danger"
            plain
            size="small"
            @click="deletePaper(paper.id)"
          >
            删除
          </el-button>
          <el-button
            v-if="showCheckDuplicateBtn"
            type="primary"
            size="small"
            plain
            @click="checkDuplicate"
          >
            进入查重
          </el-button>
          <el-dropdown>
            <el-button type="primary" size="small" plain>
              更多<i class="el-icon-more el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" class="action-dropdown">
              <el-dropdown-item>
                <el-button type="primary" plain size="small" @click="openDialog"
                  >上传音频
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  size="small"
                  type="primary"
                  plain
                  @click="exportPaperAnswer()"
                  >导出答案</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  type="primary"
                  size="small"
                  plain
                  @click="openAnswerDialog"
                  >导入答案
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button
            size="small"
            type="danger"
            plain
            icon="icon icon-back"
            @click="back"
            >返回</el-button
          >
        </div>
      </div>
      <div class="edit-header-bottom box-justify">
        <div>
          <el-button type="info" size="small" @click="showBasicDialog">
            基础构成
          </el-button>
          <el-button type="info" size="small" @click="showTypeDialog">
            题型分布
          </el-button>
          <el-button type="info" size="small" @click="showBlueDialog">
            蓝图分布
          </el-button>
          <el-button type="info" size="small" @click="showAuditDialog">
            审核记录
          </el-button>
          <el-button type="info" size="small" @click="toEditCard">
            编辑题卡
          </el-button>
        </div>
        <div>
          <el-button type="primary" size="small" plain @click="quesTagShowHide">
            {{ quesTagShow ? "隐藏" : "显示" }}属性
          </el-button>
          <el-button
            type="primary"
            size="small"
            plain
            @click="quesAnswerShowHide"
          >
            {{ quesAnswerShow ? "隐藏" : "显示" }}答案
          </el-button>
        </div>
      </div>
    </div>

    <div class="edit-body">
      <div class="edit-part-list">
        <div class="edit-part">
          <div class="edit-cont">
            <div class="edit-cont-title">
              <h3>考试说明</h3>
            </div>
            <div class="edit-cont-action">
              <el-button
                type="primary"
                plain
                size="small"
                @click="openEditExamPaperRemark"
                >编辑</el-button
              >
            </div>
            <div class="edit-cont-body">
              <rich-text :text-json="paper.examRemark"></rich-text>
            </div>
          </div>
        </div>
      </div>

      <!-- 循环大题 -->
      <div
        v-for="(paperDetail, detailIndex) in paper.paperDetails"
        v-show="paperDetailShow(paperDetail)"
        :key="detailIndex"
        class="edit-part-list"
      >
        <div class="edit-part">
          <div
            class="edit-cont"
            @mouseover="quesMouseOver(paperDetail.id)"
            @mouseout="quesMouseOut(paperDetail.id)"
          >
            <div class="edit-cont-title">
              <h3>
                <span>{{ paperDetail.cnNum }}</span> <span>.</span>
                <span>{{ paperDetail.name }}</span>
                <span>
                  ({{
                    !paperDetail.title ? "本大题" : paperDetail.title + "，"
                  }}共{{ paperDetail.unitCount }}小题，满分{{
                    paperDetail.score
                  }}分)
                </span>
              </h3>
            </div>
            <div
              :id="paperDetail.id"
              class="edit-cont-action"
              style="visibility: hidden"
            >
              <el-button
                v-show="parentView == 'gen_paper'"
                size="small"
                type="primary"
                plain
                @click="selectQues(paperDetail.id)"
                >选题
              </el-button>
              <el-button
                size="small"
                type="primary"
                plain
                @click="openEditPaperDetail(paperDetail)"
                >编辑
              </el-button>
              <el-button
                v-if="showUp(paperDetail)"
                size="small"
                type="primary"
                plain
                @click="movePaperDetail(paperDetail, 'up')"
                >上移
              </el-button>
              <el-button
                v-if="showDown(paperDetail)"
                size="small"
                type="primary"
                plain
                @click="movePaperDetail(paperDetail, 'down')"
                >下移
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="deletePaperDetail(paperDetail.id)"
                >删除
              </el-button>
              <el-button
                v-show="showButtons[detailIndex].up"
                size="small"
                type="primary"
                plain
                icon="el-icon-arrow-up"
                @click.stop="hideContent(detailIndex)"
              ></el-button>
              <el-button
                v-show="!showButtons[detailIndex].up"
                size="small"
                icon="el-icon-arrow-down"
                type="primary"
                plain
                @click.stop="showContent(detailIndex)"
              ></el-button>
            </div>
            <rich-text
              class="edit-cont-body"
              :text-json="paperDetail.description"
            ></rich-text>
          </div>
          <div v-show="quesTagShow" class="edit-property">
            <div class="edit-property-box">
              <div
                v-for="(paperDetailTag, tagIndex) in paperDetail.tags"
                :key="tagIndex"
                class="edit-property-item"
              >
                <div class="edit-property-body edit-property-danger">
                  <div class="edit-property-title">
                    {{ paperDetailTag.tag }}
                  </div>
                  <div class="edit-property-content">
                    {{ paperDetailTag.content }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 循环小题 -->
        <div
          v-show="showQuestions[detailIndex].is_show"
          class="edit-paper-questions"
        >
          <template
            v-for="(paperDetailUnit, unitIndex) in paperDetail.paperDetailUnits"
          >
            <div
              v-show="quesShow(paperDetailUnit.id)"
              :key="`question-${unitIndex}`"
              :class="[
                'edit-part',
                {
                  'question-duplicate':
                    paperDetailUnit.question.checkDuplicateStatus ==
                    'TO_BE_DISPOSE',
                },
              ]"
            >
              <div
                class="edit-cont"
                @mouseover="quesMouseOver(paperDetailUnit.id)"
                @mouseout="quesMouseOut(paperDetailUnit.id)"
              >
                <div class="edit-cont-title">
                  <span>{{ paperDetailUnit.number }}.</span>
                  <rich-text
                    :text-json="paperDetailUnit.question.quesBody"
                  ></rich-text>
                  <span> （{{ paperDetailUnit.score }}分） </span>
                </div>
                <div
                  :id="paperDetailUnit.id"
                  class="edit-cont-action"
                  style="visibility: hidden"
                >
                  <span class="tips-info">
                    {{ paperDetailUnit.question.bodyLengthText }}
                  </span>
                  <el-button
                    v-if="
                      paperDetailUnit.question.checkDuplicateStatus ==
                      'TO_BE_DISPOSE'
                    "
                    size="small"
                    type="primary"
                    plain
                    @click="checkDuplicateQuestion(paperDetailUnit.question.id)"
                    >进入查重
                  </el-button>
                  <el-button
                    size="small"
                    type="primary"
                    plain
                    @click="editQues(paperDetailUnit, paperDetailUnit.question)"
                    >编辑
                  </el-button>
                  <el-button
                    v-if="showUnitUp(paperDetail, paperDetailUnit.id)"
                    size="small"
                    type="primary"
                    plain
                    @click="
                      movePaperDetailUnit(
                        paperDetail.id,
                        paperDetailUnit.id,
                        'up'
                      )
                    "
                    >上移
                  </el-button>
                  <el-button
                    v-if="showUnitDown(paperDetail, paperDetailUnit.id)"
                    size="small"
                    type="primary"
                    plain
                    @click="
                      movePaperDetailUnit(
                        paperDetail.id,
                        paperDetailUnit.id,
                        'down'
                      )
                    "
                    >下移
                  </el-button>
                  <el-button
                    type="danger"
                    size="small"
                    @click="deleteQues(paperDetailUnit)"
                    >删除
                  </el-button>
                  <el-button
                    v-show="
                      isNested(paperDetailUnit.questionType) &&
                      showSubButtons[detailIndex + '-' + unitIndex]
                    "
                    size="small"
                    icon="el-icon-arrow-up"
                    @click.stop="hideSubContent(detailIndex + '-' + unitIndex)"
                  ></el-button>
                  <el-button
                    v-show="
                      isNested(paperDetailUnit.questionType) &&
                      !showSubButtons[detailIndex + '-' + unitIndex]
                    "
                    size="small"
                    type="primary"
                    plain
                    icon="el-icon-arrow-down"
                    @click.stop="showSubContent(detailIndex + '-' + unitIndex)"
                  ></el-button>
                </div>
                <div class="edit-cont-body">
                  <div
                    v-for="(quesOption, optionIndex) in paperDetailUnit.question
                      .quesOptions"
                    :key="optionIndex"
                    class="paper-option"
                  >
                    <span>{{ optionIndex | optionOrderWordFilter }}. </span>
                    <rich-text :text-json="quesOption.optionBody"></rich-text>
                  </div>
                  <div v-if="!isNested(paperDetailUnit.questionType)">
                    <div v-show="quesAnswerShow" class="paper-answer">
                      <span>答案：</span>
                      <question-answer
                        :data="paperDetailUnit.question"
                      ></question-answer>
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="quesTagShow" class="edit-property">
                <div class="edit-property-box">
                  <div
                    v-for="(questionTag, tagIndex) in paperDetailUnit.question
                      .tags"
                    :key="tagIndex"
                    class="edit-property-item"
                  >
                    <div class="edit-property-body">
                      <div class="edit-property-title">
                        {{ questionTag.tag }}
                      </div>
                      <div class="edit-property-content">
                        {{ questionTag.content }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-show="showSubQuestions[detailIndex + '-' + unitIndex]"
              :key="`question-sub-${unitIndex}`"
              class="edit-paper-question-subs"
            >
              <div
                v-for="(subQuestion, subIndex) in paperDetailUnit.question
                  .subQuestions"
                v-show="quesShow(subQuestion.id)"
                :key="subIndex"
                class="edit-part"
              >
                <div
                  class="edit-cont"
                  @mouseover="
                    quesMouseOver(
                      getSubQuesEditId(paperDetailUnit, subQuestion)
                    )
                  "
                  @mouseout="
                    quesMouseOut(getSubQuesEditId(paperDetailUnit, subQuestion))
                  "
                >
                  <div
                    :id="getSubQuesEditId(paperDetailUnit, subQuestion)"
                    class="edit-cont-action"
                    style="visibility: hidden"
                  >
                    <el-button
                      size="small"
                      type="primary"
                      plain
                      @click="editQues(paperDetailUnit, subQuestion)"
                      >编辑
                    </el-button>
                    <el-button
                      v-if="showUnitSubUp(paperDetailUnit, subQuestion.id)"
                      size="small"
                      type="primary"
                      plain
                      @click="
                        movePaperDetailUnitSub(
                          paperDetailUnit.id,
                          subQuestion.id,
                          'up'
                        )
                      "
                      >上移
                    </el-button>
                    <el-button
                      v-if="showUnitSubDown(paperDetailUnit, subQuestion.id)"
                      size="small"
                      type="primary"
                      plain
                      @click="
                        movePaperDetailUnitSub(
                          paperDetailUnit.id,
                          subQuestion.id,
                          'down'
                        )
                      "
                      >下移
                    </el-button>
                  </div>
                  <div class="edit-cont-title">
                    <span>{{ subQuestion.subNumber }}. </span>
                    <rich-text :text-json="subQuestion.quesBody"></rich-text>
                    <span
                      >（{{ paperDetailUnit.subScoreList[subIndex] }}分）</span
                    >
                  </div>

                  <div
                    v-if="!isMatchingQuestion(paperDetailUnit.questionType)"
                    class="edit-cont-body"
                  >
                    <div
                      v-for="(
                        subQuesOption, subOptIndex
                      ) in subQuestion.quesOptions"
                      :key="subOptIndex"
                      class="paper-option"
                    >
                      <span>{{ subOptIndex | optionOrderWordFilter }}. </span>
                      <rich-text
                        :text-json="subQuesOption.optionBody"
                      ></rich-text>
                    </div>
                  </div>
                  <div v-show="quesAnswerShow" class="paper-answer">
                    <span>答案：</span>
                    <question-answer :data="subQuestion"></question-answer>
                    <!-- <rich-text :text-json="subQuestion.quesAnswer"></rich-text> -->
                  </div>
                </div>
                <div v-show="quesTagShow" class="edit-property">
                  <div class="edit-property-box">
                    <div
                      v-for="(subQuestionTag, tagIndex) in subQuestion.tags"
                      :key="tagIndex"
                      class="edit-property-item"
                    >
                      <div class="edit-property-body">
                        <div class="edit-property-title">
                          {{ subQuestionTag.tag }}
                        </div>
                        <div class="edit-property-content">
                          {{ subQuestionTag.content }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 编辑大题弹框 -->
    <el-dialog
      v-loading.body="detailLoading"
      width="600px"
      title="大题名称编辑"
      element-loading-text="保存中。。。"
      :visible.sync="paperDatailDialog"
      :modal="false"
      append-to-body
      custom-class="side-dialog"
      @close="closeQuesDialog"
    >
      <el-form :model="editpaperDetail" label-width="80px">
        <el-form-item label="大题名称">
          <el-input
            v-model="editpaperDetail.name"
            placeholder="请输入大题名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="大题描述">
          <v-editor v-model="editpaperDetail.description"></v-editor>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="savePaperDatail(editpaperDetail)"
          >保存</el-button
        >
        <el-button type="danger" plain @click="closePaperDatailDialog()"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑试题弹框 -->
    <el-dialog
      v-loading.body="dialogLoading"
      title="试题编辑"
      width="900px"
      element-loading-text="保存中。。。"
      :visible.sync="quesDialog"
      :modal="false"
      append-to-body
      custom-class="side-dialog"
      @close="closeQuesDialog"
    >
      <el-form :model="quesModel" label-position="right" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="题型">
              <el-select
                v-model="quesModel.questionType"
                :disabled="true"
                placeholder="请输入题型"
              >
                <el-option
                  v-for="item in questionTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分值">
              <el-input-number
                v-model="quesModel.score"
                placeholder="分值"
                :precision="1"
                :min="0"
                :disabled="isNested(quesModel.questionType)"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="难度">
              <el-select
                v-model="quesModel.difficultyDegree"
                placeholder="请输入难度"
                :disabled="
                  isNested(quesModel.questionType) ? true : updatePorperty
                "
              >
                <el-option
                  v-for="item in difficultyDegreeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公开度">
              <el-select
                v-model="quesModel.publicity"
                placeholder="请输入公开度"
                :disabled="updatePorperty"
              >
                <el-option
                  v-for="item in publicityList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            v-if="quesModel.questionType == 'TEXT_ANSWER_QUESTION'"
            :span="12"
          >
            <el-form-item label="作答类型">
              <el-select
                v-model="quesModel.answerType"
                :disabled="updatePorperty"
              >
                <el-option
                  v-for="item in answerTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            v-if="quesModel.questionType && !isNested(quesModel.questionType)"
            :span="12"
          >
            <el-form-item label="时长">
              <el-input-number
                v-model="quesModel.control.maxAnswerTime"
                size="small"
                :precision="0"
                :min="1"
                :disabled="updatePorperty"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col v-if="isMatchingQuestion(quesModel.questionType)" :span="12">
            <el-form-item label="答题模式">
              <el-select
                v-model="quesModel.quesParam.matchingMode"
                :disabled="updatePorperty"
              >
                <el-option
                  v-for="item in matchingModes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="属性列表">
          <el-tooltip
            v-for="(content, propIndex) in quesModel.quesProperties"
            :key="propIndex"
            placement="top"
          >
            <div slot="content">
              <span v-if="content.firstProperty != null"
                >一级属性：{{ content.firstProperty.name }}({{
                  content.firstProperty.code
                }})</span
              ><br />
              <span v-if="content.secondProperty != null"
                >二级属性：{{ content.secondProperty.name }}({{
                  content.secondProperty.code
                }})</span
              >
            </div>
            <span>
              <el-tag
                :key="content.id"
                style="margin-right: 5px"
                :closable="!updatePorperty"
                type="primary"
                effect="dark"
                @close="handleClose(content)"
              >
                {{ content.courseProperty.name }}
              </el-tag>
            </span>
          </el-tooltip>
        </el-form-item>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="属性名" label-width="80px">
              <el-select
                v-model="coursePropertyId"
                placeholder="属性名"
                class="property_with"
                :disabled="updatePorperty"
                @change="searchFirst"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option
                  v-for="item in coursePropertyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="一级" label-width="48px">
              <el-select
                v-model="firstPropertyId"
                placeholder="一级"
                class="property_with"
                :disabled="updatePorperty"
                @change="searchSecond"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option
                  v-for="item in firstPropertyList"
                  :key="item.id"
                  :label="item.name + '(' + item.code + ')'"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级" label-width="48px">
              <el-select
                v-model="secondPropertyId"
                placeholder="二级"
                class="property_with"
                :disabled="updatePorperty"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option
                  v-for="item in secondPropertyList"
                  :key="item.id"
                  :label="item.name + '(' + item.code + ')'"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="0px">
              <el-button
                type="primary"
                :disabled="updatePorperty"
                @click="insertProperty"
                ><i class="el-icon-plus"></i>新增属性
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- end by weiwenhai -->
        <el-form-item label="题目">
          <v-editor
            v-model="quesModel.quesBody"
            :enable-answer-point="enableAnswerPoint"
            @change="quesBodyChange"
          ></v-editor>
        </el-form-item>
        <el-form-item
          v-for="(quesOption, optIndex) in quesModel.quesOptions"
          :key="optIndex"
        >
          <div class="question-edit-option">
            <div class="option-check">
              <div
                v-if="
                  !quesModel.parentType ||
                  !isMatchingQuestion(quesModel.parentType) ||
                  !isInOtherSelect(optIndex, quesModel)
                "
              >
                <el-radio
                  v-if="quesModel.questionType === 'SINGLE_ANSWER_QUESTION'"
                  v-model="singleRightAnswer"
                  :label="optIndex | optionOrderWordFilter"
                ></el-radio>
                <el-checkbox
                  v-if="quesModel.questionType === 'MULTIPLE_ANSWER_QUESTION'"
                  v-model="multipleRightAnswer"
                  :label="optIndex | optionOrderWordFilter"
                ></el-checkbox>
                <span v-if="isMatchingQuestion(quesModel.questionType)">{{
                  optIndex | optionOrderWordFilter
                }}</span>
              </div>
              <div
                v-if="
                  quesModel.parentType &&
                  isMatchingQuestion(quesModel.parentType) &&
                  isInOtherSelect(optIndex, quesModel)
                "
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="otherSelect(optIndex, quesModel)"
                  placement="top-start"
                >
                  <el-radio
                    v-if="quesModel.questionType === 'SINGLE_ANSWER_QUESTION'"
                    v-model="singleRightAnswer"
                    :disabled="true"
                    :label="optIndex | optionOrderWordFilter"
                  ></el-radio>

                  <el-checkbox
                    v-if="quesModel.questionType === 'MULTIPLE_ANSWER_QUESTION'"
                    v-model="multipleRightAnswer"
                    :disabled="true"
                    :label="optIndex | optionOrderWordFilter"
                  ></el-checkbox>
                  <span v-if="isMatchingQuestion(quesModel.questionType)">{{
                    optIndex | optionOrderWordFilter
                  }}</span>
                </el-tooltip>
              </div>
            </div>
            <div
              v-if="
                !quesModel.parentType ||
                !isMatchingQuestion(quesModel.parentType)
              "
              class="option-body"
            >
              <v-editor v-model="quesOption.optionBody"></v-editor>
            </div>
            <div
              v-if="
                quesModel.parentType && isMatchingQuestion(quesModel.parentType)
              "
              class="option-body"
            >
              <rich-text :text-json="quesOption.optionBody"></rich-text>
            </div>
            <div
              v-if="
                !quesModel.parentType ||
                !isMatchingQuestion(quesModel.parentType)
              "
              class="option-delete"
            >
              <el-button
                size="mini"
                circle
                type="danger"
                icon="el-icon-delete"
                title="删除"
                @click.prevent="removeQuesOption(quesOption)"
              ></el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="
              (quesModel.questionType == 'SINGLE_ANSWER_QUESTION' ||
                quesModel.questionType == 'MULTIPLE_ANSWER_QUESTION' ||
                isMatchingQuestion(quesModel.questionType)) &&
              !isMatchingQuestion(quesModel.parentType)
            "
            type="primary"
            @click="addQuesOption"
            ><i class="el-icon-plus"></i> 新增选项
          </el-button>
        </el-form-item>
        <!-- 答案 -->
        <!-- 填空， -->
        <div v-if="quesModel.questionType == 'FILL_BLANK_QUESTION'">
          <el-form-item label="答案" prop="quesAnswer">
            <div v-if="quesAnswer" class="option-list">
              <div
                v-for="(opt, index) of quesAnswer"
                :key="index"
                class="option-item"
              >
                <div class="option-item-info">
                  <span>（{{ index + 1 }}）</span>
                </div>
                <v-editor
                  :value="opt"
                  class="option-item-body"
                  @change="(val) => updateAnswerPoint(index, val)"
                />
              </div>
            </div>
          </el-form-item>
        </div>
        <!-- 简答 -->
        <div v-if="quesModel.questionType === 'TEXT_ANSWER_QUESTION'">
          <el-form-item label="答案" prop="quesAnswer">
            <v-editor
              v-model="quesAnswer"
              @change="textAnswerChange"
            ></v-editor>
          </el-form-item>
        </div>
        <!-- 单选或多选 -->
        <div
          v-if="
            quesModel.questionType == 'SINGLE_ANSWER_QUESTION' ||
            quesModel.questionType == 'MULTIPLE_ANSWER_QUESTION'
          "
        >
          <el-form-item label="答案">
            <span v-html="answer"></span>
          </el-form-item>
        </div>
        <!-- 判断 -->
        <div v-if="quesModel.questionType == 'BOOL_ANSWER_QUESTION'">
          <el-row>
            <el-col>
              <el-form-item label="答案">
                <el-select
                  v-model="quesAnswer"
                  placeholder="请选择"
                  @change="boolAnswerChange"
                >
                  <el-option
                    v-for="op in options"
                    :key="op.value"
                    :label="op.label"
                    :value="op.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="savePaperDetailUnit()"
          >保存</el-button
        >
        <el-button type="danger" plain @click="closeQuesDialog">取消</el-button>
      </div>
    </el-dialog>
    <!-- 考试说明弹框 -->
    <el-dialog
      title="考试说明编辑"
      :visible.sync="paperRemarkDialog"
      width="600px"
      :modal="false"
      append-to-body
      custom-class="side-dialog"
    >
      <el-form label-position="top">
        <el-form-item label="考试说明：">
          <v-editor v-model="examRemark"></v-editor>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="savePaperRemark">保存</el-button>
        <el-button type="danger" plain @click="closPaperRemark">取消</el-button>
      </div>
    </el-dialog>
    <!-- 上传音频弹框 -->
    <el-dialog
      title="上传音频文件"
      :visible.sync="dialogRadioFile"
      :before-close="closeAudioDialog"
      :modal="false"
      width="520px"
      append-to-body
      custom-class="side-dialog"
    >
      <div>
        <div tabindex="0" class="el-upload el-upload--text">
          <el-button
            type="primary"
            icon="icon icon-search-white"
            @click="selectAudioFile"
            >选择文件</el-button
          >
          <input
            id="radioFile"
            class="el-upload__input"
            name="files"
            type="file"
            value="上传音频文件"
            webkitdirectory
            @change="audioFileChange"
          />
        </div>
        <el-button type="warning" @click="checkFile">检查文件名</el-button>
        <el-button
          type="info"
          :loading="uploadAudioLoading"
          :disabled="isUpload || uploadAudioLoading"
          @click="uploadAudioFile"
        >
          <span v-show="!uploadAudioLoading">开始上传</span>
          <span v-show="uploadAudioLoading">正在上传中...</span>
        </el-button>
      </div>
      <p v-if="audioFileName" class="tips-info">文件： {{ audioFileName }}</p>
      <div v-if="checkResult" style="margin-top: 20px">
        <span>检查结果：</span><br /><br />
        <span v-show="message == 'OK!'" style="color: #13ce66">OK!</span>
        <span v-show="message != 'OK!'" style="color: #ff4949">{{
          message
        }}</span>
      </div>
    </el-dialog>
    <!-- 上传答案文件 -->
    <el-dialog
      title="上传答案文件"
      :visible.sync="dialogAnswerFile"
      :before-close="closeAnswerDialog"
      :modal="false"
      width="520px"
      append-to-body
      custom-class="side-dialog"
    >
      <div>
        <div tabindex="0" class="el-upload el-upload--text">
          <el-button
            type="primary"
            icon="icon icon-search-white"
            @click="selectAnswerFile"
            >选择文件</el-button
          >
          <input
            id="answerFile"
            class="el-upload__input"
            name="answerFiles"
            type="file"
            value="上传答案文件"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            @change="answerFileChange"
          />
        </div>
        <el-button type="primary" @click="downAnswerTemplate">
          <span>下载模板</span>
        </el-button>
        <el-button
          type="primary"
          :loading="uploadAnswerLoading"
          :disabled="uploadAnswerLoading"
          @click="uploadAnswerFile"
        >
          <span v-show="!uploadAnswerLoading">开始上传</span>
          <span v-show="uploadAnswerLoading">正在上传中...</span>
        </el-button>
      </div>
      <p v-if="answerFileName" class="tips-info">文件： {{ answerFileName }}</p>
      <div style="margin-top: 20px">
        <span v-show="answerMessage != ''" style="color: #ff4949">{{
          answerMessage
        }}</span>
      </div>
    </el-dialog>
    <!-- 基础构成 -->
    <el-dialog
      title="基础构成"
      width="100%"
      :visible.sync="basicDialog"
      :modal="false"
      append-to-body
      custom-class="side-dialog"
    >
      <PaperBasicComposition
        v-if="basicDialog"
        :paper-id="paperId"
      ></PaperBasicComposition>
    </el-dialog>
    <!-- 题型分布 -->
    <el-dialog
      title="题型分布"
      width="100%"
      :visible.sync="typeDialog"
      :modal="false"
      append-to-body
      custom-class="side-dialog"
    >
      <PaperQuestionType
        v-if="typeDialog"
        :paper-id="paperId"
      ></PaperQuestionType>
    </el-dialog>
    <!-- 蓝图分布 -->
    <el-dialog
      title="蓝图分布"
      width="100%"
      :visible.sync="blueDialog"
      :modal="false"
      append-to-body
      custom-class="side-dialog"
    >
      <PaperBlue
        v-if="blueDialog"
        :paper-id="paperId"
        :course-id="paper.course.id"
      ></PaperBlue>
    </el-dialog>
    <!-- 审核记录 -->
    <el-dialog
      title="审核记录"
      width="700px"
      :visible.sync="auditInfoDialog"
      :modal="false"
      append-to-body
      custom-class="side-dialog"
    >
      <AuditInfo v-if="auditInfoDialog" :paper-id="paperId"></AuditInfo>
    </el-dialog>
  </div>
</template>

<script>
import { QUESTION_API } from "@/constants/constants";
import { isEmptyStr, QUESTION_TYPES } from "../constants/constants";
import { mapState } from "vuex";
import PaperBasicComposition from "./PaperBasicComposition.vue";
import PaperQuestionType from "./PaperQuestionType.vue";
import PaperBlue from "./PaperBlue.vue";
import AuditInfo from "./AuditInfo.vue";

export default {
  name: "EditPaperApp",
  components: {
    PaperBasicComposition,
    PaperQuestionType,
    PaperBlue,
    AuditInfo,
  },
  data() {
    return {
      showCheckDuplicateBtn: false,
      auditInfoDialog: false,
      blueDialog: false,
      typeDialog: false,
      basicDialog: false,
      quesAnswerShow: true,
      quesTagShow: true,
      hValue: "100px",
      wValue: "560px",
      display: "block",
      uploadAction: "",
      fileList: [],
      answerFileList: [],
      paperId: "",
      paperDetailId: "",
      editPaperDetailUnit: "",
      quesDialog: false,
      paperDatailDialog: false,
      paperRemarkDialog: false,
      parentView: "",
      paper: {
        course: {
          code: "",
          name: "",
        },
        examRemark: "",
      },
      loading: false,
      dialogLoading: false,
      detailLoading: false,
      uploadAudioLoading: false,
      uploadAnswerLoading: false,
      questionTypes: QUESTION_TYPES,
      questionType: "",
      quesModel: { quesProperties: [] },
      quesAnswer: null,
      prevAnswerPointCount: 0,
      editpaperDetail: {},
      reduplicateQuestions: [],
      reduplicateGroup: [],
      reduplicateQuesColor: [],
      singleRightAnswer: "", //接收单选答案
      multipleRightAnswer: [], //接收多选答案
      options: [
        {
          value: 0,
          label: "错误",
        },
        {
          value: 1,
          label: "正确",
        },
      ],
      duplicateLoading: false,
      dialogRadioFile: false,
      dialogAnswerFile: false,
      isUpload: true,
      isUploadAnswer: true,
      message: "",
      answerMessage: "",
      answerFileName: "",
      audioFileName: "",
      checkResult: false,
      checkResultAnswer: false,
      fileNameList: [],
      defaultColor: [
        "Red",
        "Blue",
        "LimeGreen",
        "GoldenRod",
        "Black",
        "BlueViolet",
        "Chocolate",
        "DarkCyan",
        "HotPink",
        "Orange",
        "IndianRed",
        "Indigo",
        "Green",
        "Aqua",
        "CadetBlue",
        "SkyBlue",
        "SlateBlue",
        "SlateGray",
        "Tomato",
        "VioletRed",
      ],
      difficultyDegreeList: [
        { label: 0.1, value: 0.1 },
        { label: 0.2, value: 0.2 },
        { label: 0.3, value: 0.3 },
        { label: 0.4, value: 0.4 },
        { label: 0.5, value: 0.5 },
        { label: 0.6, value: 0.6 },
        { label: 0.7, value: 0.7 },
        { label: 0.8, value: 0.8 },
        { label: 0.9, value: 0.9 },
        { label: 1.0, value: 1.0 },
      ],
      publicityList: [
        { label: "公开", value: true },
        { label: "非公开", value: false },
      ],
      answerTypes: [
        { label: "文本", value: "DIVERSIFIED_TEXT" },
        { label: "音频", value: "SINGLE_AUDIO" },
      ],
      matchingTypes: [
        { label: "填词", value: 1 },
        { label: "段落", value: 2 },
      ],
      matchingModes: [
        { label: "单用", value: 1 },
        { label: "复用", value: 2 },
      ],
      coursePropertyList: [],
      coursePropertyId: "", //课程属性名
      firstPropertyList: [], //一级属性集合
      firstPropertyId: "", //一级属性id
      secondPropertyList: [], //二级属性集合
      secondPropertyId: "", //二级属性id
      examRemark: "",
      showQuestions: [],
      showButtons: [],
      showSubQuestions: {},
      showSubButtons: {},
    };
  },
  computed: {
    ...mapState({
      user: (state) => state.user,
    }),
    updatePorperty() {
      return false;
    },
    answer() {
      if (this.quesModel.questionType == "SINGLE_ANSWER_QUESTION") {
        return this.singleRightAnswer;
      } else if (this.quesModel.questionType == "MULTIPLE_ANSWER_QUESTION") {
        var obj = this.multipleRightAnswer;
        return obj.sort().toString();
      }
      return this.quesModel.quesAnswer;
    },
    enableAnswerPoint() {
      return (
        this.quesModel.questionType == "FILL_BLANK_QUESTION" ||
        this.quesModel.questionType == "CLOZE" ||
        this.quesModel.questionType == "BANKED_CLOZE"
      );
    },
  },
  created() {
    let qt = sessionStorage.getItem("quesTagShow");
    if (qt) {
      this.quesTagShow = qt == "true";
    }
    let qa = sessionStorage.getItem("quesAnswerShow");
    if (qa) {
      this.quesAnswerShow = qa == "true";
    }
    document.getElementsByTagName("body")[0].style = "";
    this.paperId = this.$route.params.id;
    this.parentView = this.$route.params.parentView;
    this.initPaper();
    this.uploadAction = QUESTION_API + "/uploadRadio/" + this.paperId;
    this.uploadHeaders = {
      key: this.user.key,
      token: this.user.token,
    };
  },
  methods: {
    showCheckDuplicate() {
      if (this.paper.checkDuplicateStatus == "DISPOSED") {
        this.showCheckDuplicateBtn = false;
      } else if (this.paper.paperDetails) {
        for (let paperDetilData of this.paper.paperDetails) {
          if (paperDetilData.paperDetailUnits) {
            for (let unit of paperDetilData.paperDetailUnits) {
              if (unit.question.checkDuplicateStatus == "TO_BE_DISPOSE") {
                this.showCheckDuplicateBtn = true;
                return;
              }
            }
          }
        }
        this.showCheckDuplicateBtn = false;
      }
    },
    checkDuplicate() {
      this.$router.push({
        name: "check_duplicate_info",
        query: {
          basePaperId: this.paper.id,
          from: "paper",
        },
      });
    },
    checkDuplicateQuestion(questionId) {
      this.$router.push({
        name: "check_duplicate_info",
        query: {
          quesId: questionId,
          basePaperId: this.paper.id,
          from: "paper",
        },
      });
    },
    toEditCard() {
      this.$router.push({
        name: "CardEdit",
        params: {
          idType: "paper",
          paperOrCardId: this.paperId,
        },
      });
    },
    showAuditDialog() {
      this.auditInfoDialog = true;
    },
    showBlueDialog() {
      this.blueDialog = true;
    },
    showTypeDialog() {
      this.typeDialog = true;
    },
    showBasicDialog() {
      this.basicDialog = true;
    },
    quesAnswerShowHide() {
      this.quesAnswerShow = !this.quesAnswerShow;
      sessionStorage.setItem("quesAnswerShow", this.quesAnswerShow);
    },
    quesTagShowHide() {
      this.quesTagShow = !this.quesTagShow;
      sessionStorage.setItem("quesTagShow", this.quesTagShow);
    },
    isMatchingQuestion(questionType) {
      if (
        questionType == "PARAGRAPH_MATCHING" ||
        questionType == "BANKED_CLOZE"
      ) {
        return true;
      } else {
        return false;
      }
    },
    isNested(questionType) {
      if (
        questionType == "PARAGRAPH_MATCHING" ||
        questionType == "BANKED_CLOZE" ||
        questionType == "CLOZE" ||
        questionType == "READING_COMPREHENSION" ||
        questionType == "LISTENING_QUESTION"
      ) {
        return true;
      } else {
        return false;
      }
    },
    otherSelect(optIndex, quesModel) {
      return "该选项被第" + quesModel.optionsSelected[optIndex + 1] + "题选用";
    },
    isInOtherSelect(optIndex, quesModel) {
      if (quesModel.parentQuesParam.matchingMode != 1) {
        return false;
      }
      if (!quesModel.optionsSelected) {
        return false;
      }
      if (!quesModel.optionsSelected[optIndex + 1]) {
        return false;
      }
      if (
        quesModel.optionsSelected[optIndex + 1].includes(quesModel.subNumber)
      ) {
        return false;
      }
      return true;
    },
    movePaperDetailUnitSub(unitid, subid, vector) {
      let vectorStr = vector == "up" ? "上移" : "下移";
      this.$alert("您确定" + vectorStr + "吗？", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.loading = true;
            this.$http
              .put(
                QUESTION_API +
                  "/paperDetailUnit/sub/" +
                  unitid +
                  "/" +
                  subid +
                  "/" +
                  vector
              )
              .then(() => {
                this.initPaper();
                this.loading = true;
                this.$notify({
                  message: vectorStr + "成功",
                  type: "success",
                });
                this.loading = false;
              });
          }
        },
      });
    },
    showUnitSubDown(unit, subid) {
      if (unit.question.subQuestions.length <= 1) {
        return false;
      }
      if (
        subid !=
        unit.question.subQuestions[unit.question.subQuestions.length - 1].id
      ) {
        return true;
      } else {
        return false;
      }
    },
    showUnitSubUp(unit, subid) {
      if (unit.question.subQuestions.length <= 1) {
        return false;
      }
      if (subid != unit.question.subQuestions[0].id) {
        return true;
      } else {
        return false;
      }
    },
    movePaperDetailUnit(detailId, unitid, vector) {
      let vectorStr = vector == "up" ? "上移" : "下移";
      this.$alert("您确定" + vectorStr + "吗？", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.loading = true;
            this.$http
              .put(
                QUESTION_API +
                  "/paperDetailUnit/" +
                  detailId +
                  "/" +
                  unitid +
                  "/" +
                  vector
              )
              .then(() => {
                this.initPaper();
                this.loading = true;
                this.$notify({
                  message: vectorStr + "成功",
                  type: "success",
                });
                this.loading = false;
              });
          }
        },
      });
    },
    showUnitDown(detail, unitid) {
      if (detail.paperDetailUnits.length <= 1) {
        return false;
      }
      if (
        unitid != detail.paperDetailUnits[detail.paperDetailUnits.length - 1].id
      ) {
        return true;
      } else {
        return false;
      }
    },
    showUnitUp(detail, unitid) {
      if (detail.paperDetailUnits.length <= 1) {
        return false;
      }
      if (unitid != detail.paperDetailUnits[0].id) {
        return true;
      } else {
        return false;
      }
    },
    movePaperDetail(detail, vector) {
      let vectorStr = vector == "up" ? "上移" : "下移";
      this.$alert("您确定" + vectorStr + "吗？", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.loading = true;
            this.$http
              .put(
                QUESTION_API +
                  "/paperDetail/" +
                  this.paperId +
                  "/" +
                  detail.id +
                  "/" +
                  vector
              )
              .then(() => {
                this.initPaper();
                this.loading = true;
                this.$notify({
                  message: vectorStr + "成功",
                  type: "success",
                });
                this.loading = false;
              });
          }
        },
      });
    },
    showUp(detail) {
      if (this.paper.paperDetails.length <= 1) {
        return false;
      }
      if (detail.id != this.paper.paperDetails[0].id) {
        return true;
      } else {
        return false;
      }
    },
    showDown(detail) {
      if (this.paper.paperDetails.length <= 1) {
        return false;
      }
      if (
        detail.id !=
        this.paper.paperDetails[this.paper.paperDetails.length - 1].id
      ) {
        return true;
      } else {
        return false;
      }
    },
    downAnswerTemplate() {
      var key = this.user.key;
      var token = this.user.token;
      window.open(
        QUESTION_API + "/paper/answer/template?$key=" + key + "&$token=" + token
      );
    },
    openAnswerDialog() {
      this.checkResultAnswer = false;
      this.isUploadAnswer = true;
      if (document.getElementById("answerFile")) {
        document.getElementById("answerFile").value = "";
      }
      this.answerFileName = "";
      this.dialogAnswerFile = true;
      this.answerFileList = [];
    },

    closeAnswerDialog() {
      this.answerMessage = "";
      this.dialogAnswerFile = this.uploadAnswerLoading;
    },
    selectAnswerFile() {
      document.getElementById("answerFile").click();
    },
    answerFileChange() {
      let fileList = document.getElementById("answerFile").files;
      if (fileList.length == 0) {
        this.answerFileName = "";
      } else {
        this.answerFileName = fileList[0].name;
      }
    },
    uploadAnswerFile() {
      this.answerMessage = "";
      var fileList = document.getElementById("answerFile").files;
      if (fileList.length == 0) {
        this.answerMessage = "请选择文件!";
        return;
      }
      let param = new FormData();
      //循环添加到formData中
      for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        param.append("dataFile", file, file.name);
      }
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      this.uploadAnswerLoading = true;
      this.$http
        .post(
          QUESTION_API + "/paper/answer/import/" + this.paperId,
          param,
          config
        )
        .then(() => {
          this.dialogAnswerFile = false;
          this.uploadAnswerLoading = false;
          this.checkResultAnswer = false;
          this.isUploadAnswer = true;
          document.getElementById("answerFile").value = "";
          this.initPaper();
        })
        .catch((error) => {
          this.answerMessage = error.response.data.desc;
          document.getElementById("answerFile").value = "";
          this.uploadAnswerLoading = false;
        });
    },
    //隐藏大题下的所有小题
    hideContent(index) {
      this.showQuestions[index].is_show = false;
      this.showButtons[index].up = false;
    },
    //展开大题下所有小题
    showContent(index) {
      this.showQuestions[index].is_show = true;
      this.showButtons[index].up = true;
    },
    //隐藏大题下的所有小题
    hideSubContent(index) {
      this.showSubQuestions[index] = false;
      this.showSubButtons[index] = false;
      this.$forceUpdate();
    },
    //展开大题下所有小题
    showSubContent(index) {
      this.showSubQuestions[index] = true;
      this.showSubButtons[index] = true;
      this.$forceUpdate();
    },
    quesMouseOver(index) {
      document.getElementById(index).style.visibility = "visible";
    },
    quesMouseOut(index) {
      document.getElementById(index).style.visibility = "hidden";
    },
    selectQues(id) {
      this.paperDetailId = id;
      var courseId = this.paper.course.id;
      this.$router.push({
        path:
          "/select_question/" +
          this.paper.id +
          "/" +
          courseId +
          "/" +
          this.paperDetailId +
          "/" +
          this.parentView,
      });
    },
    //打开编辑大题题目弹窗
    openEditPaperDetail(paperDetail) {
      this.paperDatailDialog = true;
      this.editpaperDetail = Object.assign({}, paperDetail); //浅拷贝
    },
    //关闭编辑大题题目弹窗
    closePaperDatailDialog() {
      this.paperDatailDialog = false;
      this.editpaperDetail = {};
    },
    //保存大题题目信息
    savePaperDatail(editpaperDetail) {
      this.detailLoading = true;
      var paperId = this.paper.id;
      this.$http
        .post(QUESTION_API + "/updatePaperDetail/" + paperId, editpaperDetail)
        .then(() => {
          this.$notify({
            message: "保存成功",
            type: "success",
          });
          this.detailLoading = false;
          this.closePaperDatailDialog();
          this.initPaper();
        });
    },
    //初始化试卷
    initPaper() {
      const scrollPosition =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.loading = true;
      this.paper = {
        course: {
          code: "",
          name: "",
        },
      };
      this.$http
        .get(QUESTION_API + "/paper/" + this.paperId)
        .then((response) => {
          this.paper = response.data;
          //查询所有课程属性名
          this.initCourseProperty(this.paper.course.id);
          //将所有小题分为公开和非公开
          if (this.paper.paperDetails && this.paper.paperDetails.length > 0) {
            let dindx = 0;
            for (let paperDetil of this.paper.paperDetails) {
              this.showQuestions.push({ is_show: true });
              this.showButtons.push({ up: true });
              paperDetil.pubCount = 0;
              paperDetil.noPubCount = 0;
              if (
                paperDetil.paperDetailUnits &&
                paperDetil.paperDetailUnits.length > 0
              ) {
                let uindx = 0;
                for (let paperDetilUt of paperDetil.paperDetailUnits) {
                  this.showSubQuestions[dindx + "-" + uindx] = true;
                  this.showSubButtons[dindx + "-" + uindx] = true;
                  if (!this.isNested(paperDetilUt.question.questionType)) {
                    //非套题
                    if (paperDetilUt.question.publicity) {
                      paperDetil.pubCount = paperDetil.pubCount + 1;
                    } else {
                      paperDetil.noPubCount = paperDetil.noPubCount + 1;
                    }
                  } else {
                    //循环所有子题
                    for (let ques of paperDetilUt.question.subQuestions) {
                      if (ques.publicity) {
                        paperDetil.pubCount = paperDetil.pubCount + 1;
                      } else {
                        paperDetil.noPubCount = paperDetil.noPubCount + 1;
                      }
                    }
                  }
                  uindx++;
                }
              }
              dindx++;
            }
          }
          this.showCheckDuplicate();
          setTimeout(() => {
            document.documentElement.scrollTop = document.body.scrollTop =
              scrollPosition;
            console.log(scrollPosition);
          }, 1000);
          this.loading = false;
        });
    },
    //查询所有课程属性名
    initCourseProperty(courseId) {
      this.$http
        .get(QUESTION_API + "/courseProperty/enable?courseId=" + courseId)
        .then((response) => {
          this.coursePropertyList = response.data;
        });
    },
    //删除大题
    deletePaperDetail(paperDetailsId) {
      //先判断大题下面是否还有小题
      var count = 0;
      for (var i = 0, imax = this.paper.paperDetails.length; i < imax; i++) {
        if (paperDetailsId == this.paper.paperDetails[i].id) {
          if (this.paper.paperDetails[i].paperDetailUnits) {
            count += this.paper.paperDetails[i].paperDetailUnits.length;
            break;
          }
        }
      }
      if (count == 0) {
        this.$alert("您确定删除吗？", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            if (action == "confirm") {
              this.loading = true;
              this.$http
                .delete(
                  QUESTION_API +
                    "/paperDetail/" +
                    this.paperId +
                    "/" +
                    paperDetailsId
                )
                .then(() => {
                  this.initPaper();
                  this.loading = true;
                  this.$notify({
                    message: "删除成功",
                    type: "success",
                  });
                  this.loading = false;
                });
            }
          },
        });
      } else {
        this.$alert("大题下还有小题，不可删除！", "提示", {
          confirmButtonText: "确定",
          callback: () => {},
        });
      }
    },
    quesShow(id) {
      if (this.reduplicateGroup.length < 1) {
        return true;
      }
      for (var i = 0, imax = this.reduplicateGroup.length; i < imax; i++) {
        if (id == this.reduplicateGroup[i]) {
          return true;
        }
      }
      return false;
    },
    //编辑题目
    editQues(paperDetailUnit, question) {
      console.log("question:", question);
      this.coursePropertyId = "";
      this.firstPropertyId = "";
      this.secondPropertyId = "";
      this.editPaperDetailUnit = paperDetailUnit;
      this.quesModel = JSON.parse(JSON.stringify(question)); //深拷贝
      if (!this.quesModel.control) {
        this.quesModel.control = {};
      }
      this.quesModel.score = paperDetailUnit.score;
      //如果是套题下面的小题编辑 ( paperDetailUnit的类型是套题，question的类型不是套题)
      if (
        this.isNested(paperDetailUnit.questionType) &&
        question.questionType != paperDetailUnit.questionType
      ) {
        for (var i = 0; i < paperDetailUnit.question.subQuestions.length; i++) {
          if (
            paperDetailUnit.question.subQuestions[i].id == this.quesModel.id
          ) {
            this.quesModel.score = paperDetailUnit.subScoreList[i];
            this.quesModel.parentType = paperDetailUnit.questionType;
            this.quesModel.optionsSelected = paperDetailUnit.optionsSelected;
            this.quesModel.parentQuesParam = paperDetailUnit.question.quesParam;
            break;
          }
        }
      }

      if (isEmptyStr(this.quesModel.answerType)) {
        this.quesModel.answerType = "DIVERSIFIED_TEXT";
      }

      if (this.quesModel.questionType === "BOOL_ANSWER_QUESTION") {
        this.quesAnswer = this.quesModel.quesAnswer === "true" ? 1 : 0;
      } else if (this.quesModel.questionType === "TEXT_ANSWER_QUESTION") {
        const answer = JSON.parse(this.quesModel.quesAnswer);
        this.quesAnswer = answer[0];
      } else if (this.quesModel.questionType == "FILL_BLANK_QUESTION") {
        const answer = JSON.parse(this.quesModel.quesAnswer);
        this.quesAnswer = answer;
      } else {
        this.quesAnswer = null;
      }
      this.prevAnswerPointCount = this.getAnswerPointCount(
        this.quesModel.quesBody
      );

      this.assignAnswers(); //给singleRightAnswer或multipleRightAnswer赋值
      this.openQuesDialog();
    },
    //给singleRightAnswer和multipleRightAnswer赋值
    assignAnswers() {
      if (this.quesModel.quesOptions && this.quesModel.quesOptions.length > 0) {
        this.singleRightAnswer = "";
        this.multipleRightAnswer = [];
        for (let i = 0; i < this.quesModel.quesOptions.length; i++) {
          let option = this.quesModel.quesOptions[i];
          if (
            this.quesModel.questionType == "SINGLE_ANSWER_QUESTION" &&
            option.isCorrect == 1
          ) {
            this.singleRightAnswer = String.fromCharCode(65 + i);
          }
          if (
            this.quesModel.questionType == "MULTIPLE_ANSWER_QUESTION" &&
            option.isCorrect == 1
          ) {
            this.multipleRightAnswer.push(String.fromCharCode(65 + i));
          }
        }
      }
    },
    boolAnswerChange(val) {
      this.quesModel.quesAnswer = val ? "true" : "false";
    },
    textAnswerChange(val) {
      this.quesModel.quesAnswer = JSON.stringify([val]);
    },
    resetNumberAndSaveAnswerPoints(answer) {
      this.quesAnswer = answer.map((element, index) => {
        element.index = index + 1;
        return element;
      });
      this.quesModel.quesAnswer = JSON.stringify(this.quesAnswer);
    },
    updateAnswerPoint(index, value) {
      // console.log(index, this.question.answer[index]);
      this.quesAnswer[index] = { ...value };
      this.resetNumberAndSaveAnswerPoints(this.quesAnswer);
    },
    getAnswerPointCount(bodyJson) {
      let count = 0;
      bodyJson.sections.forEach((section) => {
        section.blocks.forEach((block) => {
          if (block.type === "cloze") count++;
        });
      });
      return count;
    },
    quesBodyChange(quesBodyJson) {
      this.quesModel.quesBody = quesBodyJson;

      if (this.quesModel.questionType == "FILL_BLANK_QUESTION") {
        let curPonitCount = this.getAnswerPointCount(quesBodyJson);
        if (curPonitCount === this.prevAnswerPointCount) return;
        this.prevAnswerPointCount = curPonitCount;

        let newAnswer = [];
        for (let i = 0; i < curPonitCount; i++) {
          newAnswer.push(this.quesAnswer[i] || { sections: [] });
        }

        this.resetNumberAndSaveAnswerPoints(newAnswer);
      }
    },
    //打开修改试题编辑框
    openQuesDialog() {
      this.quesDialog = true;
    },
    //关闭试题编辑框
    closeQuesDialog() {
      this.quesDialog = false;
      this.quesModel = {};
    },
    //删除属性
    handleClose(tag) {
      this.quesModel.quesProperties.splice(
        this.quesModel.quesProperties.indexOf(tag),
        1
      );
    },
    //查询一级属性
    searchFirst() {
      this.firstPropertyId = "";
      this.secondPropertyId = "";
      this.secondPropertyList = [];
      if (this.coursePropertyId) {
        for (let courseProperty of this.coursePropertyList) {
          if (courseProperty.id == this.coursePropertyId) {
            this.$http
              .get(QUESTION_API + "/property/first/" + courseProperty.id)
              .then((response) => {
                this.firstPropertyList = response.data;
              });
          }
        }
      }
    },
    //查询二级属性
    searchSecond() {
      this.secondPropertyId = "";
      if (this.firstPropertyId) {
        this.$http
          .get(QUESTION_API + "/property/second/" + this.firstPropertyId)
          .then((response) => {
            this.secondPropertyList = response.data;
          });
      }
    },
    //新增属性
    insertProperty() {
      if (!this.checkInsertPro()) {
        return false;
      }
      var quesProperty = {
        id: null,
        courseProperty: {},
        firstProperty: {},
        secondProperty: {},
      };
      if (
        this.quesModel.quesProperties == null ||
        this.quesModel.quesProperties.length == 0
      ) {
        this.quesModel.quesProperties = [];
      }
      for (let quesPro of this.quesModel.quesProperties) {
        if (quesPro.id == quesProperty.id) {
          this.$notify({
            message: "该属性已存在，请重新选择",
            type: "error",
          });
          return false;
        }
      }
      for (let courseProperty of this.coursePropertyList) {
        if (courseProperty.id == this.coursePropertyId) {
          quesProperty.courseProperty = courseProperty;
        }
      }
      //取到一级属性对象
      for (let property of this.firstPropertyList) {
        if (property.id == this.firstPropertyId) {
          quesProperty.firstProperty = property;
        }
      }
      //判断是否有二级属性
      if (
        this.secondPropertyList != undefined &&
        this.secondPropertyList.length > 0
      ) {
        if (!this.secondPropertyId) {
          this.$notify({
            message: "请选择二级属性",
            type: "error",
          });
          return false;
        }
      }
      //取到二级属性对象
      for (let property of this.secondPropertyList) {
        if (property.id == this.secondPropertyId) {
          quesProperty.secondProperty = property;
        }
      }
      this.quesModel.quesProperties.push(quesProperty);
      this.quesModel = Object.assign({}, this.quesModel);
      //清空下拉框
      this.coursePropertyId = "";
      this.firstPropertyId = "";
      this.secondPropertyId = "";
      this.firstPropertyList = [];
      this.secondPropertyList = [];
    },
    //新增属性验证
    checkInsertPro() {
      if (!this.coursePropertyId) {
        this.$notify({
          message: "请选择属性",
          type: "error",
        });
        return false;
      }
      if (!this.firstPropertyId) {
        this.$notify({
          message: "请选择一级属性",
          type: "error",
        });
        return false;
      }
      return true;
    },
    //删除选项
    removeQuesOption(option) {
      if (this.quesModel.quesOptions.length == 1) {
        this.$notify({
          message: "不能删除最后一个选项",
          type: "error",
        });
        return;
      }
      this.singleRightAnswer = "";
      this.multipleRightAnswer = [];
      let index = this.quesModel.quesOptions.indexOf(option);
      if (index !== -1) {
        this.quesModel.quesOptions.splice(index, 1);
      }
      if (this.quesModel.quesOptions.length > 0) {
        for (var i = 0; i < this.quesModel.quesOptions.length; i++) {
          var quesOption = this.quesModel.quesOptions[i];
          quesOption["number"] = i + 1;
          if (quesOption.isCorrect == 1) {
            var answerOrderNum = String.fromCharCode(65 + i);
            if (this.quesModel.questionType == "SINGLE_ANSWER_QUESTION") {
              this.singleRightAnswer = answerOrderNum;
            }
            if (this.quesModel.questionType == "MULTIPLE_ANSWER_QUESTION") {
              this.multipleRightAnswer.push(answerOrderNum);
            }
          }
        }
      }
    },
    //新增选项
    addQuesOption() {
      this.quesModel.quesOptions.push({
        number: "",
        optionBody: "",
        isCorrect: "",
      });
      for (var i = 0; i < this.quesModel.quesOptions.length; i++) {
        this.quesModel.quesOptions[i]["number"] = i + 1;
      }
    },
    savePaperDetailUnit() {
      //跟新难度值
      if (this.quesModel.difficultyDegree < 0.4) {
        this.quesModel.difficulty = "难";
      } else if (
        this.quesModel.difficultyDegree > 0.3 &&
        this.quesModel.difficultyDegree < 0.8
      ) {
        this.quesModel.difficulty = "中";
      } else {
        this.quesModel.difficulty = "易";
      }
      this.setRightAnswer();
      if (/^\d+(?=\.{0,1}\d+$|$)/.test(this.quesModel.score)) {
        console.log("正确");
      } else {
        this.$notify({
          message: "分数只能为正数",
          type: "error",
        });
        return;
      }
      if (this.enableAnswerPoint) {
        const pointCount = this.getAnswerPointCount(this.quesModel.quesBody);
        if (!pointCount) {
          this.$notify({
            message: "请插入答题点",
            type: "error",
          });
          return;
        }
      }

      if (this.paper.paperType == "GENERATE") {
        this.$confirm(
          "试题内容修改，会影响所有关联试卷，是否确定进行？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          this.submitPaperDetailUnit();
        });
      } else {
        this.submitPaperDetailUnit();
      }
    },
    submitPaperDetailUnit() {
      let paperDetailUnitExp = {
        id: this.editPaperDetailUnit.id,
        question: this.quesModel,
        score: this.quesModel.score,
      };
      if (
        (this.quesModel.questionType == "SINGLE_ANSWER_QUESTION" ||
          this.quesModel.questionType == "MULTIPLE_ANSWER_QUESTION") &&
        this.quesModel.quesOptions.length == 0
      ) {
        this.$confirm("无选项将删除该试题, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.dialogLoading = true;
          this.$http
            .delete(
              QUESTION_API +
                "/paper/deleteQuestion/" +
                this.editPaperDetailUnit.id +
                "/" +
                this.quesModel.id
            )
            .then((response) => {
              if (response.data.length > 0) {
                var deleteInfo =
                  "该试题被试卷：" +
                  response.data.join(" , ") +
                  "使用,不能删除";
                this.$notify({
                  message: deleteInfo,
                  type: "error",
                });
              } else {
                this.$notify({
                  message: "保存成功",
                  type: "success",
                });
              }
              this.dialogLoading = false;
            });
        });
      } else {
        this.dialogLoading = true;
        //校验音频重复
        let audiomap = new Map();
        let regex = new RegExp(
          '<a id="[^<>]+" name="([^<>]+\\.mp3)"></a>',
          "ig"
        );
        let ret = "";
        let quesBodyStr = paperDetailUnitExp.question.quesBody;
        if (quesBodyStr) {
          while ((ret = regex.exec(quesBodyStr))) {
            if (audiomap.get(ret[1])) {
              this.dialogLoading = false;
              this.$notify({
                type: "error",
                message: "题干中存在相同的音频文件",
              });
              return;
            } else {
              audiomap.set(ret[1], ret[1]);
            }
          }
        }
        let quesAnswerStr = paperDetailUnitExp.question.quesAnswer;
        if (quesAnswerStr) {
          while ((ret = regex.exec(quesAnswerStr))) {
            if (audiomap.get(ret[1])) {
              this.dialogLoading = false;
              this.$notify({
                type: "error",
                message: "答案中存在相同的音频文件",
              });
              return;
            } else {
              audiomap.set(ret[1], ret[1]);
            }
          }
        }
        let quesOptions = paperDetailUnitExp.question.quesOptions;
        if (quesOptions) {
          for (let i = 0; i < quesOptions.length; i++) {
            let quesOptionStr = quesOptions[i].optionBody;
            while ((ret = regex.exec(quesOptionStr))) {
              if (audiomap.get(ret[1])) {
                this.dialogLoading = false;
                this.$notify({
                  type: "error",
                  message: "选项中存在相同的音频文件",
                });
                return;
              } else {
                audiomap.set(ret[1], ret[1]);
              }
            }
          }
        }
        // paperDetailUnitExp.question.quesAnswer = this.answer;
        this.$http
          .put(QUESTION_API + "/paperDetailUnit", paperDetailUnitExp)
          .then(() => {
            this.$notify({
              message: "保存成功",
              type: "success",
            });
            this.dialogLoading = false;
            this.closeQuesDialog();
            this.initPaper();
          })
          .catch((err) => {
            this.dialogLoading = false;
            this.$notify({
              type: "error",
              message: err.response.data.desc,
            });
          });
      }
    },
    //在正确的option上设置isCorrect=1
    setRightAnswer() {
      if (
        !this.quesModel.quesOptions ||
        this.quesModel.quesOptions.length == 0
      ) {
        return false;
      }
      let quesAnswer = [];
      for (var i = 0; i < this.quesModel.quesOptions.length; i++) {
        var option = this.quesModel.quesOptions[i];
        var answerOrderNum = String.fromCharCode(65 + i);
        if (this.quesModel.questionType == "SINGLE_ANSWER_QUESTION") {
          option["isCorrect"] =
            answerOrderNum == this.singleRightAnswer ? 1 : 0;
        }
        if (this.quesModel.questionType == "MULTIPLE_ANSWER_QUESTION") {
          option["isCorrect"] =
            this.multipleRightAnswer.indexOf(answerOrderNum) > -1 ? 1 : 0;
        }
        if (option["isCorrect"]) quesAnswer.push(i + 1);
      }
      this.quesModel.quesAnswer = JSON.stringify(quesAnswer);
    },
    //删除试题
    deleteQues(paperDetailUnit) {
      let paperDetailUnitId = paperDetailUnit.id;
      if (this.paper.paperType == "GENERATE") {
        this.deleteQues01(paperDetailUnitId);
      } else {
        let questionId = paperDetailUnit.question.id;
        this.deleteQues02(questionId, paperDetailUnitId);
      }
    },
    deleteQues01(paperDetailUnitId) {
      this.$alert("您确定删除吗？", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.loading = true;
            this.$http
              .delete(QUESTION_API + "/paperDetailUnit/" + paperDetailUnitId)
              .then(() => {
                this.initPaper();
                this.reduplicateGroup = [];
                this.loading = true;
                this.$notify({
                  message: "删除成功",
                  type: "success",
                });
                this.loading = false;
              });
          }
        },
      });
    },
    deleteQues02(questionId, paperDetailUnitId) {
      this.$alert("您确定删除吗？", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.loading = true;
            this.$http
              .delete(
                QUESTION_API +
                  "/paper/deleteQuestion/" +
                  paperDetailUnitId +
                  "/" +
                  questionId
              )
              .then((response) => {
                if (response.data.length > 0) {
                  var deleteInfo =
                    "该试题被试卷：" +
                    response.data.join(" , ") +
                    "使用,不能删除";
                  this.$notify({
                    message: deleteInfo,
                    type: "error",
                  });
                } else {
                  this.initPaper();
                  this.reduplicateGroup = [];
                  this.loading = true;
                  this.$notify({
                    message: "保存成功",
                    type: "success",
                  });
                }
                this.loading = false;
              });
          }
        },
      });
    },
    exportPaperAnswer() {
      var key = this.user.key;
      var token = this.user.token;
      window.open(
        QUESTION_API +
          "/paper/answer/export/" +
          this.paperId +
          "?$key=" +
          key +
          "&$token=" +
          token
      );
    },
    getSubQuesEditId(paperDetailUnit, subQuestion) {
      return paperDetailUnit.question.id + "_" + subQuestion.subNumber;
    },
    //打开考试说明编辑框
    openEditExamPaperRemark() {
      if (this.paper.examRemark) {
        this.examRemark = this.paper.examRemark;
      } else {
        this.examRemark = "";
      }
      this.paperRemarkDialog = true;
    },
    //保存考试说明
    savePaperRemark() {
      this.paper.examRemark = this.examRemark;
      this.savePaper();
      this.paperRemarkDialog = false;
    },
    //关闭考试说明编辑框
    closPaperRemark() {
      this.examRemark = "";
      this.paperRemarkDialog = false;
    },
    //保存试卷
    savePaper() {
      this.loading = true;
      this.$http
        .put(QUESTION_API + "/paper", this.paper)
        .then(() => {
          this.$notify({
            message: "保存成功",
            type: "success",
          });
          this.loading = false;
          this.initPaper();
        })
        .catch((error) => {
          this.loading = false;
          this.$notify({
            type: "error",
            message: error.response.data.desc,
          });
        });
    },
    //删除试卷
    deletePaper(id) {
      this.$confirm("确认删除试卷吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http.delete(QUESTION_API + "/paper/" + id).then(
          () => {
            this.$notify({
              message: "删除成功",
              type: "success",
            });
            this.back();
          },
          (error) => {
            this.$notify({
              message: error.response.data.desc,
              type: "error",
              title: "错误",
            });
            this.loading = false;
          }
        );
      });
    },
    //打开上传音频弹框
    openDialog() {
      this.checkResult = false;
      this.isUpload = true;
      if (document.getElementById("radioFile")) {
        document.getElementById("radioFile").value = "";
      }
      this.audioFileName = "";
      this.dialogRadioFile = true;
      this.fileList = [];
    },
    //关闭音频弹框
    closeAudioDialog() {
      this.dialogRadioFile = this.uploadAudioLoading;
    },
    //返回
    back() {
      if (sessionStorage.getItem("question_back") == "true") {
        this.$router.push({
          path: "/questions/" + this.parentView + "/0",
        });
      } else {
        this.$router.push({
          path: "/questions/" + this.parentView + "/1",
        });
      }
    },
    paperDetailShow(paperDetail) {
      if (this.reduplicateGroup.length == 0) {
        return true;
      }
      let paperDetailUnits = paperDetail.paperDetailUnits;
      for (let i = 0, imax = paperDetailUnits.length; i < imax; i++) {
        for (var j = 0, jmax = this.reduplicateGroup.length; j < jmax; j++) {
          if (paperDetailUnits[i].id == this.reduplicateGroup[j]) {
            return true;
          }
        }
      }
      return false;
    },
    //上传文件检查
    checkFile() {
      this.fileNameList = [];
      //读取选取的文件夹里面的文件
      this.checkResult = true;
      var files = document.getElementById("radioFile").files;
      if (files.length == 0) {
        this.message = "请选择音频文件夹!";
        return;
      }
      var size = 0;
      var isGo = false;
      //取到所有文件的文件名
      for (var i = 0; i < files.length; i++) {
        this.fileNameList.push(files[i].name);
        if (files[i].size > 5 * 1024 * 1024) {
          isGo = true;
          break;
        }
        size = files[i].size + size;
      }
      if (isGo) {
        this.message = "上传单个文件不能超过5M";
        this.isUpload = true;
      }
      if (size > 50 * 1024 * 1024) {
        this.message = "上传文件总和不能超过50M";
        this.isUpload = true;
        return;
      }
      this.$http
        .post(
          QUESTION_API + "/checkRadioFile/" + this.paperId,
          this.fileNameList
        )
        .then((response) => {
          console.log("response:", response);
          this.message = response.data.errorMsg;
          if (this.message == "OK") {
            this.message = "OK!";
            this.isUpload = false;
          } else {
            this.isUpload = true;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 音频文件
    selectAudioFile() {
      document.getElementById("radioFile").click();
    },
    audioFileChange() {
      let fileList = document.getElementById("radioFile").files;
      if (fileList.length == 0) {
        this.audioFileName = "";
      } else {
        let names = [];
        for (var i = 0; i < fileList.length; i++) {
          var file = fileList[i];
          names.push(file.name);
        }
        this.audioFileName = names.join();
      }
    },
    uploadAudioFile() {
      let param = new FormData();
      var fileList = document.getElementById("radioFile").files;
      //循环添加到formData中
      for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        param.append("files", file, file.name);
      }
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      this.$http
        .post(QUESTION_API + "/uploadRadio/" + this.paperId, param, config)
        .then(() => {
          this.dialogRadioFile = false;
          this.uploadAudioLoading = false;
          this.checkResult = false;
          this.isUpload = true;
          document.getElementById("radioFile").value = "";
          this.initPaper();
        })
        .catch((error) => {
          this.message = error.response.data.desc;
          this.uploadAudioLoading = false;
        });
    },
  },
};
</script>