zc_saas_pc/src/pages/person-center/free-bank/bank-explain-detail/index.vue

<template>
  <div class="bank-explain">
    <section class="section">
      <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__header">
            <el-tabs :value="activeName" @tab-click="tabChange">
              <el-tab-pane label="对题记录" name="1"></el-tab-pane>
              <el-tab-pane label="错题记录" name="2"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="explain-record__body">
            <div class="left-box">
              <div class="left-box__footer">
                <div class="btn" @click="prevQuestion">上一题</div>
                <div class="btn" @click="nextQuestion">下一题</div>
              </div>
              <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"
                        >
                          <div>{{ ast[index] }}. {{ item.content }}</div>
                        </div>
                      </div>
                      <div class="question-list" v-if="question.ques">
                        <div
                          class="radio"
                          :class="{
                            right:
                              item.optionsId == question.ques ||
                              item.optionsId == question.ans,
                            wrong:
                              item.optionsId == question.ques &&
                              question.ques != question.ans,
                          }"
                          v-for="(item, index) in question.jsonStr"
                          :key="index"
                        >
                          <div>{{ ast[index] }}. {{ item.content }}</div>
                        </div>
                      </div>
                      <div class="answer-list" v-if="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="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>
                  </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>
                        </el-checkbox>
                      </div>
                      <div class="question-list" v-if="question.ques">
                        <el-checkbox
                          disabled
                          class="checkbox"
                          :class="{
                            right:
                              question.ques.indexOf(item.optionsId) != -1 ||
                              question.ans.indexOf(item.optionsId) != -1,
                            wrong:
                              question.ques.indexOf(item.optionsId) != -1 &&
                              question.ans.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>
                        </el-checkbox>
                      </div>
                      <div class="answer-list" v-if="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="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>
                  </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"
                        >
                          <div>{{ ast[index] }}. {{ item }}</div>
                        </div>
                      </div>
                      <div class="question-list" v-if="question.ques">
                        <div
                          class="radio"
                          :class="{
                            right:
                              index == question.ques || index == question.ans,
                            wrong:
                              index == question.ques &&
                              question.ques != question.ans,
                          }"
                          v-for="(item, index) in judge"
                          :key="index"
                        >
                          <div>{{ ast[index] }}. {{ item }}</div>
                        </div>
                      </div>
                      <div class="answer-list" v-if="question.ques">
                        <div class="answer-list__left">
                          题目答案：{{ ast[question.ans] }}
                        </div>
                        <!-- <div class="answer-list__left">
                          我的答案：{{ ast[question.ques] }}
                        </div> -->
                      </div>
                      <div class="explain-list" v-if="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>
                  </div>
                  <div
                    class="question"
                    v-if="question.type == 4 && current == questionIndex"
                    :key="questionIndex"
                  >
                    <div class="question__title">
                      {{ questionIndex + 1 }}、案例题
                    </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"
                                >
                                  <div>
                                    {{ ast[index] }}. {{ item.content }}
                                  </div>
                                </div>
                              </div>
                              <div
                                class="question-list"
                                v-if="question.ques[jsonIndex]"
                              >
                                <div
                                  class="radio"
                                  :class="{
                                    right:
                                      item.optionsId ==
                                        question.ques[jsonIndex] ||
                                      item.optionsId == question.ans[jsonIndex],
                                    wrong:
                                      item.optionsId ==
                                        question.ques[jsonIndex] &&
                                      question.ques[jsonIndex] !=
                                        question.ans[jsonIndex],
                                  }"
                                  v-for="(item, index) in json.optionsList"
                                  :key="index"
                                >
                                  <div>
                                    {{ ast[index] }}. {{ item.content }}
                                  </div>
                                </div>
                              </div>
                              <div
                                class="answer-list"
                                v-if="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="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>
                                </el-checkbox>
                              </div>
                              <div
                                class="question-list"
                                v-if="question.ques[jsonIndex]"
                              >
                                <el-checkbox
                                  disabled
                                  class="checkbox"
                                  :class="{
                                    right:
                                      question.ques[jsonIndex].indexOf(
                                        item.optionsId
                                      ) != -1 ||
                                      question.ans[jsonIndex].indexOf(
                                        item.optionsId
                                      ) != -1,
                                    wrong:
                                      question.ques[jsonIndex].indexOf(
                                        item.optionsId
                                      ) != -1 &&
                                      question.ans[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>
                                </el-checkbox>
                              </div>
                              <div
                                class="answer-list"
                                v-if="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="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="!question.ques[jsonIndex]"
                                class="submit"
                              >
                                确认答案
                              </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"
                                >
                                  <div>{{ ast[index] }}. {{ item }}</div>
                                </div>
                              </div>
                              <div
                                class="question-list"
                                v-if="question.ques[jsonIndex]"
                              >
                                <div
                                  class="radio"
                                  :class="{
                                    right:
                                      index == question.ques[jsonIndex] ||
                                      index == question.ans[jsonIndex],
                                    wrong:
                                      index == question.ques[jsonIndex] &&
                                      question.ques[jsonIndex] !=
                                        question.ans[jsonIndex],
                                  }"
                                  v-for="(item, index) in judge"
                                  :key="index"
                                >
                                  <div>{{ ast[index] }}. {{ item }}</div>
                                </div>
                              </div>
                              <div
                                class="answer-list"
                                v-if="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="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="
                                  !(
                                    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
                                      :src="$tools.splitImgHost(img, true)"
                                      alt=""
                                    />
                                  </div>
                                  <div class="upload__btn">
                                    <i class="el-icon-plus icon"></i>
                                    <p>上传图片</p>
                                  </div>
                                </div>
                              </div>
                              <div
                                class="explain-list"
                                v-if="
                                  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
                                        :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>
                          </div>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                    <div class="question__btns"></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="
                          !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 :src="$tools.splitImgHost(img, true)" alt="" />
                          </div>
                          <div class="upload__btn">
                            <i class="el-icon-plus icon"></i>
                            <p>上传图片</p>
                          </div>
                        </div>
                      </div>
                      <div
                        class="explain-list"
                        v-if="
                          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
                                :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>
                  </div>
                </template>
              </div>
            </div>
            <div class="right-box">
              <div class="right-box__header">答题卡</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: isRight(item, index),
                          red: isWrong(item, index),
                          yellow: isPart(item, index),
                          blue: isOver(item, index),
                        }"
                        @click="changeIndex(index)"
                      >
                        {{ index + 1 }}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "BankExplain",
  components: {},
  data() {
    return {
      current: 0,
      questionList: [],
      activeName: "1",
      goodsId: "",
      orderGoodsId: "",
      examId: "",
      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",
      ],
    };
  },
  mounted() {
    this.orderGoodsId = this.$route.query.orderGoodsId;
    this.examId = this.$route.query.examId;
    this.goodsId = this.$route.params.goodsId;

    if (this.activeName == "1") {
      this.examRecordRightList();
    } else {
      this.examRecordWrongList();
    }
  },
  methods: {
    changeIndex(index) {
      this.current = index;
    },
    tabChange(e) {
      if (this.activeName == e.name) return;
      this.activeName = e.name;
      if (this.activeName == "1") {
        this.examRecordRightList();
      } else {
        this.examRecordWrongList();
      }
    },
    /**
     * 获取错题列表
     */
    examRecordWrongList() {
      this.$request
        .examRecordWrongList({
          examId: this.examId,
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          res.rows.forEach((item, index) => {
            if (typeof item.jsonStr == "string") {
              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.ques = item.ans;
                return;
              } else if (item.type == 5) {
                item.ansText = {
                  text: "",
                  imageList: [],
                };

                item.ques = {
                  text: item.analysisContent,
                  imageList: [],
                };

                return;
              } else if (item.type == 4) {
                console.log(item.jsonStr);
                item.ques = [];
                item.current = 0;
                let ansArr = [];
                item.jsonStr.forEach((json, index) => {
                  if (json.type == 1) {
                    ansArr[index] = json.answerQuestion;
                  } 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;
                  } else if (json.type == 3) {
                    ansArr[index] = json.answerQuestion;
                  } else if (json.type == 5) {
                    ansArr[index] = {
                      text: "",
                      imageList: [],
                    };
                    json.ansText = {
                      text: "",
                      imageList: [],
                    };
                  }
                });

                item.ans = ansArr;
                item.ques = item.ans;
                return;
              }

              item.ans = item.answerQuestion;
              item.ques = item.ans;
            } else {
              item.ques = item.ans;
            }
          });
          this.current = 0;
          this.questionList = res.rows;
        });
    },
    /**
     * 获取对题列表
     */
    examRecordRightList() {
      this.$request
        .examRecordRightList({
          examId: this.examId,
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          res.rows.forEach((item, index) => {
            if (typeof item.jsonStr == "string") {
              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.ques = item.ans;
                return;
              } else if (item.type == 5) {
                item.ansText = {
                  text: "",
                  imageList: [],
                };

                item.ques = {
                  text: item.analysisContent,
                  imageList: [],
                };

                return;
              } else if (item.type == 4) {
                console.log(item.jsonStr);
                item.ques = [];
                item.current = 0;
                let ansArr = [];
                item.jsonStr.forEach((json, index) => {
                  if (json.type == 1) {
                    ansArr[index] = json.answerQuestion;
                  } 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;
                  } else if (json.type == 3) {
                    ansArr[index] = json.answerQuestion;
                  } else if (json.type == 5) {
                    ansArr[index] = {
                      text: "",
                      imageList: [],
                    };
                    json.ansText = {
                      text: "",
                      imageList: [],
                    };
                  }
                });

                item.ans = ansArr;
                item.ques = item.ans;
                return;
              }

              item.ans = item.answerQuestion;
              item.ques = item.ans;
            } else {
              item.ques = item.ans;
            }
          });

          this.current = 0;
          this.questionList = res.rows;
        });
    },
    changeQuestion(index) {
      this.questionIndex = index;
    },
    nextQuestion() {
      if (this.current >= this.questionList.length - 1) {
        this.$message({
          type: "warning",
          message: "已经是最后一题了！",
        });
        return;
      }
      this.current++;
    },
    prevQuestion() {
      if (this.current == 0) {
        this.$message({
          type: "warning",
          message: "已经是第一题了！",
        });
        return;
      } else {
        this.current--;
      }
    },
    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;
      }
    },
    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;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bank-explain {
  .section {
    overflow: hidden;
    &__header {
      height: 20px;
      margin-top: 20px;
    }

    &__body {
      .explain-record {
        &__header {
        }

        &__body {
          .left-box {
            float: left;
            width: 810px;
            border-right: 1px solid #eee;

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

              .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;

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

                &__content {
                  /deep/ .el-tabs__item {
                    padding: 0 20px !important;
                    height: 40px;
                    line-height: 40px;
                  }

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

                  .question-list {
                    padding: 24px 0 0 24px;
                    .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;
                      }
                    }
                    &.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;
                    }
                    /deep/
                      .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%;
                        }
                      }
                    }
                  }
                }

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

                  .collect {
                    cursor: pointer;
                    position: absolute;
                    right: 0;
                    top: 5px;
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #3f8dfd;
                    line-height: 24px;
                  }
                }
              }
            }

            &__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;

            &__header {
              height: 40px;
              line-height: 40px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              text-align: center;
              border-bottom: 1px solid #eeeeee;
            }

            &__body {
              height: 490px;
              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 {
                        background: #3f8dfd;
                      }
                    }
                  }
                }

                &__content {
                  height: 386px;
                  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 {
                        border: 1rpx solid #eeeeee;
                        color: #fff;
                        background: #3f8dfd;
                      }
                      &.yellow {
                        background: #ffc53d;
                      }

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

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

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