zc_saas_pc/src/pages/bank-exam/index.vue

<template>
  <div class="course-exam">
    <Header></Header>
    <section class="section">
      <div class="container">
        <div class="section__header">
          <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(item, index) in $route.matched"
              :key="index"
              :to="{ path: item.path }"
              >{{ item.name }}</el-breadcrumb-item
            >
          </el-breadcrumb> -->
        </div>
        <div class="section__body">
          <div class="explain-record">
            <div class="explain-record__body clearfix">
              <div class="left-box">
                <Header-tab-box
                  :num="questionOverNum(true)"
                  :allNum="questionList.length"
                  @prevQuestion="prevQuestion"
                  @nextQuestion="nextQuestion"
                >
                </Header-tab-box>
                <div class="left-box__body">
                  <template v-for="(question, questionIndex) in questionList">
                    <div
                      class="question"
                      v-if="question.type == 1 && current == questionIndex"
                      :key="questionIndex"
                    >
                      <div class="question__title">
                        {{ questionIndex + 1 }}、单选题
                      </div>
                      <div
                        class="question__desc"
                        v-html="question.content"
                      ></div>
                      <div class="question__content">
                        <div class="question-list" v-if="!question.ques">
                          <div
                            class="radio"
                            v-for="(item, index) in question.jsonStr"
                            :key="index"
                            @click="
                              radioSelect(
                                question,
                                questionIndex,
                                item.optionsId
                              )
                            "
                          >
                            <div>
                              {{ ast[index] }}. {{ item.content }}
                              <div v-if="item.imgUrl">
                                <img
                                  style="max-width: 100%"
                                  :src="$tools.splitImgHost(item.imgUrl)"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="question-list" v-if="question.ques">
                          <div
                            class="radio"
                            :class="{
                              right:
                                bankType == 1 &&
                                (item.optionsId == question.ques ||
                                  item.optionsId == question.ans),
                              wrong:
                                bankType == 1 &&
                                item.optionsId == question.ques &&
                                question.ques != question.ans,
                              user_choose:
                                bankType == 2 && item.optionsId == question.ques
                            }"
                            v-for="(item, index) in question.jsonStr"
                            :key="index"
                            @click="
                              radioSelect(
                                question,
                                questionIndex,
                                item.optionsId
                              )
                            "
                          >
                            <div>
                              {{ ast[index] }}. {{ item.content }}
                              <div v-if="item.imgUrl">
                                <img
                                  style="max-width: 100%"
                                  :src="$tools.splitImgHost(item.imgUrl)"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="answer-list"
                          v-if="bankType == 1 && question.ques"
                        >
                          <div class="answer-list__left">
                            题目答案：{{ ast[question.ans - 1] }}
                          </div>
                          <div class="answer-list__left">
                            我的答案：{{ ast[question.ques - 1] }}
                          </div>
                        </div>
                        <div
                          class="explain-list"
                          v-if="bankType == 1 && question.ques"
                        >
                          <div class="explain-list__header">答案解析：</div>
                          <div
                            class="explain-list__body"
                            v-html="question.analysisContent"
                          ></div>
                        </div>
                      </div>
                    </div>

                    <div
                      class="question"
                      v-if="question.type == 2 && current == questionIndex"
                      :key="questionIndex"
                    >
                      <div class="question__title">
                        {{ questionIndex + 1 }}、多选题
                      </div>
                      <div
                        class="question__desc"
                        v-html="question.content"
                      ></div>
                      <div class="question__content">
                        <div class="question-list" v-if="!question.ques">
                          <el-checkbox
                            class="checkbox"
                            v-for="(item, index) in question.jsonStr"
                            :key="index"
                            :label="item.optionsId"
                            v-model="item.checked"
                          >
                            <div>
                              {{ ast[index] }}. {{ item.content }}
                              <div v-if="item.imgUrl">
                                <img
                                  style="max-width: 100%"
                                  :src="$tools.splitImgHost(item.imgUrl)"
                                  alt=""
                                />
                              </div>
                            </div>
                          </el-checkbox>
                        </div>
                        <div class="question-list" v-if="question.ques">
                          <el-checkbox
                            :disabled="bankType == 2 ? false : true"
                            class="checkbox"
                            :class="{
                              right:
                                bankType == 1 &&
                                (question.ques.indexOf(item.optionsId) != -1 ||
                                  question.ans.indexOf(item.optionsId) != -1),
                              wrong:
                                bankType == 1 &&
                                question.ques.indexOf(item.optionsId) != -1 &&
                                question.ans.indexOf(item.optionsId) == -1,
                              user_choose:
                                bankType == 2 &&
                                question.ques.indexOf(item.optionsId) != -1
                            }"
                            v-for="(item, index) in question.jsonStr"
                            :key="index"
                            :label="item.optionsId"
                            v-model="item.checked"
                          >
                            <div>
                              {{ ast[index] }}. {{ item.content }}
                              <div v-if="item.imgUrl">
                                <img
                                  style="max-width: 100%"
                                  :src="$tools.splitImgHost(item.imgUrl)"
                                  alt=""
                                />
                              </div>
                            </div>
                          </el-checkbox>
                        </div>
                        <div
                          class="answer-list"
                          v-if="bankType == 1 && question.ques"
                        >
                          <div class="answer-list__left">
                            题目答案：
                            <template v-for="ansItem in question.ans">{{
                              ast[ansItem - 1]
                            }}</template>
                          </div>
                          <div class="answer-list__left">
                            我的答案：
                            <template v-for="quesItem in question.ques">{{
                              ast[quesItem - 1]
                            }}</template>
                          </div>
                        </div>
                        <div
                          class="explain-list"
                          v-if="bankType == 1 && question.ques"
                        >
                          <div class="explain-list__header">答案解析：</div>
                          <div
                            class="explain-list__body"
                            v-html="question.analysisContent"
                          ></div>
                        </div>
                      </div>
                      <div class="question__btns">
                        <div
                          v-if="
                            bankType == 2 || (bankType == 1 && !question.ques)
                          "
                          class="submit"
                          @click="checkboxSubmit(question, questionIndex)"
                        >
                          确认答案
                        </div>
                      </div>
                    </div>

                    <div
                      class="question"
                      v-if="question.type == 3 && current == questionIndex"
                      :key="questionIndex"
                    >
                      <div class="question__title">
                        {{ questionIndex + 1 }}、判断题
                      </div>
                      <div
                        class="question__desc"
                        v-html="question.content"
                      ></div>
                      <div class="question__content">
                        <div class="question-list" v-if="!question.ques">
                          <div
                            class="radio"
                            v-for="(item, index) in judge"
                            :key="index"
                            @click="judgeSelect(question, questionIndex, index)"
                          >
                            <div>
                              {{ ast[index] }}. {{ item }}
                              <div v-if="item.imgUrl">
                                <img
                                  style="max-width: 100%"
                                  :src="$tools.splitImgHost(item.imgUrl)"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="question-list" v-if="question.ques">
                          <!-- right:
                                bankType == 1 && (index == question.ques || index == question.ans),
                              wrong:
                                bankType == 1 && (index == question.ques &&
                                question.ques != question.ans),
                              user_choose: bankType == 2 && (index == question.ques), -->
                          <div
                            class="radio"
                            :class="{
                              right:
                                bankType == 1 &&
                                (index == (question.ques == 1 ? 0 : 1) ||
                                  index != question.ans),
                              wrong:
                                bankType == 1 &&
                                index == (question.ques == 1 ? 0 : 1) &&
                                question.ques != question.ans,
                              user_choose:
                                bankType == 2 &&
                                index == (question.ques == 1 ? 0 : 1)
                            }"
                            v-for="(item, index) in judge"
                            :key="index"
                            @click="judgeSelect(question, questionIndex, index)"
                          >
                            <div>
                              {{ ast[index] }}. {{ item }}
                              <div v-if="item.imgUrl">
                                <img
                                  style="max-width: 100%"
                                  :src="$tools.splitImgHost(item.imgUrl)"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="answer-list"
                          v-if="bankType == 1 && question.ques"
                        >
                          <div class="answer-list__left">
                            题目答案：{{ ast[question.ans == 1 ? 0 : 1] }}
                          </div>
                          <div class="answer-list__left">
                            我的答案：{{ ast[question.ques == 1 ? 0 : 1] }}
                          </div>
                        </div>
                        <div
                          class="explain-list"
                          v-if="bankType == 1 && question.ques"
                        >
                          <div class="explain-list__header">答案解析：</div>
                          <div
                            class="explain-list__body"
                            v-html="question.analysisContent"
                          ></div>
                        </div>
                      </div>
                    </div>

                    <div
                      class="question"
                      v-if="question.type == 4 && current == questionIndex"
                      :key="questionIndex"
                    >
                      <div class="question__title">
                        {{ questionIndex + 1 }}、案例题
                      </div>
                      <div
                        class="question__desc"
                        v-html="question.content"
                      ></div>
                      <div class="question__content">
                        <el-tabs v-model="question.tabIndex">
                          <el-tab-pane
                            v-for="(json, jsonIndex) in question.jsonStr"
                            :label="'问题' + (jsonIndex + 1)"
                            :name="jsonIndex + ''"
                            :key="jsonIndex"
                          >
                            <div
                              class="question"
                              v-if="json.type == 1"
                              :key="questionIndex"
                            >
                              <div class="question__title">
                                {{ jsonIndex + 1 }}、单选题
                              </div>
                              <div
                                class="question__desc"
                                v-html="json.content"
                              ></div>
                              <div class="question__content">
                                <div
                                  class="question-list"
                                  v-if="!question.ques[jsonIndex]"
                                >
                                  <div
                                    class="radio"
                                    v-for="(item, index) in json.optionsList"
                                    :key="index"
                                    @click="
                                      radioSelectChild(
                                        questionIndex,
                                        jsonIndex,
                                        item.optionsId
                                      )
                                    "
                                  >
                                    <div>
                                      {{ ast[index] }}. {{ item.content }}
                                      <div v-if="item.imgUrl">
                                        <img
                                          style="max-width: 100%"
                                          :src="
                                            $tools.splitImgHost(item.imgUrl)
                                          "
                                          alt=""
                                        />
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div
                                  class="question-list"
                                  v-if="question.ques[jsonIndex]"
                                >
                                  <div
                                    class="radio"
                                    :class="{
                                      right:
                                        bankType == 1 &&
                                        (item.optionsId ==
                                          question.ques[jsonIndex] ||
                                          item.optionsId ==
                                            question.ans[jsonIndex]),
                                      wrong:
                                        bankType == 1 &&
                                        item.optionsId ==
                                          question.ques[jsonIndex] &&
                                        question.ques[jsonIndex] !=
                                          question.ans[jsonIndex],
                                      user_choose:
                                        bankType == 2 &&
                                        item.optionsId ==
                                          question.ques[jsonIndex]
                                    }"
                                    v-for="(item, index) in json.optionsList"
                                    :key="index"
                                    @click="
                                      radioSelectChild(
                                        questionIndex,
                                        jsonIndex,
                                        item.optionsId
                                      )
                                    "
                                  >
                                    <div>
                                      {{ ast[index] }}. {{ item.content }}
                                      <div v-if="item.imgUrl">
                                        <img
                                          style="max-width: 100%"
                                          :src="
                                            $tools.splitImgHost(item.imgUrl)
                                          "
                                          alt=""
                                        />
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div
                                  class="answer-list"
                                  v-if="
                                    bankType == 1 && question.ques[jsonIndex]
                                  "
                                >
                                  <div class="answer-list__left">
                                    题目答案：{{
                                      ast[question.ans[jsonIndex] - 1]
                                    }}
                                  </div>
                                  <div class="answer-list__left">
                                    我的答案：{{
                                      ast[question.ques[jsonIndex] - 1]
                                    }}
                                  </div>
                                </div>
                                <div
                                  class="explain-list"
                                  v-if="
                                    bankType == 1 && question.ques[jsonIndex]
                                  "
                                >
                                  <div class="explain-list__header">
                                    答案解析：
                                  </div>
                                  <div
                                    class="explain-list__body"
                                    v-html="json.analysisContent"
                                  ></div>
                                </div>
                              </div>
                              <div class="question__btns"></div>
                            </div>

                            <div
                              class="question"
                              v-if="json.type == 2"
                              :key="jsonIndex"
                            >
                              <div class="question__title">
                                {{ jsonIndex + 1 }}、多选题
                              </div>
                              <div
                                class="question__desc"
                                v-html="json.content"
                              ></div>
                              <div class="question__content">
                                <div
                                  class="question-list"
                                  v-if="!question.ques[jsonIndex]"
                                >
                                  <el-checkbox
                                    class="checkbox"
                                    v-for="(item, index) in json.optionsList"
                                    :key="index"
                                    :label="item.optionsId"
                                    v-model="item.checked"
                                  >
                                    <div>
                                      {{ ast[index] }}. {{ item.content }}
                                      <div v-if="item.imgUrl">
                                        <img
                                          style="max-width: 100%"
                                          :src="
                                            $tools.splitImgHost(item.imgUrl)
                                          "
                                          alt=""
                                        />
                                      </div>
                                    </div>
                                  </el-checkbox>
                                </div>
                                <div
                                  class="question-list"
                                  v-if="question.ques[jsonIndex]"
                                >
                                  <el-checkbox
                                    :disabled="bankType == 2 ? false : true"
                                    class="checkbox"
                                    :class="{
                                      right:
                                        bankType == 1 &&
                                        (question.ques[jsonIndex].indexOf(
                                          item.optionsId
                                        ) != -1 ||
                                          question.ans[jsonIndex].indexOf(
                                            item.optionsId
                                          ) != -1),
                                      wrong:
                                        bankType == 1 &&
                                        question.ques[jsonIndex].indexOf(
                                          item.optionsId
                                        ) != -1 &&
                                        question.ans[jsonIndex].indexOf(
                                          item.optionsId
                                        ) == -1,
                                      user_choose:
                                        bankType == 2 &&
                                        question.ques[jsonIndex].indexOf(
                                          item.optionsId
                                        ) != -1
                                    }"
                                    v-for="(item, index) in json.optionsList"
                                    :key="index"
                                    :label="item.optionsId"
                                    v-model="item.checked"
                                  >
                                    <div>
                                      {{ ast[index] }}. {{ item.content }}
                                      <div v-if="item.imgUrl">
                                        <img
                                          style="max-width: 100%"
                                          :src="
                                            $tools.splitImgHost(item.imgUrl)
                                          "
                                          alt=""
                                        />
                                      </div>
                                    </div>
                                  </el-checkbox>
                                </div>
                                <div
                                  class="answer-list"
                                  v-if="
                                    bankType == 1 && question.ques[jsonIndex]
                                  "
                                >
                                  <div class="answer-list__left">
                                    题目答案：
                                    <template
                                      v-for="ansItem in question.ans[jsonIndex]"
                                      >{{ ast[ansItem - 1] }}</template
                                    >
                                  </div>
                                  <div class="answer-list__left">
                                    我的答案：
                                    <template
                                      v-for="quesItem in question.ques[
                                        jsonIndex
                                      ]"
                                      >{{ ast[quesItem - 1] }}</template
                                    >
                                  </div>
                                </div>
                                <div
                                  class="explain-list"
                                  v-if="
                                    bankType == 1 && question.ques[jsonIndex]
                                  "
                                >
                                  <div class="explain-list__header">
                                    答案解析：
                                  </div>
                                  <div
                                    class="explain-list__body"
                                    v-html="json.analysisContent"
                                  ></div>
                                </div>
                              </div>
                              <div class="question__btns">
                                <div
                                  v-if="
                                    bankType == 2 ||
                                      (bankType == 1 &&
                                        !question.ques[jsonIndex])
                                  "
                                  class="submit"
                                  @click="
                                    checkboxSubmitChild(
                                      questionIndex,
                                      jsonIndex
                                    )
                                  "
                                >
                                  确认答案
                                </div>
                              </div>
                            </div>

                            <div
                              class="question"
                              v-if="json.type == 3"
                              :key="jsonIndex"
                            >
                              <div class="question__title">
                                {{ jsonIndex + 1 }}、判断题
                              </div>
                              <div
                                class="question__desc"
                                v-html="json.content"
                              ></div>
                              <div class="question__content">
                                <div
                                  class="question-list"
                                  v-if="!question.ques[jsonIndex]"
                                >
                                  <div
                                    class="radio"
                                    v-for="(item, index) in judge"
                                    :key="index"
                                    @click="
                                      judgeSelectChild(
                                        questionIndex,
                                        jsonIndex,
                                        index
                                      )
                                    "
                                  >
                                    <div>
                                      {{ ast[index] }}. {{ item }}
                                      <div v-if="item.imgUrl">
                                        <img
                                          style="max-width: 100%"
                                          :src="
                                            $tools.splitImgHost(item.imgUrl)
                                          "
                                          alt=""
                                        />
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div
                                  class="question-list"
                                  v-if="question.ques[jsonIndex]"
                                >
                                  <!-- right:
                                        bankType == 1 && (index == question.ques[jsonIndex] ||
                                        index == question.ans[jsonIndex]),
                                      wrong:
                                        bankType == 1 &&
                                        index == question.ques[jsonIndex] &&
                                        question.ques[jsonIndex] !=
                                          question.ans[jsonIndex]),
                                      user_choose: bankType == 2 && (index == question.ques[jsonIndex]), -->
                                  <div
                                    class="radio"
                                    :class="{
                                      right:
                                        bankType == 1 &&
                                        (index ==
                                          (question.ques[jsonIndex] == 1
                                            ? 0
                                            : 1) ||
                                          index != question.ans[jsonIndex]),
                                      wrong:
                                        bankType == 1 &&
                                        index ==
                                          (question.ques[jsonIndex] == 1
                                            ? 0
                                            : 1) &&
                                        question.ques[jsonIndex] !=
                                          question.ans[jsonIndex],
                                      user_choose:
                                        bankType == 2 &&
                                        index ==
                                          (question.ques[jsonIndex] == 1
                                            ? 0
                                            : 1)
                                    }"
                                    v-for="(item, index) in judge"
                                    :key="index"
                                    @click="
                                      judgeSelectChild(
                                        questionIndex,
                                        jsonIndex,
                                        index
                                      )
                                    "
                                  >
                                    <div>
                                      {{ ast[index] }}. {{ item }}
                                      <div v-if="item.imgUrl">
                                        <img
                                          style="max-width: 100%"
                                          :src="
                                            $tools.splitImgHost(item.imgUrl)
                                          "
                                          alt=""
                                        />
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div
                                  class="answer-list"
                                  v-if="
                                    bankType == 1 && question.ques[jsonIndex]
                                  "
                                >
                                  <div class="answer-list__left">
                                    题目答案：{{ ast[question.ans[jsonIndex]] }}
                                  </div>
                                  <div class="answer-list__left">
                                    我的答案：{{
                                      ast[question.ques[jsonIndex]]
                                    }}
                                  </div>
                                </div>
                                <div
                                  class="explain-list"
                                  v-if="
                                    bankType == 1 && question.ques[jsonIndex]
                                  "
                                >
                                  <div class="explain-list__header">
                                    答案解析：
                                  </div>
                                  <div
                                    class="explain-list__body"
                                    v-html="json.analysisContent"
                                  ></div>
                                </div>
                              </div>
                              <div class="question__btns"></div>
                            </div>

                            <div
                              class="question"
                              v-if="json.type == 5"
                              :key="jsonIndex"
                            >
                              <div class="question__title">
                                {{ jsonIndex + 1 }}、简答题
                              </div>
                              <div
                                class="question__desc"
                                v-html="json.content"
                              ></div>
                              <div class="question__content">
                                <div
                                  class="question-list textarea"
                                  v-if="
                                    bankType == 2 ||
                                      (bankType == 1 &&
                                        !(
                                          question.ques[jsonIndex] &&
                                          (question.ques[jsonIndex].imageList
                                            .length ||
                                            question.ques[jsonIndex].text)
                                        ))
                                  "
                                >
                                  <el-input
                                    type="textarea"
                                    rows="5"
                                    v-model="json.ansText.text"
                                    resize="none"
                                  >
                                  </el-input>
                                  <div class="upload clearfix">
                                    <div
                                      class="upload__imgs"
                                      v-for="(img, imgIndex) in json.ansText
                                        .imageList"
                                      :key="imgIndex"
                                    >
                                      <img
                                        style="max-width: 100%"
                                        :src="$tools.splitImgHost(img, true)"
                                        alt=""
                                      />
                                    </div>
                                    <div class="upload__btn">
                                      <i class="el-icon-plus icon"></i>
                                      <p>上传图片</p>
                                      <input
                                        @change="
                                          uploadImgChild(
                                            $event,
                                            questionIndex,
                                            jsonIndex
                                          )
                                        "
                                        type="file"
                                      />
                                    </div>
                                  </div>
                                </div>
                                <div
                                  class="explain-list"
                                  v-if="
                                    bankType == 1 &&
                                      question.ques[jsonIndex] &&
                                      (question.ques[jsonIndex].imageList
                                        .length ||
                                        question.ques[jsonIndex].text)
                                  "
                                >
                                  <div class="explain-list__header">
                                    我的答案:
                                  </div>
                                  <div class="explain-list__body">
                                    <div>
                                      {{ question.ques[jsonIndex].text }}
                                    </div>
                                    <div class="upload clearfix">
                                      <div
                                        class="upload__imgs"
                                        v-for="(img, imgIndex) in question.ques[
                                          jsonIndex
                                        ].imageList"
                                        :key="imgIndex"
                                      >
                                        <img
                                          style="max-width: 100%"
                                          :src="$tools.splitImgHost(img, true)"
                                          alt=""
                                        />
                                      </div>
                                    </div>
                                  </div>
                                  <div class="explain-list__header">
                                    答案解析：
                                  </div>
                                  <div
                                    class="explain-list__body"
                                    v-html="json.analysisContent"
                                  ></div>
                                </div>
                              </div>
                              <div class="question__btns">
                                <div
                                  v-if="
                                    bankType == 2 ||
                                      (bankType == 1 &&
                                        !(
                                          question.ques[jsonIndex] &&
                                          (question.ques[jsonIndex].imageList
                                            .length ||
                                            question.ques[jsonIndex].text)
                                        ))
                                  "
                                  class="submit"
                                  @click="
                                    ansSubmitChild(
                                      question,
                                      questionIndex,
                                      jsonIndex
                                    )
                                  "
                                >
                                  确认答案
                                </div>
                              </div>
                            </div>
                          </el-tab-pane>
                        </el-tabs>
                      </div>
                    </div>

                    <div
                      class="question"
                      v-if="question.type == 5 && current == questionIndex"
                      :key="questionIndex"
                    >
                      <div class="question__title">
                        {{ questionIndex + 1 }}、简答题
                      </div>
                      <div
                        class="question__desc"
                        v-html="question.content"
                      ></div>
                      <div class="question__content">
                        <div
                          class="question-list textarea"
                          v-if="
                            bankType == 2 ||
                              (bankType == 1 &&
                                !question.ques.imageList.length &&
                                !question.ques.text)
                          "
                        >
                          <el-input
                            type="textarea"
                            rows="5"
                            v-model="question.ansText.text"
                            resize="none"
                          ></el-input>
                          <div class="upload clearfix">
                            <div
                              class="upload__imgs"
                              v-for="(img, imgIndex) in question.ansText
                                .imageList"
                              :key="imgIndex"
                            >
                              <img
                                style="max-width: 100%"
                                :src="$tools.splitImgHost(img, true)"
                                alt=""
                              />
                            </div>
                            <div class="upload__btn">
                              <i class="el-icon-plus icon"></i>
                              <p>上传图片</p>
                              <input
                                @change="
                                  uploadImg($event, question, questionIndex)
                                "
                                type="file"
                              />
                            </div>
                          </div>
                        </div>
                        <div
                          class="explain-list"
                          v-if="
                            bankType == 1 &&
                              (question.ques.imageList.length ||
                                question.ques.text)
                          "
                        >
                          <div class="explain-list__header">我的答案:</div>
                          <div class="explain-list__body">
                            <div>{{ question.ques.text }}</div>
                            <div class="upload clearfix">
                              <div
                                class="upload__imgs"
                                v-for="(img, imgIndex) in question.ques
                                  .imageList"
                                :key="imgIndex"
                              >
                                <img
                                  style="max-width: 100%"
                                  :src="$tools.splitImgHost(img, true)"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                          <div class="explain-list__header">答案解析：</div>
                          <div
                            class="explain-list__body"
                            v-html="question.analysisContent"
                          ></div>
                        </div>
                      </div>
                      <div class="question__btns">
                        <div
                          v-if="
                            bankType == 2 ||
                              (bankType == 1 &&
                                !question.ques.imageList.length &&
                                !question.ques.text)
                          "
                          class="submit"
                          @click="ansSubmit(question, questionIndex)"
                        >
                          确认答案
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
                <Collection-box
                  :param="param"
                  @sumit="getCollectInfo(current)"
                  :showT="!collectList[current]"
                >
                </Collection-box>
              </div>
              <div class="right-box">
                <div class="right-box__header">
                  <el-button
                    type="primary"
                    round
                    plain
                    size="small"
                    class="back-btn"
                    @click="$router.back(-1)"
                    >返回
                  </el-button>
                </div>

                <div class="right-box__footer">
                  <el-button
                    type="primary"
                    :loading="loading"
                    class="submit"
                    @click="submit"
                    >交卷</el-button
                  >
                </div>
                <div class="right-box__header">
                  <div class="title">答题卡</div>
                  <div class="time" v-if="allTimes">
                    {{ countdown(lastTime) }}
                  </div>
                </div>
                <div class="right-box__body">
                  <div class="card">
                    <div class="card__note">
                      <div class="item">
                        <div class="box green"></div>
                        正确
                      </div>
                      <div class="item">
                        <div class="box red"></div>
                        错误
                      </div>
                      <div class="item">
                        <div class="box blue"></div>
                        已做未评改
                      </div>

                      <div class="item">
                        <div class="box yellow"></div>
                        少选
                      </div>
                      <div class="item">
                        <div class="box white"></div>
                        未做
                      </div>
                    </div>
                    <div class="card__content">
                      <ul class="list">
                        <li
                          class="item white"
                          v-for="(item, index) in questionList"
                          :key="index"
                          :class="{
                            green: bankType == 1 && isRight(item, index),
                            red: bankType == 1 && isWrong(item, index),
                            yellow: bankType == 1 && isPart(item, index),
                            blue: bankType == 1 && isOver(item, index),
                            check_ans: bankType == 2 && isCheck(item, index)
                          }"
                          @click="changeIndex(index)"
                        >
                          {{ index + 1 }}
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <ToolBar></ToolBar>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import CollectionBox from "@/components/common/CollectionBox.vue";
import HeaderTabBox from "../../components/exam/HeaderTabBox.vue";
import { mapMutations } from "vuex";
import myMixins from "@/mixin";
export default {
  name: "BankExplain",
  components: {
    Footer,
    Header,
    ToolBar,
    CollectionBox,
    HeaderTabBox
  },
  mixins: [myMixins],
  data() {
    return {
      recordId: 0,
      tabIndex: "1",
      textarea: "",
      questionIndex: 0,
      checked: false,
      activeName: "1",
      questionList: [],
      goodsExamConfig: [],
      goodsDetail: {},
      bankList: [],
      judge: ["正确", "错误"],
      ast: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ],
      mustBack: false,
      loading: false,
      needPhoto: false,
      lastTime: 0, //剩余考试时长
      allTimes: 0, //总考试时长
      lastCount: 0,
      examId: 0,
      goodsId: 0,
      moduleId: 0,
      chapterId: 0,
      current: 0,
      bankType: 0,
      timer: null,
      orderGoodsId: "",
      collectList: [],
      isSubmit: false,
      postTimer: null,
      number: "",
      simulateExamId: "",
      examData: {}
    };
  },
  async mounted() {
    this.orderGoodsId = this.$route.query.orderGoodsId || "";
    this.current = +this.$route.query.current || 0;
    this.goodsId = this.$route.params.goodsId;
    this.number = this.$route.query.number;
    this.examId = this.$route.query.examId;
    this.moduleId = this.$route.query.moduleId;
    this.chapterId = this.$route.query.chapterId;
    (this.simulateStatus = parseInt(this.$route.query.simulateStatus)),
      await this.bankExam();
    if (!this.number) {
      this.goodsQuestionList();
    } else {
      // 随机练习
      this.goodsExamRandomList();
    }
  },

  beforeDestroy() {
    clearInterval(this.postTimer);
    clearInterval(this.timer);
    try {
      this.$msgbox.close();
    } catch (err) {}
  },
  beforeRouteLeave(to, from, next) {
    if (this.mustBack || this.isSubmit ||
      (to.path == "/home" && !this.$store.state.userInfo)) {
      next();
    } else {
      next(false);
      //离开
      if (this.bankType == 1) {
        console.log(1);
        let ansCount = this.questionOverNum(true); //已答题数
        this.lastCount = this.questionList.length - ansCount; //统计未答完的题数

        //所有题目答完
        if (this.lastCount == 0) {
          // this.testOver = true;
          this.$nextTick(() => {
            this.$confirm("您还未交卷,确定结束做题吗？", "温馨提示", {
              confirmButtonText: "结束做题",
              cancelButtonText: "下次继续",
              type: "warning"
            })
              .then(() => {
                this.examSubmit();
              })
              .catch(() => {
                this.examRecordEdit();
                next();
              });
          });
          //未答完
        } else {
          this.$nextTick(() => {
            this.$confirm(
              `您还有${this.lastCount}道题未作答， 现在继续作答，还是下次继续？`,
              "温馨提示",
              {
                confirmButtonText: "继续作答",
                cancelButtonText: "下次继续",
                type: "warning"
              }
            )
              .then(() => {
                // confirmButton回调
              })
              .catch(() => {
                this.examRecordEdit();
                next();
              });
          });
          // this.isLastCount = true;
        }
      } else if (this.bankType == 2) {
        console.log(2);
        let ansCount = this.questionOverNum(true); //已答题数
        this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
        //所有题目答完
        if (this.lastCount == 0) {
          this.$nextTick(() => {
            this.$confirm(`您已完成所有题目，快去交卷吧！`, "温馨提示", {
              confirmButtonText: "立即交卷",
              cancelButtonText: "暂不交卷",
              type: "warning"
            })
              .then(() => {
                // confirmButton回调
                this.examSubmit();
                next();
              })
              .catch(() => {});
          });
          //未答完
        } else {
          this.$nextTick(() => {
            this.$confirm(
              `您当前正在测试，还剩${this.lastCount}道题未完成，离开视为交卷`,
              "温馨提示",
              {
                confirmButtonText: "继续离开",
                cancelButtonText: "暂不离开",
                type: "warning"
              }
            )
              .then(() => {
                this.examSubmit();
              })
              .catch(() => {});
          });
        }
      }
    }
  },
  methods: {
    ...mapMutations(["setExamResult"]),
    toFixed(num) {
      if (num) {
        let str = String(num).indexOf(".");

        if (str != -1) {
          return +num.toFixed(2);
        } else {
          return num;
        }
      } else {
        return 0;
      }
    },

    /**
     * @param {Object} current
     * 获取收藏信息
     */
    getCollectInfo(current) {
      this.$request
        .getCollectInfo({
          examId: this.examId,
          questionId: this.questionList[current].questionId,
          goodsId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
          doMode: this.doMode
        })
        .then(res => {
          this.$set(this.collectList, current, res.data);
        })
        .catch(err => {
          this.$set(this.collectList, current, false);
        });
    },

    /**
     * 是否做完所有题目
     */
    isDoOver() {
      let questionOverNum = this.questionOverNum(true); //获取已经回答的题目数(包括简答和案例)
      if (this.questionList.length == questionOverNum) {
        //全部做完弹窗
        this.$nextTick(() => {
          this.$confirm(`您已完成所有题目，快去交卷吧！`, "温馨提示", {
            confirmButtonText: "立即交卷",
            cancelButtonText: "暂不交卷",
            type: "warning"
          })
            .then(() => {
              // confirmButton回调
              this.examSubmit();
            })
            .catch(() => {});
        });
      }
    },

    /**
     * 请求题目列表
     */
    goodsQuestionList() {
      this.$request[
        this.doMode == 3 ? "goodsRandomQuestionList" : "goodsQuestionList"
      ]({
        examId: this.examId,
        goodsId: this.goodsId,
        orderGoodsId: this.orderGoodsId,
        from: this.doMode == 3 ? 1 : ""
      })
        .then(async res => {
          if (this.doMode == 3) {
            this.simulateExamId = res.data.simulateExamId;
            res.data = res.data.questionList;
          }
          if (!res.data.length) {
            this.$message({
              type: "warning",
              message: "该试卷暂无题目"
            });
            return;
          }
          this.allTimes = this.examData.answerTime * 60;
          this.lastTime =
            this.examData.answerTime && this.examData.answerTime * 60;

          //考试时间到了自动交卷
          if (this.lastTime) {
            this.timer = setInterval(() => {
              if (this.lastTime <= 0) {
                clearInterval(this.timer);
                this.$confirm(`考试时间已到，系统将自动交卷`, "提示", {
                  confirmButtonText: "立即交卷",
                  closeOnClickModal: false,
                  showCancelButton: false,
                  closeOnPressEscape: false,
                  distinguishCancelAndClose: false,
                  showClose: false
                });

                setTimeout(() => {
                  try {
                    this.$msgbox.close();
                  } catch (err) {}
                  this.examSubmit();
                }, 3000);
                return;
              }
              this.lastTime--;
            }, 1000);
          } else {
          }

          res.data.forEach((item, index) => {
            item.jsonStr = JSON.parse(item.jsonStr);
            if (item.type == 2) {
              //多选
              item.jsonStr.forEach(str => {
                str.optionsId = "" + str.optionsId;
              });
              let arr = item.answerQuestion.split(",");
              arr.forEach((a, i) => {
                arr[i] = "" + a;
              });
              item.ans = arr;
              item.quesSelect = [];
              item.analysisContent &&
                (item.analysisContent = item.analysisContent.replace(
                  /<img/gi,
                  '<img style="max-width:100%;"'
                ));
              item.content &&
                (item.content = item.content.replace(
                  /<img/gi,
                  '<img style="max-width:100%;"'
                ));
              return;
            } else if (item.type == 5) {
              //简答题
              item.ansText = {
                text: "",
                imageList: []
              };
              item.ques = {
                text: "",
                imageList: []
              };
              item.analysisContent &&
                (item.analysisContent = item.analysisContent.replace(
                  /<img/gi,
                  '<img style="max-width:100%;"'
                ));
              item.content &&
                (item.content = item.content.replace(
                  /<img/gi,
                  '<img style="max-width:100%;"'
                ));

              return;
            } else if (item.type == 4) {
              //案例题
              console.log(item.jsonStr);
              item.ques = [];
              item.tabIndex = "0";
              let ansArr = [];
              item.jsonStr.forEach((json, index) => {
                if (json.type == 1) {
                  ansArr[index] = json.answerQuestion;
                  json.content &&
                    (json.content = json.content.replace(
                      /<img/gi,
                      '<img style="max-width:100%;"'
                    ));
                } else if (json.type == 2) {
                  json.optionsList.forEach(str => {
                    str.optionsId = "" + str.optionsId;
                  });
                  let arr = json.answerQuestion.split(",");
                  arr.forEach((a, i) => {
                    arr[i] = "" + a;
                  });
                  ansArr[index] = arr;
                  json.content &&
                    (json.content = json.content.replace(
                      /<img/gi,
                      '<img style="max-width:100%;"'
                    ));
                } else if (json.type == 3) {
                  ansArr[index] = json.answerQuestion;
                  json.content &&
                    (json.content = json.content.replace(
                      /<img/gi,
                      '<img style="max-width:100%;"'
                    ));
                } else if (json.type == 5) {
                  ansArr[index] = {
                    text: "",
                    imageList: []
                  };
                  json.ansText = {
                    text: "",
                    imageList: []
                  };
                  json.ques = {
                    text: "",
                    imageList: []
                  };
                  json.content &&
                    (json.content = json.content.replace(
                      /<img/gi,
                      '<img style="max-width:100%;"'
                    ));
                }
              });

              item.ans = ansArr;
              return;
            }
            item.analysisContent &&
              (item.analysisContent = item.analysisContent.replace(
                /<img/gi,
                '<img style="max-width:100%;"'
              ));
            item.content &&
              (item.content = item.content.replace(
                /<img/gi,
                '<img style="max-width:100%;"'
              ));
            item.ques = "";
            item.ans = item.answerQuestion;
          });

          this.questionList = res.data;
          this.lastCount = this.questionList.length;
          this.getCollectInfo(this.current);
          await this.examRecord();
        })
        .catch(err => {
          if (this.doMode == 3) {
            this.$alert("你已做完所有题目", "提示", {
              confirmButtonText: "确定,并且返回上一页",
              showClose: false,
              callback: action => {
                this.mustBack = true;
                this.$router.go(-1);
                return;
              }
            });
          }
        });
    },
    // 随机练习题目
    goodsExamRandomList() {
      this.$request
        .goodsExamRandomList({
          goodsId: this.goodsId,
          number: this.number,
          orderGoodsId: this.orderGoodsId
        })
        .then(async res => {
          if (!res.data.questionList.length) {
            this.$message({
              type: "warning",
              message: "该试卷暂无题目"
            });
            return;
          }
          this.examId = res.data.examId;
          this.bankType = 1;
          res.data.questionList.forEach((item, index) => {
            item.jsonStr = JSON.parse(item.jsonStr);

            console.log(item.type, "item");
            if (item.type == 2) {
              //多选
              item.jsonStr.forEach(str => {
                str.optionsId = "" + str.optionsId;
              });
              let arr = item.answerQuestion.split(",");
              arr.forEach((a, i) => {
                arr[i] = "" + a;
              });
              item.ans = arr;
              item.quesSelect = [];
              item.analysisContent &&
                (item.analysisContent = item.analysisContent.replace(
                  /<img/gi,
                  '<img style="max-width:100%;"'
                ));
              item.content &&
                (item.content = item.content.replace(
                  /<img/gi,
                  '<img style="max-width:100%;"'
                ));
              return;
            } else if (item.type == 5) {
              //简答题
              item.ansText = {
                text: "",
                imageList: []
              };
              item.ques = {
                text: "",
                imageList: []
              };
              item.analysisContent &&
                (item.analysisContent = item.analysisContent.replace(
                  /<img/gi,
                  '<img style="max-width:100%;"'
                ));
              item.content &&
                (item.content = item.content.replace(
                  /<img/gi,
                  '<img style="max-width:100%;"'
                ));

              return;
            } else if (item.type == 4) {
              //案例题
              console.log(item.jsonStr);
              item.ques = [];
              item.tabIndex = "0";
              let ansArr = [];
              item.jsonStr.forEach((json, index) => {
                if (json.type == 1) {
                  ansArr[index] = json.answerQuestion;
                  json.content &&
                    (json.content = json.content.replace(
                      /<img/gi,
                      '<img style="max-width:100%;"'
                    ));
                } else if (json.type == 2) {
                  json.optionsList.forEach(str => {
                    str.optionsId = "" + str.optionsId;
                  });
                  let arr = json.answerQuestion.split(",");
                  arr.forEach((a, i) => {
                    arr[i] = "" + a;
                  });
                  ansArr[index] = arr;
                  json.content &&
                    (json.content = json.content.replace(
                      /<img/gi,
                      '<img style="max-width:100%;"'
                    ));
                } else if (json.type == 3) {
                  ansArr[index] = json.answerQuestion;
                  json.content &&
                    (json.content = json.content.replace(
                      /<img/gi,
                      '<img style="max-width:100%;"'
                    ));
                } else if (json.type == 5) {
                  ansArr[index] = {
                    text: "",
                    imageList: []
                  };
                  json.ansText = {
                    text: "",
                    imageList: []
                  };
                  json.ques = {
                    text: "",
                    imageList: []
                  };
                  json.content &&
                    (json.content = json.content.replace(
                      /<img/gi,
                      '<img style="max-width:100%;"'
                    ));
                }
              });

              item.ans = ansArr;
              return;
            }
            item.analysisContent &&
              (item.analysisContent = item.analysisContent.replace(
                /<img/gi,
                '<img style="max-width:100%;"'
              ));
            item.content &&
              (item.content = item.content.replace(
                /<img/gi,
                '<img style="max-width:100%;"'
              ));
            item.ques = "";
            item.ans = item.answerQuestion;
          });
          this.questionList = res.data.questionList;
          this.lastCount = this.questionList.length;
          this.getCollectInfo(this.current);
          await this.examRecord();
        });
    },
    /**
     * 记录总题数,获取recordId
     * hasSpecial (是否包含简答和案例) true 包含  false 不包含
     */
    examRecord(hasSpecial) {
      return new Promise(resolve => {
        let self = this;
        let questionList = 0;
        // if(!hasSpecial) {
        this.questionList.forEach((item, index) => {
          if (item.type == 1 || item.type == 2 || item.type == 3) {
            questionList++;
          }
        });
        // } else {
        // 	questionList = this.questionList.length;
        // }

        this.$request
          .examRecord({
            fromPlat:2,//"来源平台 1小程序 2PC网站 3h5"
            chapterExamId: this.chapterId || 0,
            moduleExamId: this.moduleId || 0,
            examId: this.examId,
            goodsId: this.goodsId,
            orderGoodsId: this.orderGoodsId,
            totalQuestionNum: questionList,
            allQuestionNum: this.questionList.length,
            doMode: this.doMode,
            simulateExamId: this.simulateExamId
          })
          .then(res => {
            this.recordId = res.data;

            if (this.bankType == 1) {
              this.examRecordEdit();
              clearInterval(this.postTimer);
              this.postTimer = setInterval(() => {
                this.examRecordEdit();
              }, 5000);
            }
          });
      });
    },

    /**
     * 离开页面统计回答正确题数
     */
    examRecordEdit() {
      clearInterval(this.postTimer);
      clearInterval(this.timer);

      let form = this.calculateScore(this.questionList);

      this.$request
        .examRecordEdit({
          examId: this.examId,
          goodsId: this.goodsId,
          recordId: this.recordId,
          orderGoodsId: this.orderGoodsId,
          moduleExamId: this.moduleId || 0,
          chapterExamId: this.chapterId || 0,
          status: 0,
          ...form
        })
        .then(res => {
          this.punchClock();
        });
    },

    /**
     * 获取试卷类型2考试,1练习
     */
    bankExam() {
      return new Promise(resolve => {
        if (this.examType) {
          this.bankType = 1;
          resolve();
          return;
        }
        this.$request.bankExam(this.examId).then(res => {
          this.bankType = res.data.doType;
          this.examData = res.data;
          if (this.bankType == 2) {
            this.needBack = true;
          }

          resolve();
        });
      });
    },
    /**
     * @param {Object}
     * 单选点击确认
     */
    radioSelect(question, questionIndex, optionsId) {
      // if (this.questionList[questionIndex].ques) return;
      if (this.questionList[questionIndex].ques && this.bankType == 1) {
        return;
      }
      this.$set(this.questionList[questionIndex], "ques", optionsId);
      this.isDoOver();

      // if (
      //   this.questionList[questionIndex].ques !=
      //   this.questionList[questionIndex].ans
      // ) {
      //   this.$request
      //     .examWrongRecord({
      //       orderGoodsId: this.orderGoodsId,
      //       examId: this.examId,
      //       goodsId: this.goodsId,
      //       moduleExamId: this.moduleId || 0,
      //       chapterExamId: this.chapterId || 0,
      //       questionIds: [this.questionList[questionIndex].questionId],
      //       recordId: this.recordId,
      // type 1,
      //     })
      //     .then((res) => {});
      // }
    },

    /**
     * @param {Object}
     * 案例单选点击
     */
    radioSelectChild(questionIndex, jsonIndex, optionsId) {
      // if (this.questionList[questionIndex].ques[jsonIndex]) return;
      if (
        this.questionList[questionIndex].ques[jsonIndex] &&
        this.bankType == 1
      ) {
        return;
      }
      this.$set(this.questionList[questionIndex].ques, jsonIndex, optionsId);
      this.isDoOver();
    },
    /**
     * 多选点击确认
     */
    checkboxSubmit(question, questionIndex) {
      // if (this.questionList[questionIndex].ques) return;
      if (this.questionList[questionIndex].ques && this.bankType == 1) {
        return;
      }
      let arr = [];
      this.questionList[questionIndex].jsonStr.forEach(item => {
        if (item.checked) {
          arr.push(item.optionsId);
        }
      });
      if (!arr.length) {
        delete this.questionList[questionIndex].ques;
        this.$message({
          type: "warning",
          message: "请选择答案"
        });
        return;
      }
      this.$set(this.questionList[questionIndex], "ques", arr);
      this.isDoOver();

      // let isWrong = this.questionList[questionIndex].ques.some((item, i) => {
      //   return this.questionList[questionIndex].ans.indexOf(item) == -1;
      // })
      // // 回答错误
      // if (isWrong) {
      //   this.$request
      //     .examWrongRecord({
      //       orderGoodsId: this.orderGoodsId,
      //       examId: this.examId,
      //       goodsId: this.goodsId,
      //       moduleExamId: this.moduleId || 0,
      //       chapterExamId: this.chapterId || 0,
      //       questionIds: [this.questionList[questionIndex].questionId],
      //       recordId: this.recordId,
      // type 1,
      //     })
      //     .then((res) => {});
      // }
    },
    /**
     * @param {Object}
     * 案例多选确认
     */
    checkboxSubmitChild(questionIndex, ansIndex) {
      // if (this.questionList[questionIndex].ques[ansIndex]) return;
      if (
        this.questionList[questionIndex].ques[ansIndex] &&
        this.bankType == 1
      ) {
        return;
      }
      let arr = [];
      this.questionList[questionIndex].jsonStr[ansIndex].optionsList.forEach(
        item => {
          if (item.checked) {
            arr.push(item.optionsId);
          }
        }
      );

      if (!arr.length) {
        delete this.questionList[questionIndex].ques[ansIndex];
        this.$message({
          type: "warning",
          message: "请选择答案"
        });
        return;
      }

      this.$set(this.questionList[questionIndex].ques, ansIndex, arr);
      this.isDoOver();
    },
    /**
     * 判断点击确认
     */
    judgeSelect(question, questionIndex, index) {
      console.log(this.bankType);
      // if (question.ques) return;
      if (question.ques && this.bankType == 1) {
        return;
      }
      this.$set(
        this.questionList[questionIndex],
        "ques",
        index == 0 ? "1" : "0"
      );
      this.isDoOver();

      // if (
      //   this.questionList[questionIndex].ques !=
      //   this.questionList[questionIndex].ans
      // ) {
      //   this.$request
      //     .examWrongRecord({
      //       orderGoodsId: this.orderGoodsId,
      //       examId: this.examId,
      //       goodsId: this.goodsId,
      //       moduleExamId: this.moduleId || 0,
      //       chapterExamId: this.chapterId || 0,
      //       questionIds: [this.questionList[questionIndex].questionId],
      //       recordId: this.recordId,
      // type 1,
      //     })
      //     .then((res) => {});
      // }
    },
    judgeSelectChild(questionIndex, jsonIndex, index) {
      console.log(this.questionList[questionIndex].ques[jsonIndex]);
      // if (this.questionList[questionIndex].ques[jsonIndex]) return;
      if (
        this.questionList[questionIndex].ques[jsonIndex] &&
        this.bankType == 1
      ) {
        return;
      }
      this.$set(
        this.questionList[questionIndex].ques,
        jsonIndex,
        index == 0 ? "1" : "0"
      );
      this.isDoOver();
    },

    /**
     * 上传图片
     */
    uploadImg(e, question, questionIndex) {
      var file = e.target.files[0];
      if (file.size > 2 * 1024 * 1024) {
        this.$message.warn("图片不得大于2000kb");
        return;
      }
      var type = e.target.value
        .toLowerCase()
        .split(".")
        .splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        e.target.value = "";
        return;
      }

      this.$upload.upload(file, 0).then(res => {
        question.ansText.imageList.push(res);
      });
    },

    /**
     * 案例上传图片
     */
    uploadImgChild(e, questionIndex, jsonIndex) {
      var file = e.target.files[0];
      if (file.size > 2 * 1024 * 1024) {
        this.$message.warn("图片不得大于2000kb");
        return;
      }
      var type = e.target.value
        .toLowerCase()
        .split(".")
        .splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        e.target.value = "";
        return;
      }

      this.$upload.upload(file, 0).then(res => {
        this.questionList[questionIndex].jsonStr[
          jsonIndex
        ].ansText.imageList.push(res);
      });
    },
    isOver(item, index) {
      if (this.questionList[index].ques) {
        if (item.type == 4) {
          //案例题
          let isOver = item.jsonStr.every((jsonItem, indexs) => {
            if (
              jsonItem.type == 1 ||
              jsonItem.type == 2 ||
              jsonItem.type == 3
            ) {
              if (item.ques[indexs]) {
                return true;
              } else {
                return false;
              }
            } else if (jsonItem.type == 5) {
              if (
                item.ques[indexs] &&
                (item.ques[indexs].text || item.ques[indexs].imageList.length)
              ) {
                console.log("chil");
                return true;
              } else {
                return false;
              }
            }
          });

          if (isOver) {
            return true;
          } else {
            return false;
          }
        } else if (item.type == 5) {
          //简答题
          //每一项都相等
          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
            return true;
          }
          //判断
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    ansSubmit(question, questionIndex) {
      if (!question.ansText.text && !question.ansText.imageList.length) {
        this.$message({
          type: "warning",
          message: "请输入内容或上传图片"
        });
        return;
      }

      question.ques.imageList = question.ansText.imageList;
      question.ques.text = question.ansText.text;

      this.isDoOver();

      console.log(question.ques);
    },
    ansSubmitChild(question, questionIndex, jsonIndex) {
      if (
        !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text &&
        !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.imageList
          .length
      ) {
        this.$message({
          type: "warning",
          message: "请输入内容或上传图片"
        });
        return;
      }

      this.$set(this.questionList[questionIndex].ques, jsonIndex, {
        imageList:
          this.questionList[questionIndex].jsonStr[jsonIndex].ansText
            .imageList || [],
        text:
          this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text || ""
      });

      this.isDoOver();
    },

    changeIndex(index) {
      this.current = index;
      this.getCollectInfo(this.current);
    },
    nextQuestion() {
      if (this.current >= this.questionList.length - 1) {
        this.$message({
          type: "warning",
          message: "已经是最后一题了！"
        });
        return;
      }
      this.current++;
      this.getCollectInfo(this.current);
    },
    prevQuestion() {
      if (this.current == 0) {
        this.$message({
          type: "warning",
          message: "已经是第一题了！"
        });
        return;
      } else {
        this.current--;
        this.getCollectInfo(this.current);
      }
    },
    isCheck(item, index) {
      if (item.type === 4) {
        if (
          this.questionList[index].ques &&
          this.questionList[index].ques.length
        ) {
          return true;
        }
      } else {
        if (this.questionList[index].ques) {
          return true;
        }
      }
    },
    isRight(item, index) {
      //单选
      if (this.questionList[index].ques) {
        if (item.type == 1) {
          console.log(
            this.questionList[index].ques == this.questionList[index].ans
          );
          return this.questionList[index].ques == this.questionList[index].ans;
          //多选
        } else if (item.type == 2) {
          //每一项都相等
          return this.questionList[index].ans.every((item, i) => {
            return item == this.questionList[index].ques[i];
          });
          //判断
        } else if (item.type == 3) {
          return this.questionList[index].ques == this.questionList[index].ans;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    isWrong(item, index) {
      if (this.questionList[index].ques) {
        //单选
        if (item.type == 1) {
          return this.questionList[index].ques != this.questionList[index].ans;
          //多选
        } else if (item.type == 2) {
          //每一项都相等
          return this.questionList[index].ques.some((item, i) => {
            return this.questionList[index].ans.indexOf(item) == -1;
          });
          //判断
        } else if (item.type == 3) {
          return this.questionList[index].ques != this.questionList[index].ans;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    isPart(item, index) {
      if (this.questionList[index].ques) {
        if (item.type == 2) {
          let isWrong = this.questionList[index].ques.some((item, i) => {
            return this.questionList[index].ans.indexOf(item) == -1;
          });

          let isRight = this.questionList[index].ans.every((item, i) => {
            return item == this.questionList[index].ques[i];
          });

          if (!isRight && !isWrong) {
            return true;
          }
        }
      } else {
        return false;
      }
    },
    right(bankIndex, ansIndex, option) {
      if (
        this.questionList[bankIndex].ques[ansIndex] &&
        this.questionList[bankIndex].ans[ansIndex]
      ) {
        if (
          this.questionList[bankIndex].ques[ansIndex].indexOf(
            option.optionsId
          ) != -1 ||
          this.questionList[bankIndex].ans[ansIndex].indexOf(
            option.optionsId
          ) != -1
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    wrong(bankIndex, ansIndex, option) {
      if (
        this.questionList[bankIndex].ques[ansIndex] &&
        this.questionList[bankIndex].ans[ansIndex]
      ) {
        if (
          this.questionList[bankIndex].ques[ansIndex].indexOf(
            option.optionsId
          ) != -1 &&
          this.questionList[bankIndex].ans[ansIndex].indexOf(
            option.optionsId
          ) == -1
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    /**
     * 获取已经回答的题目数
     * hasSpecail (是否包含简答和案例)
     */
    questionOverNum(hasSpecail) {
      let count = 0;
      this.questionList.forEach(item => {
        if (item.type == 1 || item.type == 2 || item.type == 3) {
          if (item.ques) {
            count++;
          }
        } else if (item.type == 4) {
          //案例题
          if (hasSpecail) {
            let isOver = item.jsonStr.every((jsonItem, index) => {
              if (
                jsonItem.type == 1 ||
                jsonItem.type == 2 ||
                jsonItem.type == 3
              ) {
                if (item.ques[index]) {
                  return true;
                } else {
                  return false;
                }
              } else if (jsonItem.type == 5) {
                if (
                  item.ques[index] &&
                  (item.ques[index].text || item.ques[index].imageList.length)
                ) {
                  return true;
                } else {
                  return false;
                }
              }
            });

            if (isOver) {
              count++;
              console.log(item, 4441);
            }
          }
        } else if (item.type == 5) {
          //简答题
          if (hasSpecail) {
            if (item.ques && (item.ques.text || item.ques.imageList.length)) {
              console.log(5, item);
              count++;
            }
          }
        }
      });

      return count;
    },
    submit() {
      let ansCount = this.questionOverNum(true); //已答题数
      this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
      //没有答完
      if (this.lastCount > 0) {
        this.$confirm(
          `您还有${this.lastCount}道题未作答， 现在继续作答，还是下次继续？`,
          "提示",
          {
            confirmButtonText: "立即交卷",
            cancelButtonText: "继续做题",
            closeOnClickModal: false,
            closeOnPressEscape: false,
            distinguishCancelAndClose: false,
            showClose: false
          }
        )
          .then(_ => {
            this.examSubmit();
          })
          .catch(_ => {});
        return;
      }

      if (this.bankType == 2) {
        if (this.lastTime > 0) {
          let lastTime = this.countdown(this.lastTime);
          this.$confirm(`时间还剩余${lastTime},确定交卷吗?`, "提示", {
            confirmButtonText: "交卷",
            cancelButtonText: "继续答题",
            closeOnClickModal: false,
            closeOnPressEscape: false,
            distinguishCancelAndClose: false,
            showClose: false
          })
            .then(_ => {
              this.examSubmit();
            })
            .catch(_ => {});
          return;
        }
      }

      this.examSubmit();
    },
    /**
     * @param {Object} second倒计时过滤器
     */
    countdown(second) {
      if (second) {
        let h = parseInt((second / 60 / 60) % 24); //   计算小时
        let m = parseInt((second / 60) % 60); //   计算分数
        let s = parseInt(second % 60); //   计算当前秒数

        if (h < 10) h = "0" + h;
        if (m < 10) m = "0" + m;
        if (s < 10) s = "0" + s;

        return h + ":" + m + ":" + s;
      } else {
        return "";
      }
    },

    /**
     * 交卷，跳转报告页
     */
    examSubmit() {
      this.loading = true;
      clearInterval(this.timer);
      clearInterval(this.postTimer);
      let form = this.calculateScore(this.questionList);
      //交卷 /exam/record/edit
      this.$request
        .examRecordEdit({
          examId: this.examId,
          goodsId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
          recordId: this.recordId,
          status: 1,
          moduleExamId: this.moduleId || 0,
          chapterExamId: this.chapterId || 0,
          examTime: parseInt(this.allTimes),
          doTime: parseInt(this.allTimes) - parseInt(this.lastTime),
          ...form
        })
        .then(res => {
          this.isSubmit = true;
          this.loading = false;
          this.$message({
            type: "success",
            message: "交卷成功"
          });
          this.punchClock();
          setTimeout(() => {
            this.$router.replace({
              path: "/bank-report/" + this.goodsId,
              query: {
                orderGoodsId: this.orderGoodsId,
                chapterId: this.chapterId,
                moduleId: this.moduleId,
                examId: this.examId,
                recordId: this.recordId,
                examType: this.examType
              }
            });
          }, 1000);
        })
        .catch(err => {
          this.loading = false;
        });

      //错题集id提交（客观题）/exam/wwrong/record
      this.$request
        .examWrongRecord({
          orderGoodsId: this.orderGoodsId,
          examId: this.examId,
          goodsId: this.goodsId,
          questionIds: form.questionIds,
          recordId: this.recordId,
          type: 1,
          doMode: this.doMode,
          courseType: 1
        })
        .then(res => {})
        .catch(err => {});
    },
    // 打卡
    punchClock() {
      if (this.examType != 1) {
        return;
      }
      this.$request.punchClock({
        chapterExamId: this.chapterId,
        examId: this.examId,
        goodsId: this.goodsId,
        moduleExamId: this.moduleId,
        recordTime: new Date(new Date().setHours(0, 0, 0, 0)) / 1000
      });
    },
    /**
     * 交卷，不用跳转
     */
    leaveNow() {
      clearInterval(this.timer);
      clearInterval(this.postTimer);
      let score = 0; //计算总分
      let reportStatus = 0;
      let number = 0; //做对的题目数量
      let doQuestionNum = 0; //做过的题目数量
      let allScore = 0; //总分
      let passScore = 0;
      let doWrongQuestionIds = []; //错题和未做题id(客观题)
      let doQuestionIds = []; //做过的题目id
      let rightQuestionIds = []; //做对的题目id
      let lessQuestionNum = 0;
      console.log(111);
      this.questionList.forEach((item, index) => {
        passScore = item.passScore;
        if (item.type == 1) {
          //正确
          if (item.ques == item.ans) {
            item.scoreResult = item.score;
            score += item.score;
            number++;
            rightQuestionIds.push(item.questionId);
          } else {
            //错误
            item.scoreResult = 0;
            if (item.ques) {
              doWrongQuestionIds.push(item.questionId);
            }
          }
          allScore += item.score;
          if (item.ques) {
            doQuestionNum++;
            doQuestionIds.push(item.questionId);
          }
        } else if (item.type == 2) {
          let isRight =
            item.ans &&
            item.ans.every((quesItem, quesIndex) => {
              if (item.ques) {
                return item.ques[quesIndex] == item.ans[quesIndex];
              } else {
                return false;
              }
            });

          if (isRight) {
            score += item.score;
            number++;
            item.scoreResult = item.score;
            rightQuestionIds.push(item.questionId);
          } else {
            let hasPart = false;
            let checkboxScore = 1; //获取单题总分数
            item.ques &&
              item.ques.forEach((ques, quesIndex) => {
                //选错一个全扣
                if (item.ques) {
                  if (item.ans.indexOf(item.ques[quesIndex]) == -1) {
                    checkboxScore = 0;
                  }
                } else {
                  checkboxScore = 0;
                }
              });
            console.log(checkboxScore, "checkboxScore1");

            //没选错
            if (checkboxScore) {
              checkboxScore = 0;
              item.ans.forEach((ans, quesIndex) => {
                //漏选扣一部分，对n题给n X partScore 分
                if (item.ques) {
                  if (item.ques.indexOf(item.ans[quesIndex]) != -1) {
                    checkboxScore += item.partScore;
                    hasPart = true;
                  }
                } else {
                  checkboxScore = 0;
                }
              });
            }
            console.log(checkboxScore, "checkboxScore2");

            if (!hasPart) {
              //0分
              item.scoreResult = 0;
              if (item.ques) {
                doWrongQuestionIds.push(item.questionId);
              }
            } else {
              //部分分
              // number++;
              lessQuestionNum++;
              // doWrongQuestionIds.push(item.questionId);
              item.scoreResult = checkboxScore;
              score += checkboxScore;
              // rightQuestionIds.push(item.questionId)
            }
          }
          allScore += item.score;
          if (item.ques && item.ques.length) {
            doQuestionNum++;
            doQuestionIds.push(item.questionId);
          }
        } else if (item.type == 3) {
          if (item.ques == item.ans) {
            item.scoreResult = item.score;
            score += item.score;
            number++;
            rightQuestionIds.push(item.questionId);
          } else {
            item.scoreResult = 0;
            if (item.ques) {
              doWrongQuestionIds.push(item.questionId);
            }
          }
          allScore += item.score;
          if (item.ques) {
            doQuestionNum++;
            doQuestionIds.push(item.questionId);
          }
        } else if (item.type == 4) {
          allScore += item.score;
          if (item.ques && item.ques.length) {
            doQuestionNum++;
            doQuestionIds.push(item.questionId);
          }
        } else if (item.type == 5) {
          allScore += item.score;
          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
            doQuestionNum++;
            doQuestionIds.push(item.questionId);
          }
        }
      });

      //大于及格
      if (score >= passScore) {
        reportStatus = 1;
      } else {
        reportStatus = 0;
      }

      console.log(333);
      //交卷
      this.$request
        .examRecordEdit({
          examId: this.examId,
          goodsId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
          reportStatus: reportStatus,
          recordId: this.recordId,
          rightQuestionNum: number,
          lessQuestionNum: lessQuestionNum,
          status: 1,
          moduleExamId: this.moduleId || 0,
          chapterExamId: this.chapterId || 0,
          doQuestionIds: doQuestionIds.join(","),
          rightQuestionIds: rightQuestionIds.join(","),
          doQuestionNum: doQuestionNum,
          performance: score,
          totalScore: allScore,
          examTime: parseInt(this.allTimes),
          doTime: parseInt(this.allTimes) - parseInt(this.lastTime),
          historyExamJson: JSON.stringify(this.questionList)
        })
        .then(res => {
          this.punchClock();
        });

      console.log(222);
      //错题集id提交（客观题）
      this.$request
        .examWrongRecord({
          orderGoodsId: this.orderGoodsId,
          examId: this.examId,
          goodsId: this.goodsId,
          questionIds: doWrongQuestionIds,
          recordId: this.recordId,
          type: 1,
          doMode: this.doMode,
          courseType: 1
        })
        .then(res => {
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    }
  },
  computed: {
    param() {
      return {
        examId: this.examId,
        questionId: this.questionList[this.current]
          ? this.questionList[this.current].questionId
          : undefined,
        goodsId: this.goodsId,
        orderGoodsId: this.orderGoodsId,
        collectQuestionId: this.collectList[this.current]
          ? this.collectList[this.current].collectQuestionId
          : undefined,
        doMode: this.doMode
      };
    },
    doMode() {
      return this.simulateStatus ? 3 : this.number ? 2 : 1;
    },
    examType() {
      return this.$route.query.examType || (this.number ? 2 : 0);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.course-exam {
  .section {
    overflow: hidden;

    &__header {
      height: 20px;
      margin-top: 20px;
    }

    &__body {
      .explain-record {
        &__body {
          margin-bottom: 20px;
          border: 1px solid #eee;

          .left-box {
            position: relative;
            float: left;
            width: 970px;
            min-height: 630px;
            border: 1px solid #eee;

            &__body {
              .question {
                padding: 12px 0 0 12px;
                display: flex;
                flex-direction: column;
                height: 100%;

                &__title {
                  padding-left: 12px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #333333;
                  line-height: 24px;
                }

                &__desc {
                  padding-left: 12px;
                  margin-top: 20px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #666666;
                  line-height: 24px;
                  text-align: justify;

                  /deep/ img {
                    max-width: 100% !important;
                  }
                }

                &__content {
                  /deep/ .el-tabs__item {
                    height: 40px;
                    line-height: 40px;
                  }

                  .question__content {
                    height: auto;
                    overflow: auto;
                  }

                  .question-list {
                    padding: 24px 0 24px 24px;
                    border-bottom: 1px solid #eee;

                    .checkbox,
                    .radio {
                      cursor: pointer;
                      margin-right: 24px;
                      padding: 0 24px;
                      display: flex;
                      align-items: center;
                      margin-top: 2px;
                      min-height: 40px;
                      padding-top: 10px;
                      padding-bottom: 10px;
                      background: #f5f9ff;
                      border-radius: 8px;
                      box-sizing: border-box;

                      &.right {
                        background: #37c65b;
                      }

                      &.wrong {
                        background: #ff3a30;
                      }

                      &.user_choose {
                        background: #007aff;
                      }
                    }

                    &.textarea {
                      margin-right: 12px;

                      .upload {
                        margin-top: 10px;

                        &__imgs {
                          margin-right: 10px;
                          width: 80px;
                          height: 80px;
                          background: #ffffff;
                          border: 1px solid #eeeeee;
                          border-radius: 4px;
                          position: relative;
                          display: flex;
                          float: left;
                          align-items: center;
                          justify-content: center;

                          img {
                            max-width: 100%;
                            max-height: 100%;
                          }
                        }

                        &__btn {
                          margin-right: 10px;
                          width: 80px;
                          height: 80px;
                          background: #ffffff;
                          border: 1px solid #eeeeee;
                          border-radius: 4px;
                          position: relative;
                          display: flex;
                          float: left;
                          align-items: center;
                          justify-content: center;
                          flex-direction: column;

                          .icon {
                            font-size: 20px;
                            color: #3f8dfd;
                          }

                          p {
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #999999;
                            line-height: 24px;
                          }

                          input {
                            position: absolute;
                            left: 0;
                            top: 0;
                            display: block;
                            width: 100%;
                            height: 100%;
                            opacity: 0;
                          }
                        }
                      }
                    }

                    /deep/
                      .el-checkbox__input.is-checked
                      + .el-checkbox__label {
                      color: #000 !important;
                    }

                    .el-checkbox__input.is-disabled + span.el-checkbox__label {
                      color: #000;
                    }

                    /deep/ .el-checkbox {
                      white-space: normal;
                    }
                  }

                  .answer-list {
                    height: 40px;
                    // border-top: 1px solid #eee;
                    border-bottom: 1px solid #eee;
                    // margin-top: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 24px;

                    &__left {
                      font-size: 16px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #333333;
                      line-height: 24px;
                    }

                    &__right {
                      font-size: 16px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #333333;
                      line-height: 24px;
                    }
                  }

                  .explain-list {
                    padding: 12px 24px;

                    &__header {
                      font-size: 16px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #666666;
                      line-height: 24px;
                    }

                    &__body {
                      margin-top: 12px;
                      font-size: 16px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #666666;
                      line-height: 24px;
                    }

                    .upload {
                      margin-top: 10px;

                      &__imgs {
                        margin-right: 10px;
                        width: 80px;
                        height: 80px;
                        background: #ffffff;
                        border: 1px solid #eeeeee;
                        border-radius: 4px;
                        position: relative;
                        display: flex;
                        float: left;
                        align-items: center;
                        justify-content: center;

                        img {
                          max-width: 100%;
                          max-height: 100%;
                        }
                      }
                    }
                  }

                  .question {
                    padding-bottom: 58px;
                  }
                }

                &__btns {
                  position: relative;
                  height: 32px;

                  .submit {
                    cursor: pointer;
                    margin: 0 auto;
                    width: 140px;
                    height: 32px;
                    padding: 0;
                    color: #fff;
                    background: #3f8dfd;
                    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
                    border-radius: 16px;
                    text-align: center;
                    line-height: 32px;
                    font-size: 16px;
                  }
                }
              }
            }

            &__footer {
              height: 40px;
              display: flex;
              justify-content: space-around;
              align-items: center;

              .btn {
                cursor: pointer;
                width: 140px;
                height: 32px;
                background: #ffffff;
                border: 1px solid #3f8dfd;
                border-radius: 16px;
                line-height: 32px;
                text-align: center;
                color: #3f8dfd;
              }
            }
          }

          .right-box {
            float: right;
            width: 299px;
            border-right: 1px solid #eee;

            &__header {
              height: 40px;
              line-height: 40px;
              border-bottom: 1px solid #eeeeee;

              .back-btn {
                display: block;
                margin: 0 auto;
                width: 160px;
              }

              .title {
                float: left;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #333333;
              }

              .time {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #666666;
                float: right;
              }
            }

            &__body {
              height: 510px;
              border-bottom: 1px solid #eee;

              .card {
                &__note {
                  display: flex;
                  height: 64px;
                  align-items: center;
                  border-bottom: 1px solid #eee;
                  flex-wrap: wrap;

                  .item {
                    display: flex;
                    align-items: center;
                    margin-left: 10px;
                    width: 84px;
                    font-size: 12px;

                    .box {
                      margin-right: 5px;
                      width: 16px;
                      height: 16px;
                      border-radius: 4px;

                      &.white {
                        background: #ffffff;
                        border: 1px solid #eeeeee;
                      }

                      &.green {
                        background: #37c65b;
                      }

                      &.red {
                        background: #ff3a30;
                      }

                      &.yellow {
                        background: #ffc53d;
                      }

                      &.blue,
                      &.check_ans {
                        background: #3f8dfd;
                      }
                    }
                  }
                }

                &__content {
                  height: 440px;
                  overflow-y: scroll;

                  &::-webkit-scrollbar {
                    width: 6px;
                  }

                  &::-webkit-scrollbar-track {
                    background-color: #fff;
                    -webkit-border-radius: 2em;
                    -moz-border-radius: 2em;
                    border-radius: 2em;
                  }

                  &::-webkit-scrollbar-thumb {
                    background-color: #eeeeee;
                    -webkit-border-radius: 2em;
                    -moz-border-radius: 2em;
                    border-radius: 2em;
                  }

                  .list {
                    display: flex;
                    flex-wrap: wrap;

                    .item {
                      width: 40px;
                      height: 40px;
                      border-radius: 10px;
                      text-align: center;
                      line-height: 40px;
                      margin-left: 16px;
                      margin-top: 16px;
                      cursor: pointer;

                      &.white {
                        line-height: 38px;
                        color: #333333;
                        background: #ffffff;
                        border: 1px solid #eeeeee;
                      }

                      &.green {
                        color: #fff;
                        background: #37c65b;
                      }

                      &.red {
                        color: #fff;
                        background: #ff3a30;
                      }

                      &.blue,
                      &.check_ans {
                        color: #fff;
                        background: #3f8dfd;
                      }

                      &.yellow {
                        background: #ffc53d;
                      }

                      &.disabled {
                        cursor: not-allowed;
                        line-height: 38px;
                        color: #eeeeee;
                        background: #ffffff;
                        border: 1px solid #eeeeee;
                      }
                    }
                  }
                }
              }
            }

            &__footer {
              border-bottom: 1px solid #eee;
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: center;

              .submit {
                cursor: pointer;
                width: 140px;
                height: 32px;
                padding: 0;
                box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
                border-radius: 16px;
                line-height: 32px;
                text-align: center;
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }

  .take-photo {
    /deep/ .el-dialog__header {
      display: none;
    }

    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__close {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: -28px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #eee;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    &__header {
      height: 40px;
      border-bottom: 1px solid #eee;
      line-height: 40px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      padding-left: 24px;
    }

    &__body {
      height: 400px;
      padding: 40px 24px;

      .left-box {
        width: 336px;
        float: left;

        .title {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ff3b30;
          line-height: 24px;
        }

        .content {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          line-height: 28px;
          margin-top: 32px;
        }
      }

      .right-box {
        float: right;
        width: 400px;
        height: 300px;

        video {
          width: 100%;
          height: 100%;
        }
      }
    }

    &__footer {
      height: 90px;
      border-top: 1px solid #eee;
      text-align: center;

      .take {
        display: inline-block;
        width: 200px;
        height: 40px;
        padding: 0;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        margin: 24px auto;
      }
    }
  }
}
</style>