<template>
  <div ref="content" class="content-box">
    <back-box>
      <template slot="title">
        <span>{{ "创建答题卡" }}</span>
      </template>
    </back-box>
    <div class="content">
      <el-steps
        :active="step"
        finish-status="success"
        simple
        style="margin: 20px 0"
      >
        <el-step title="基础信息" icon="el-icon-edit"></el-step>
        <el-step title="题目编辑" icon="el-icon-tickets"></el-step>
        <el-step title="设置答案" icon="el-icon-edit-outline"></el-step>
      </el-steps>
      <div v-show="step == 0">
        <el-form
          ref="forms"
          :model="form"
          :rules="formRules"
          label-width="140px"
        >
          <el-form-item label="答题卡名称：" prop="title">
            <el-input
              class="sel2"
              type="text"
              placeholder="请输入答题卡名称"
              v-model.trim="form.title"
              maxlength="30"
              size="45"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item label="测验类型：">
            <el-select v-model="form.tagId" placeholder="选择测验类型">
              <el-option label="--" value=""> </el-option>
              <el-option
                v-for="item in answerTypeList"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"
                >{{ item.typeName }}</el-option
              >
            </el-select>
            <el-button
              class="ml-20"
              type="primary"
              round
              circle
              icon="el-icon-edit"
              @click="openTagDia"
            ></el-button>
          </el-form-item>
          <el-form-item
            v-if="role != 'ROLE_PERSONAL'"
            label="年级："
            prop="gradeName"
          >
            <el-select
              class="sel"
              v-model="form.gradeName"
              placeholder=""
              @change="changeGrade"
            >
              <el-option
                v-for="item in gradeList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="科目：" prop="subjectName">
            <el-select class="sel" v-model="form.subjectName" placeholder="">
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >{{ item.label }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考试时长：">
            <el-input-number
              size="medium"
              :min="1"
              :max="140"
              :step-strictly="true"
              :step="1"
              v-model="form.examsDuration"
              label="考试时长"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            v-if="role != 'ROLE_PERSONAL'"
            label="分享范围："
            prop="sharingType"
          >
            <el-radio-group v-model="form.sharingType">
              <el-radio :label="0">任课班级分享</el-radio>
              <el-radio :label="1">全年级分享</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="btn-box">
          <el-button type="danger" plain round @click="linkBack"
            >取消</el-button
          >
          <el-button type="primary" round @click="setStep1">下一步</el-button>
        </div>
        <el-dialog :close-on-click-modal="false"
          title="设置测验类型"
          :visible.sync="dialogVisible"
          width="500px"
        >
          <div class="dia-content">
            <p class="add-type" v-for="item in tagList" :key="item.id">
              <el-row :gutter="10">
                <el-col :span="18"
                  ><el-input
                    v-model="item.typeName"
                    :maxlength="10"
                    placeholder="请输入答题卡类型名称"
                  ></el-input
                ></el-col>
                <el-col :span="6">
                  <el-tooltip effect="dark" content="保存" placement="top">
                    <el-button
                      class="js-set"
                      type="primary"
                      size="small"
                      round
                      circle
                      icon="el-icon-check"
                      @click="editTypeName(item)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip effect="dark" content="删除" placement="right">
                    <el-popconfirm
                      title="确定删除这道大题吗？"
                      @confirm="removeTypeName(item)"
                    >
                      <el-button
                        class="js-set"
                        type="danger"
                        size="small"
                        round
                        circle
                        icon="el-icon-delete"
                        slot="reference"
                      ></el-button>
                    </el-popconfirm>
                  </el-tooltip>
                </el-col>
              </el-row>
            </p>
            <p class="add-type">
              <el-row :gutter="10">
                <el-col :span="18">
                  <el-input
                    type="text"
                    placeholder="请输入答题卡类型名称"
                    v-model.trim="answerTypeName"
                    :maxlength="10"
                  >
                  </el-input>
                </el-col>
                <el-col :span="6">
                  <el-tooltip effect="dark" content="添加" placement="right">
                    <el-button
                      class="js-set"
                      type="primary"
                      size="small"
                      round
                      circle
                      icon="el-icon-plus"
                      @click="addPaperType"
                    ></el-button>
                  </el-tooltip>
                </el-col>
              </el-row>
            </p>
          </div>
          <div class="" slot="footer">
            <el-button @click="dialogVisible = false">关 闭</el-button>
          </div>
        </el-dialog>
      </div>
      <div v-show="step == 1">
        <div
          class="question-box"
          v-for="(question, index) in form.questionList"
          :key="index"
        >
          <p class="question-title">
            <el-tooltip
              effect="dark"
              :content="question.show ? '收起' : '展开'"
              placement="left"
            >
              <i
                class="el-icon-caret-right"
                :class="question.show ? 'active' : ''"
                @click="question.show = !question.show"
              ></i>
            </el-tooltip>
            <span>{{ setBigNum(index) }}、</span>
            <el-input
              class="ipt"
              v-model.trim="question.questionTitle"
              maxlength="30"
              placeholder="填写大题名称"
            ></el-input>
            <el-popconfirm
              title="确定删除这道大题吗？"
              @confirm="form.questionList.splice(index, 1)"
            >
              <el-button
                slot="reference"
                class="delete"
                type="danger"
                size="mini"
                circle
                icon="el-icon-delete"
              ></el-button>
            </el-popconfirm>
            <span class="m20">共：{{ question.subQuestions.length }}题</span>
            <span>共：{{ setScore(question) }}分</span>
          </p>
          <transition name="el-zoom-in-top">
            <ul v-show="question.show" class="questions-ul">
              <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">选项设置</div>
                <div class="qs-set">操作</div>
              </li>
              <li
                class="sub-questions"
                v-for="(subQuestions, indexs) in question.subQuestions"
                :key="indexs"
              >
                <div class="qs-num">{{ setNum(index, indexs) }}</div>
                <div class="qs-type">
                  <el-select
                    v-model="subQuestions.questionType"
                    placeholder="选择题目类型"
                    @change="changeSubQuestions($event, subQuestions)"
                  >
                    <el-option label="单选题" :value="2"></el-option>
                    <el-option label="多选题" :value="3"></el-option>
                    <el-option label="判断题" :value="4"></el-option>
                    <el-option label="主观题" :value="5"></el-option>
                  </el-select>
                </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">
                  <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">
                    <span
                      class="answer-s"
                      v-for="option in subQuestions.answerOptions.split(',')"
                      :class="
                        subQuestions.correctAnswer?.includes(option)
                          ? 'active'
                          : ''
                      "
                      :key="option"
                      @click="changAnswer(subQuestions, option)"
                      >{{ option }}</span
                    >
                  </p>
                  <p v-if="subQuestions.questionType == 2" class="answer-box">
                    <span
                      class="answer-s"
                      v-for="option in subQuestions.answerOptions.split(',')"
                      :class="
                        subQuestions.correctAnswer == option ? 'active' : ''
                      "
                      :key="option"
                      @click="subQuestions.correctAnswer = option"
                      >{{ option }}</span
                    >
                  </p>
                  <p
                    v-if="
                      subQuestions.questionType == 3 ||
                      subQuestions.questionType == 2
                    "
                    class="answer-box answer-box2"
                  >
                    <el-button
                      size="mini"
                      type="primary"
                      icon="el-icon-plus"
                      circle
                      @click="addOptions(subQuestions)"
                    ></el-button>
                    <el-button
                      size="mini"
                      type="primary"
                      icon="el-icon-minus"
                      round
                      circle
                      @click="removeOptions(subQuestions)"
                    ></el-button>
                  </p>
                </div>
                <div class="qs-set">
                  <el-popconfirm
                    title="确定删除这道题吗？"
                    @confirm="delTabData(indexs, index)"
                  >
                    <el-button
                      slot="reference"
                      class="delete"
                      type="danger"
                      size="mini"
                      circle
                      icon="el-icon-delete"
                    ></el-button>
                  </el-popconfirm>
                </div>
              </li>
              <li class="sub-questions">
                <div class="qs-num">添加</div>
                <div class="qs-type">
                  <el-select
                    v-model="addSubQuestionsType"
                    placeholder="选择题目类型"
                    @change="changeAddSubQuestions($event, question)"
                  >
                    <el-option label="单选题" :value="2"></el-option>
                    <el-option label="多选题" :value="3"></el-option>
                    <el-option label="判断题" :value="4"></el-option>
                    <el-option label="主观题" :value="5"></el-option>
                  </el-select>
                </div>
                <div class="qs-score"></div>
                <div class="qs-partScore"></div>
                <div class="qs-options"></div>
                <div class="qs-set"></div>
              </li>
            </ul>
          </transition>
        </div>
        <div class="add-box">
          <p class="add-question" @click="openQuestion">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              circle
            ></el-button>
            <span class="s1">添加大题</span>
          </p>
        </div>
        <div class="btn-box">
          <el-button type="danger" plain round @click="linkBack"
            >取消</el-button
          >
          <el-button round @click="step = 0">上一步</el-button>
          <el-button
            :type="form.questionList.length == 0 ? 'info' : 'primary'"
            round
            @click="setStep2"
            >下一步</el-button
          >
        </div>
        <el-dialog :close-on-click-modal="false"
          title="添加大题"
          :visible.sync="addQuestionVisible"
          width="600px"
        >
          <div class="dia-content">
            <el-form
              ref="form"
              :model="questionForm"
              :rules="questionFormRules"
              label-width="100px"
            >
              <el-form-item label="标题：">
                <el-col :span="20">
                  <el-input
                    v-model.trim="questionForm.questionTitle"
                    maxlength="30"
                    placeholder="输入大题名称"
                  ></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="选择题型：">
                <el-select
                  v-model="questionForm.questionType"
                  placeholder=""
                  @change="setQuestionForm"
                >
                  <el-option
                    v-for="item in questionOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                  <el-option label="混合题" :value="6"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="题数：">
                <el-input-number
                  v-model="questionForm.number"
                  @change="changeQesNum"
                  :min="1"
                  :max="100"
                  :step-strictly="true"
                  :step="1"
                  label="label"
                ></el-input-number>
              </el-form-item>
              <el-form-item
                label="选项个数："
                v-show="
                  questionForm.questionType != 4 &&
                  questionForm.questionType != 5
                "
              >
                <el-input-number
                  v-model="questionForm.selectNum"
                  :min="3"
                  :max="10"
                  :step-strictly="true"
                  :step="1"
                  label="label"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="单题分数：">
                <el-input-number
                  v-model="questionForm.score"
                  :min="1"
                  :max="200"
                  :precision="2"
                  :step="1"
                  label="label"
                ></el-input-number>
              </el-form-item>
              <el-form-item
                label="漏选得分："
                v-if="questionForm.questionType == 3"
              >
                <el-input-number
                  v-model="questionForm.partScore"
                  :min="0"
                  :max="questionForm.score"
                  :precision="2"
                  :step="0.5"
                  label="label"
                ></el-input-number>
              </el-form-item>
              <el-form-item
                label="设置答案："
                v-show="
                  questionForm.questionType != 5 &&
                  questionForm.questionType != 6
                "
              >
                <div class="qs-options">
                  <p class="ipt">
                    <el-input
                      v-if="
                        questionForm.questionType == 2 ||
                        questionForm.questionType == 3 ||
                        questionForm.questionType == 6
                      "
                      ref="formAnsIpt2"
                      v-model="questionForm.answerList"
                      @keydown.native="
                        keydownAnswer($event, questionForm.questionType, 1)
                      "
                      @input="
                        setAllAnswer($event, questionForm.questionType, 1)
                      "
                    ></el-input>
                    <el-input
                      v-if="questionForm.questionType == 4"
                      v-model="questionForm.answerList"
                      readonly=""
                    ></el-input>
                  </p>
                  <p class="answer-box">
                    <template v-if="questionForm.questionType == 4">
                      <span
                        class="answer-s active"
                        @click="
                          questionForm.answerList.length < questionForm.number
                            ? (questionForm.answerList += '✓')
                            : ''
                        "
                        >✓</span
                      >
                      <span
                        class="answer-s active"
                        @click="
                          questionForm.answerList.length < questionForm.number
                            ? (questionForm.answerList += '✗')
                            : ''
                        "
                        >✗</span
                      >
                    </template>
                    <template v-if="questionForm.questionType == 3">
                      <template v-for="(option, opIdx) in rightOptions">
                        <span
                          v-if="opIdx < questionForm.selectNum"
                          class="answer-s active"
                          :key="option"
                          @click="setMultiple(questionForm, option, 1)"
                          >{{ option }}</span
                        >
                      </template>
                      <span
                        class="answer-s active"
                        @click="setMultiple(questionForm, ',', 1)"
                        >,</span
                      >
                    </template>
                    <template
                      v-if="
                        questionForm.questionType == 2 ||
                        questionForm.questionType == 6
                      "
                    >
                      <template v-for="(option, opIdx) in rightOptions">
                        <span
                          v-if="opIdx < questionForm.selectNum"
                          class="answer-s active"
                          :key="option"
                          @click="
                            questionForm.answerList.length < questionForm.number
                              ? (questionForm.answerList += option)
                              : ''
                          "
                          >{{ option }}</span
                        >
                      </template>
                    </template>
                    <span
                      class="answer-s delButton"
                      @click="
                        questionForm.answerList = questionForm.answerList.slice(
                          0,
                          -1
                        )
                      "
                      >x</span
                    >
                    <span
                      class="answer-s ac"
                      @click="questionForm.answerList = ''"
                      >ac</span
                    >
                  </p>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="dialog-footer" slot="footer">
            <el-button type="primary" @click="addQuestion">确 定</el-button>
            <el-button @click="addQuestionVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
      <div v-show="step == 2">
        <div class="answer-title">
          <p class="name">{{ form.title }}</p>
          <p class="totals">卷面总分：{{ allScore }}分</p>
        </div>
        <div
          class="question-box"
          v-for="(question, index) in form.questionList"
          :key="index"
        >
          <p class="question-title">
            <span>{{ setBigNum(index) }}、</span>
            <span class="title-txt">{{ question.questionTitle }}</span>
            <span class="m20">共：{{ setNums(question.subQuestions) }}题</span>
            <span>共：{{ setScore(question) }} 分</span>
          </p>
          <ul class="questions-ul">
            <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>
            </li>
            <li
              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">
                  {{ setNum(index, indexs, subQuestions) }}
                </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"
                    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">
                    <span
                      class="answer-s"
                      v-for="option in subQuestions.answerOptions.split(',')"
                      :class="
                        subQuestions.correctAnswer?.includes(option)
                          ? 'active'
                          : ''
                      "
                      :key="option"
                      @click="changAnswer(subQuestions, option)"
                      >{{ option }}</span
                    >
                  </p>
                  <p v-if="subQuestions.questionType == 2" class="answer-box">
                    <span
                      class="answer-s"
                      v-for="option in subQuestions.answerOptions.split(',')"
                      :class="
                        subQuestions.correctAnswer == option ? 'active' : ''
                      "
                      :key="option"
                      @click="subQuestions.correctAnswer = option"
                      >{{ option }}</span
                    >
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <el-dialog :close-on-click-modal="false"
          title="批量设置答案"
          :visible.sync="diaSetAns"
          width="400"
          :modal-append-to-body="false"
        >
          <div class="qs-options">
            <p class="dia-tips">
              请点击选项按钮设置答案,多选题题目之间用“,”隔开，若添加5道题：“AC,AD,BD,AC,CD”
            </p>
            <p>{{ setSubPro(formAns.qusType) }}：</p>
            <p class="ipt">
              <el-input
                v-if="formAns.qusType == 2 || formAns.qusType == 3"
                ref="formAnsIpt"
                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, 2)"
                  >{{ option }}</span
                >
                <span
                  class="answer-s active"
                  @click="setMultiple(formAns, ',', 2)"
                  >,</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>
        <div class="btn-box">
          <el-button type="danger" plain round @click="linkBack"
            >取消</el-button
          >
          <el-button round @click="backStep1">上一步</el-button>
          <el-button type="primary" round @click="save">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { deepClone, checkAnswer } from "utils";
const questionForm = {
  questionTitle: "",
  questionType: 2,
  number: 10,
  selectNum: 4,
  score: 1,
  partScore: 0,
  answerList: "",
};
const subQuesOptions = {
  questionType: 2,
  score: 1,
  partScore: 0,
  selectNum: 4,
  answerOptions: "A,B,C,D",
  correctAnswer: "",
};
export default {
  computed: {
    allScore: function () {
      let score = 0;
      this.form.questionList.map((item) => {
        score += item.subQuestions.reduce((a, b) => {
          return a + Number(b.score ? b.score : 0);
        }, 0);
      }, 0);
      return Number(score).toFixed(2);
    },
  },
  watch: {
    step: function () {
      this.$nextTick(function () {
        this.$refs.content.scrollTop = 0;
      });
    },
  },
  data() {
    return {
      role: "",
      step: 0, //步骤
      gradeList: [], //年级
      subjectList: [], //科目
      answerTypeList: [], //测验类型
      answerTypeName: "", //测验类型名称
      form: {
        //答题卡详情
        title: "",
        tagId: "",
        subjectName: "",
        examsDuration: 90,
        questionList: [],
        gradeName: "",
        sharingType: 0,
      },
      formRules: {
        //答题卡验证
        title: [
          { required: true, message: "请输入答题卡名称", trigger: "blur" },
          {
            min: 1,
            max: 30,
            message: "长度在 1 到 30 个字符",
            trigger: "blur",
          },
        ],
        subjectName: [
          { required: true, message: "请选择科目", trigger: "blur" },
        ],
        examsDuration: [
          { required: true, message: "请设置考试时长", trigger: "blur" },
        ],
      },
      tagList: [],
      diaSetAns: false, //答案开关
      formAns: {
        listIndex: 0, //大题位置
        endIndex: 0, //相同题目最后一位题目的questionIndex
        index: 0, //相同题目最后一位题目的位置
        qusType: "", //题目类型
        subNum: 0, //数量
        answerOptions: [], //答案选项
        answerList: "", //答案列表-字符串
      },
      type: 1, //1-创建，2-复制答题卡
      dialogVisible: false, //测验类型设置弹窗
      addQuestionVisible: false, //添加大题弹窗
      questionForm: { ...questionForm },
      questionFormRules: {
        questionTitle: [
          { required: true, message: "请输入大题名称", trigger: "blur" },
          {
            min: 1,
            max: 30,
            message: "长度在 1 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
      questionOptions: [
        { label: "单选题", value: 2 },
        { label: "多选题", value: 3 },
        { label: "判断题", value: 4 },
        { label: "主观题", value: 5 },
      ],
      rightOptions: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      addSubQuestionsType: "",
    };
  },
  async created() {
    this.type = this.$route.query.type ? this.$route.query.type : 1;
    this.role =
      this.$store.getters.info.showRole ||
      this.$store.getters.info.permissions[0].role;
    if (this.role != "ROLE_PERSONAL") {
      this.formRules.gradeName = [
        { required: true, message: "请选择年级", trigger: "blur" },
      ];
      await this._GradeList();
    }
    await this._QuerySubjectList(this.gradeList[0]);
    await this._TypeList();
    if (this.type == 2) {
      this._QueryDetail();
    }
  },
  methods: {
  
    linkBack() {
      this.$confirm(
        (this.type == 2 ? "修改复制的" : "组建的") +
          "答题卡未保存，确认退出吗？",
        "提示",
        {
          confirmButtonText: "取消",
          cancelButtonText: "确定",
          confirmButtonClass: "el-button--danger1",
          cancelButtonClass: "el-button--primary",
          showClose: false,
          roundButton: true,
          center: true,
          type: "warning",
        }
      )
        .then(() => {})
        .catch(() => {
          this.$router.push({
            path: "/examinationPaper",
          });
        });
    },
    setSubPro(type) {
      let tit;
      switch (type) {
        case 2:
          tit = "单选题";
          break;
        case 3:
          tit = "多选题";
          break;
        case 4:
          tit = "判断题";
          break;
        case 5:
          tit = "主观题";
          break;
      }
      return tit;
    },
    setNum(index, indexs, sub) {
      let lengths = 0;
      let subIndex = 0;
      for (let i = 0; i < index; i++) {
        let subArr = this.form.questionList[i].subQuestions.filter((item) => {
          return !!item.questionType;
        });
        lengths += subArr.length;
      }

      for (let i = 0; i < indexs; i++) {
        if (!!this.form.questionList[index].subQuestions[i].questionType) {
          subIndex += 1;
        }
      }
      return lengths + subIndex + 1;
    },
    setNums(ques) {
      let lengths = 0;
      let subArr = ques.filter((item) => {
        return !!item.questionType;
      });
      lengths = subArr.length;
      return lengths;
    },
    setBigNum(num) {
      let txt = "";
      let bigNum = [
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十",
        "十一",
        "十二",
        "十三",
        "十四",
        "十五",
        "十六",
        "十七",
        "十八",
        "十九",
        "二十",
      ];
      txt = bigNum[num];

      return txt;
    },
    //切换题型清空答案
    setQuestionForm(val) {
      this.questionForm.answerList = "";
    },
    //减少题数设置答案
    changeQesNum(val) {
      if (
        this.questionForm.questionType == 2 ||
        this.questionForm.questionType == 4
      ) {
        this.questionForm.answerList = this.questionForm.answerList.substring(
          0,
          val
        );
      } else {
        this.questionForm.answerList = this.questionForm.answerList
          .split(",")
          .splice(0, val)
          .join(",");
      }
    },
    //初始化要修改的答案
    setFormAns(indexs, index) {
      this.formAns = { ...this.form.questionList[index].subQuestions[indexs] };
      this.formAns.listIndex = index;
      let startIndex = this.formAns.index + 1 - this.formAns.subNum; //批量设置大难开始位置
      this.formAns.answerList = [];
      let answerList = "";
      this.form.questionList[index].subQuestions.map((item, subIdx) => {
        if (subIdx >= startIndex) {
          answerList += this.setAnswer(item.questionType, item.correctAnswer);
          if (subIdx != indexs) {
            if (!!item.qusType) {
              answerList = "";
            }
          } else {
            if (item.qusType == 3) {
              answerList = answerList.slice(0, -1);
            }
            this.formAns.answerList = answerList;
          }
        }
      });

      this.diaSetAns = true;
    },
    insertTxtAndSetcursor(element, answerList, str) {
      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, type) {
      let elements =
        type == 1
          ? this.$refs["formAnsIpt2"].$el.children[0]
          : this.$refs["formAnsIpt"].$el.children[0];
      let resault = this.insertTxtAndSetcursor(
        elements,
        obj.answerList || "",
        answer
      );
      obj.answerList = resault.text;
      let str = obj.answerList;
      let str2;
      if (!!obj.answerOptions) {
        str2 = checkAnswer(
          str,
          3,
          obj.answerOptions.split(",").length,
          obj.subNum
        );
      } else {
        str2 = checkAnswer(str, 3, obj.selectNum, obj.number);
      }
      obj.answerList = str2;
      elements.focus();
      elements.selectionStart = resault.startPos;
    },
    //批量修改答案
    saveFormAns() {
      let EndIndex;
      let subNum = this.formAns.subNum - 1;
      this.form.questionList[this.formAns.listIndex].subQuestions.some(
        (item, index) => {
          if (this.formAns.endIndex == item.questionIndex) {
            EndIndex = index;
            return;
          }
        }
      );

      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
              : "";
        }
        this.form.questionList[this.formAns.listIndex].subQuestions[
          EndIndex - i
        ].correctAnswer = correctAnswer;
      }
      this.diaSetAns = false;
    },
    keydownAnswer(event, type, isAddBig) {
      let answerA = "ABCDEFGHIJ";
      let answer_a = "abcdefghij";
      if (isAddBig) {
        answerA = answerA.substring(0, this.questionForm.selectNum);
        answer_a = answer_a.substring(0, this.questionForm.selectNum);
      } else {
        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, isAddBig) {
      if (isAddBig) {
        let str = this.questionForm.answerList;
        let str2 = checkAnswer(
          str,
          type,
          this.questionForm.selectNum,
          this.questionForm.number
        );
        this.questionForm.answerList = str2;
      } else {
        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;
    },
    backStep1() {
      this.formatQuestionList();
      this.step = 1;
    },
    setStep1() {
      if (this.subjectList.length == 0) {
        this.$message.warning("暂无绑定年级信息，请先联系管理员设置。");
        return;
      }
      this.$refs["forms"].validate((valid) => {
        // 验证通过：保存
        if (valid) {
          this.step = 1;
        } else {
          this.$message.error("数据有误，请检查！");
          return false;
        }
      });
    },
    setStep2() {
      if (!this.form.questionList.length) {
        this.$message.warning("请添加题目！");
        return;
      }
      //添加题目ID、序号
      this.form.questionList.map((item, index) => {
        item.questionType = 0;
        item.subQuestions.map((items, indexs) => {
          items.questionId = this.setNum(index, indexs);
          items.questionIndex = this.setNum(index, indexs);
        });
      });
      //整理问题
      this.form.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
              // );
              types[addndex].answerList = "";
              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 = "";
            }
          }
        });
        for (let i = 0; i < types.length; i++) {
          if (types[i].subNum >= 5) {
            item.subQuestions.splice(
              types[i].index + i + 1,
              0,
              deepClone(types[i])
            );
          }
        }
      });
      this.step = 2;
      return;
    },
    //删除批量操作数据
    formatQuestionList() {
      for (let i = 0; i < this.form.questionList.length; i++) {
        for (
          let j = 0;
          j < this.form.questionList[i].subQuestions.length;
          j++
        ) {
          if (this.form.questionList[i].subQuestions[j].qusType) {
            this.form.questionList[i].subQuestions.splice(j, 1);
          }
        }
      }
    },
    openQuestion() {
      this.questionForm = { ...questionForm };
      this.addQuestionVisible = true;
    },
    //添加大题
    addQuestion() {
      let subQuestions = [];
      let questionsOptions = {
        ...subQuesOptions,
        selectNum: this.questionForm.selectNum,
        score: this.questionForm.score,
        partScore: this.questionForm.partScore,
        questionType:
          this.questionForm.questionType == 6
            ? 2
            : this.questionForm.questionType,
      };
      switch (questionsOptions.questionType) {
        case 2:
          questionsOptions.answerOptions = this.rightOptions
            .slice(0, questionsOptions.selectNum)
            .join(",");
          break;
        case 3:
          questionsOptions.answerOptions = this.rightOptions
            .slice(0, questionsOptions.selectNum)
            .join(",");
          break;
        case 4:
          questionsOptions.selectNum = 0;
          questionsOptions.answerOptions = "1,2";
          break;
        case 5:
          questionsOptions.selectNum = 0;
          break;
      }
      for (let i = 0; i < this.questionForm.number; i++) {
        let answer = "";
        if (questionsOptions.questionType == 4) {
          answer =
            this.questionForm.answerList[i] == "✓"
              ? 1
              : this.questionForm.answerList[i] == "✗"
              ? 2
              : "";
        } else if (questionsOptions.questionType == 3) {
          answer = this.questionForm.answerList.split(",")[i] || "";
        } else if (questionsOptions.questionType == 2) {
          answer = this.questionForm.answerList[i] || "";
        }
        questionsOptions.correctAnswer = answer;
        subQuestions.push({ ...questionsOptions });
      }
      this.form.questionList.push({
        questionTitle: this.questionForm.questionTitle,
        number: this.questionForm.number,
        source: 10,
        subQuestions: [...subQuestions],
        show: false,
      });
      this.addQuestionVisible = false;
    },
    //删除小题
    delTabData(subIndex, index) {
      this.form.questionList[index].subQuestions.splice(subIndex, 1);
    },
    setScore(question) {
      let score = question.subQuestions.reduce((a, b) => {
        return a + (b.score ? b.score : 0);
      }, 0);
      return Number(score).toFixed(2);
    },
    changeAddSubQuestions(val, question) {
      if (val) {
        let questionsOptions = {
          ...subQuesOptions,
          questionType: val,
        };
        switch (questionsOptions.questionType) {
          case 2:
            questionsOptions.answerOptions = this.rightOptions
              .slice(0, questionsOptions.selectNum)
              .join(",");
            break;
          case 3:
            questionsOptions.answerOptions = this.rightOptions
              .slice(0, questionsOptions.selectNum)
              .join(",");
            questionsOptions.partScore = 0;
            break;
          case 4:
            questionsOptions.selectNum = 0;
            questionsOptions.answerOptions = "1,2";
            break;
          case 5:
            questionsOptions.selectNum = 0;
            break;
        }
        question.subQuestions.push(questionsOptions);
        this.addSubQuestionsType = "";
      }
    },
    //切换多题型-小题题型
    changeSubQuestions(val, subQuestions) {
      const that = this;
      subQuestions.score = 1;
      subQuestions.partScore = 0;
      subQuestions.correctAnswer = "";
      subQuestions.selectNum = 4;
      switch (val) {
        case 2:
          subQuestions.answerOptions = that.rightOptions
            .slice(0, subQuestions.selectNum)
            .join(",");
          break;
        case 3:
          subQuestions.answerOptions = that.rightOptions
            .slice(0, subQuestions.selectNum)
            .join(",");
          break;
        case 4:
          subQuestions.selectNum = 0;
          subQuestions.answerOptions = "1,2";
          break;
        case 5:
          subQuestions.selectNum = 0;
          break;
      }
    },
    //添加选项
    addOptions(subQuestions) {
      let length = subQuestions.answerOptions.split(",").length;
      if (length > 9) return;
      subQuestions.selectNum = length + 1;
      subQuestions.answerOptions = this.rightOptions
        .slice(0, subQuestions.selectNum)
        .join(",");
    },
    //删除选项
    removeOptions(subQuestions) {
      let length = subQuestions.answerOptions.split(",").length;
      if (length < 3) return;
      subQuestions.selectNum = length - 1;
      subQuestions.answerOptions = this.rightOptions
        .slice(0, subQuestions.selectNum)
        .join(",");
      subQuestions.correctAnswer = subQuestions.correctAnswer.slice(
        0,
        subQuestions.selectNum
      );
    },
    //设置多选答案
    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("");
      }
    },
    openTagDia() {
      this.tagList = deepClone(this.answerTypeList);
      this.dialogVisible = true;
    },
    async editTypeName(obj) {
      let isRepeat = false;
      this.answerTypeList.map((item) => {
        if (item.typeName == obj.typeName) {
          isRepeat = true;
        }
      });
      if (isRepeat) {
        this.$message.error("类型已存在请重新填写！");
        return;
      }
      //修改测验类型
      let editPaperType =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pModifyPaperType
          : this.$request.editPaperType;
      const { data, status, info } = await editPaperType({
        tagId: obj.id,
        tag: obj.typeName,
      });
      if (status == 0) {
        await this._TypeList();
        this.tagList = deepClone(this.answerTypeList);
        this.$message.success("修改成功");
      } else {
        this.$message.error(info);
      }
    },
    async removeTypeName(obj) {
      //删除测验类型
      let delPaperType =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pDelPaperType
          : this.$request.delPaperType;
      const { data, status, info } = await delPaperType({
        tagId: obj.id,
      });
      if (status == 0) {
        await this._TypeList();
        this.tagList = deepClone(this.answerTypeList);
        this.$message.success("删除成功");
      } else {
        this.$message.error(info);
      }
    },
    async addPaperType() {
      //保存测验类型
      if (!this.answerTypeName) {
        this.$message.error("请填写测验名称！");
        return;
      }
      let isRepeat = false;
      this.answerTypeList.map((item) => {
        if (item.typeName == this.answerTypeName) {
          isRepeat = true;
        }
      });
      if (isRepeat) {
        this.$message.error("类型已存在请重新填写！");
        return;
      }
      //添加测验类型
      let addPaperType =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pAddPaperType
          : this.$request.addPaperType;
      const { data, status, info } = await addPaperType({
        tag: this.answerTypeName,
      });
      if (status == 0) {
        await this._TypeList();
        this.tagList = deepClone(this.answerTypeList);
        this.form.tagId = data || "";
        this.answerTypeName = "";
        this.$message.success("添加成功");
      } else {
        this.$message.error(info);
      }
    },
    async save() {
      if (this.saveLoading) return;
      this.saveLoading = true;
      this.formatQuestionList();
      let formDatas = deepClone(this.form);
      for (let i = 0; i < formDatas.questionList.length; i++) {
        delete formDatas.questionList[i].show;
        for (let j = 0; j < formDatas.questionList[i].subQuestions; j++) {
          if (!!formDatas.questionList[i].subQuestions[j].answerScreenshotSrc) {
            delete formDatas.questionList[i].subQuestions[j]
              .answerScreenshotSrc;
          }
          if (!!formDatas.questionList[i].subQuestions[j].screenshotSrc) {
            delete formDatas.questionList[i].subQuestions[j].screenshotSrc;
          }
        }
      }
      let addPaper =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pAddPaper
          : this.$request.addPaper;
      const { data, status, info } = await addPaper({
        ...formDatas,
      });
      this.saveLoading = false;
      if (status == 0) {
        this.$router.push({
          path: "/examinationPaper",
        });
      } else {
        this.$message.error(info);
      }
    },
    async changeGrade() {
      //切换年级查询科目
      this._QuerySubjectList(this.form.gradeName);
    },
    async _TypeList() {
      //测验类型查询
      let fetchTypeNames =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pPaperTagList
          : this.$request.fetchTypeNames;
      const { data, status, info } = await fetchTypeNames({
        type: 1,
      });
      if (status == 0) {
        this.answerTypeList =
          data.list?.map((item) => {
            return {
              typeName: item.tag,
              id: item.tagId,
            };
          }) || [];
        if (this.type != 2) {
          this.form.tagId = this.answerTypeList[0]?.id || "";
        }
      } else {
        this.$message.error(info);
      }
    },
    async _GradeList() {
      //查询年级列表
      const { data, status, info } = await this.$request.fetchGradeList();
      if (status == 0) {
        this.gradeList = (data.gradeNames && [...data.gradeNames]) || [];
        if (this.type != 2) {
          this.form.gradeName = this.gradeList[0];
        }
      } else {
        this.$message.error(info);
      }
    },
    async _QuerySubjectList(grade) {
      //查询科目列表
      if (!grade) {
        return;
      }
      let query = {};
      let fetchSubjectList =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pSubjectList
          : this.$request.fetchSubjectList;
      if (this.role != "ROLE_PERSONAL") {
        query.gradeName = grade;
      }
      const { data, status, info } = await fetchSubjectList({ ...query });
      if (status === 0) {
        this.subjectList =
          data.subjectNames?.map((item) => {
            return {
              value: this.role == "ROLE_PERSONAL" ? item.subjectName : item,
              label: this.role == "ROLE_PERSONAL" ? item.subjectName : item,
            };
          }) || [];
        if (this.subjectList.length) {
          this.form.subjectName = this.subjectList[0].value;
        }
      } else {
        this.$message.error(info);
      }
    },
    async _QueryDetail() {
      //查询答题卡详情
      let fetchPaperDetail =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pPaperDetail
          : this.$request.fetchPaperDetail;
      const { data, status, info } = await fetchPaperDetail({
        paperId: this.$route.query.paperId,
      });
      if (status == 0) {
        this.form.title = data.title + "_副本";
        this.form.tagId = data.tagId === 0 ? "" : data.tagId;
        if (this.subjectList.length) {
          this.subjectList.map((item) => {
            if (item.label == data.subjectName) {
              this.form.subjectName = item.value;
            }
          });
        } else {
          this.form.subjectName = "";
        }
        this.form.examsDuration = data.examsDuration;
        if (this.role != "ROLE_PERSONAL") {
          this.form.sharingType = data.sharingType;
          if (this.gradeList.length) {
            this.gradeList.map((item) => {
              if (item == data.gradeName) {
                this.form.gradeName = data.gradeName;
              }
            });
          } else {
            this.form.gradeName = "";
          }
        }
        this.form.questionList = data.questionList?.map((item) => {
          let subQuestions =
            item.subQuestions?.map((items) => {
              return {
                questionType: items.questionType,
                score: items.score,
                partScore: items.partScore,
                selectNum: items.answerOptions.split(",").length,
                answerOptions: items.answerOptions || "A,B,C,D",
                correctAnswer: items.correctAnswer,
                screenshot: items.screenshot || "",
                screenshotSrc: items.screenshot || "",
                answerScreenshot: items.answerScreenshot || "",
                answerScreenshotSrc: items.answerScreenshot || "",
                difficultyFactor: items.difficultyFactor || "", //题目难度
                knowledge: items.knowledge || null, //知识点
              };
            }) || [];
          return {
            questionTitle: item.questionTitle,
            subQuestions: subQuestions,
            show: false,
          };
        });
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.red {
  color: #f30;
}
.qs-options {
  flex: 1;
  .ipt {
    margin-bottom: 5px;
  }
  .answer-box {
    .answer-s {
      cursor: pointer;
      user-select: none;
      margin-bottom: 10px;
      &:first-of-type {
        margin-left: 0;
      }
    }
  }
  .answer-box2 {
    margin-bottom: 10px;
  }
  .delButton {
    text-indent: -9999999px;
    border-color: #ff6868;
    background: #ff6868 url("../../assets/images/arrow.png") no-repeat center;
    background-size: 19px;
    color: transparent;
  }
  .answer-s.ac {
    border: none;
  }
  .ac {
    border-color: #ff6868;
    background: #ff6868;
    color: #fff !important;
  }
}

.sel2 {
  width: 480px;
}
.set-ans-btn {
  width: 100%;
  padding: 10px 0 10px 630px;
  box-sizing: border-box;
  border-right: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
}
.content-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 24px;
  .ml-20 {
    margin-left: 20px;
  }
  .btn-box {
    text-align: right;
    margin-left: 140px;
  }
}
.dia-content {
  .dia-tit {
    font-size: 20px;
    color: #333;
    font-weight: 700;
    text-align: center;
  }
  .add-type {
    width: 100%;
    margin-bottom: 10px;
    .js-set {
      margin: 2.5px 10px 0 0;
      font-size: 14px;
    }
  }
  .add-btn {
    margin-left: 20px;
  }
}
.el-message-box {
  :deep(.el-button--default) {
    color: #fff;
  }
}
.add-box {
  display: flex;
  justify-content: center;
  align-items: center;
  .add-question {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bolder;
    padding: 2px;
    cursor: pointer;
    .s1 {
      margin-left: 6px;
    }
    :deep(.el-icon-plus) {
      font-size: 24px;
      font-weight: 900;
    }
    :deep(.el-button--mini.is-circle) {
      padding: 3px;
    }
  }
}
.dialog-footer {
  text-align: center;
  :deep(.el-button) {
    border-radius: 20px;
    padding: 8px 20px 7px;
    margin: 0 12px;
  }
}
.question-box {
  margin-bottom: 20px;
}
.question-title {
  line-height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  .m20 {
    margin: 0 20px;
  }
  .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;
  }
  .el-icon-caret-right {
    font-size: 24px;
    color: #888;
    transition: all 0.4s;
    margin-right: 12px;
    cursor: pointer;
    &.active {
      transform: rotate(90deg);
    }
  }
}
.questions-ul {
  border-left: 1px solid #e2e2e2;
  border-top: 1px solid #e2e2e2;
}
.el-input-number {
  width: 140px;
}
.answer-title {
  text-align: center;
  font-size: 20px;
  color: #333;
  font-weight: 700;
  padding-bottom: 20px;
  .totals {
    font-size: 16px;
    color: #888;
    font-weight: normal;
  }
}
.answer-box {
  .answer-s {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    margin: 0 6px;
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 30px;
    &.active {
      background: #5e78fa;
      border-color: #5e78fa;
      color: #fff;
    }
  }
}
.qs-options {
  .answer-s {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    margin: 0 6px;
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    &.active {
      background: #5e78fa;
      border-color: #5e78fa;
      color: #fff;
    }
  }
}
.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: 70px;
  }
  .qs-type {
    width: 160px;
  }
  .qs-score,
  .qs-partScore {
    width: 160px;
  }
  .qs-options {
    flex: 1;
  }
  .qs-set {
    width: 60px;
  }
  .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;
    }
  }
}
</style>