jpcj-xcx/src/components/m-do-topic/m-do-topic.vue

<template>
  <view>
    <countDown :time="examTime" @change="getUseTime" v-if="type == 'singleTest' || type == 'exam'"></countDown>
    <view v-if="!hiddenMode" class="mode">
      <view
        @click="
          () => {
            createOrderProblemList();
            mode = 0;
          }
        "
        :class="{
          'mode-item_select': mode == 0,
        }"
        class="mode-item"
        >顺序练习</view
      >
      <view
        @click="
          () => {
            createRandomProblemList();
            mode = 1;
          }
        "
        :class="{
          'mode-item_select': mode == 1,
        }"
        class="mode-item"
        >随机练习</view
      >
      <view
        @click="
          () => {
            createCompleteProblemList();
            mode = 2;
          }
        "
        :class="{
          'mode-item_select': mode == 2,
        }"
        class="mode-item"
        >背题模式</view
      >
      <view
        :class="{
          'mode-item_select': isAutoReadTopics,
        }"
        @click="
          () => {
            isAutoReadTopics = !isAutoReadTopics;
            isAutoReadTopics ? playCurrentIssue() : stopAudio();
          }
        "
        class="mode-item"
        >自动读题</view
      >
    </view>
    <view class="divider"></view>
    <view class="problem-box">
      <span class="problem-type">{{
        problemList[problemListIndex].questionType | questionType
      }}</span>
      <!-- <text>{{ problemListIndex + 1 }}、</text> -->
      <text class="problem-issue"
        >{{ problemListIndex + 1 }}、{{
          problemList[problemListIndex].issue
        }}</text
      >
      <view v-if="problemList[problemListIndex].image" class="problem-img">
        <image
          mode="widthFix"
          :src="problemList[problemListIndex].image"
        ></image>
      </view>
      <!-- #ifdef MP-WEIXIN -->
      <!-- 单项选择 -->
      <view
        v-if="
          problemList[problemListIndex].questionType < 3 &&
          !problemList[problemListIndex].isCompleted
        "
        class="problem-ops"
      >
        <van-radio-group
          :value="problemList[problemListIndex].userAnswer"
          :max="1"
          @change="changeRadioGroup"
        >
          <van-radio
            :value="problemList[problemListIndex].userAnswer === item.value"
            class="problem-checkbox"
            use-icon-slot
            v-for="(item, index) in problemList[problemListIndex].optsArr"
            :key="index"
            :name="item.value"
          >
            <text>{{ item.value }}</text>
            <view
              class="problem-op"
              :class="{
                'problem-op_selected':
                  problemList[problemListIndex].userAnswer === item.value,
              }"
              slot="icon"
              >{{ numberToLetter(index) }}</view
            >
          </van-radio>
        </van-radio-group>
      </view>
      <view
        v-if="
          problemList[problemListIndex].questionType < 3 &&
          problemList[problemListIndex].isCompleted
        "
      >
        <view
          v-for="(item, index) in problemList[problemListIndex].optsArr"
          :key="index"
          class="problem-select"
        >
          <icon
            v-if="item.isAnswer && item.selected"
            class="icon-box-img"
            type="success"
            color="#06c05f"
            size="37"
          ></icon>
          <icon
            v-if="!item.isAnswer && item.selected"
            class="icon-box-img"
            type="clear"
            color="red"
            size="37"
          ></icon>
          <text v-if="!item.isAnswer && !item.selected" class="problem-op">{{
            numberToLetter(index)
          }}</text>
          <text
            v-if="item.isAnswer && !item.selected"
            class="problem-op problem-op_green"
            >{{ numberToLetter(index) }}</text
          >
          <view style="width: 8px"></view>
          <text style="font-weight: 500" class="problem-opAnswer">{{
            item.value
          }}</text>
        </view>
      </view>

      <!-- 多项选择 -->
      <view
        v-if="
          problemList[problemListIndex].questionType == 3 &&
          !problemList[problemListIndex].isCompleted
        "
        class="problem-ops"
      >
        <van-checkbox-group
          :value="problemList[problemListIndex].userAnswer"
          :max="4"
          @change="changeCheckboxGroup"
        >
          <van-checkbox
            :value="
              problemList[problemListIndex].userAnswer.includes(item.value)
            "
            class="problem-checkbox"
            use-icon-slot
            v-for="(item, index) in problemList[problemListIndex].optsArr"
            :key="index"
            :name="item.value"
          >
            <text>{{ item.value }}</text>
            <view
              class="problem-op"
              :class="{
                'problem-op_selected': item.selected,
              }"
              slot="icon"
              >{{ numberToLetter(index) }}</view
            >
          </van-checkbox>
        </van-checkbox-group>
        <view class="flex-center mt30 pb16">
          <van-button
            @click="confirmMult"
            color="#498ef5"
            round
            custom-style="width:600rpx"
            type="primary"
            >确定</van-button
          >
        </view>
      </view>
      <view
        class="problem-ops"
        v-if="
          problemList[problemListIndex].questionType == 3 &&
          problemList[problemListIndex].isCompleted
        "
      >
        <view
          v-for="(item, index) in problemList[problemListIndex].optsArr"
          :key="index"
          class="problem-select"
        >
          <icon
            v-if="item.isAnswer && item.selected"
            class="icon-box-img"
            type="success"
            color="#06c05f"
            size="37"
          ></icon>
          <icon
            v-if="!item.isAnswer && item.selected"
            class="icon-box-img"
            type="clear"
            size="37"
            color="red"
          ></icon>
          <text v-if="!item.isAnswer && !item.selected" class="problem-op">{{
            numberToLetter(index)
          }}</text>
          <text
            v-if="item.isAnswer && !item.selected"
            class="problem-op problem-op_green"
            >{{ numberToLetter(index) }}</text
          >
          <view style="width: 8px"></view>
          <text class="problem-opAnswer">{{ item.value }}</text>
        </view>
      </view>
      <!-- #endif -->

      <!-- #ifdef MP-TOUTIAO -->
      <!-- 判断 -->
      <view
        v-if="
          problemList[problemListIndex].questionType == 1 &&
          !problemList[problemListIndex].isCompleted
        "
        class="problem-ops"
      >
        <m-radio-group
          @change="changeRadioGroup"
          :value.sync="problemList[problemListIndex].userAnswer"
        >
          <m-radio
            :value="judgMap[item.value]"
            :item="item"
            :useIconSlot="true"
            :key="index"
            :name="numberToLetter(index)"
            v-for="(item, index) in problemList[problemListIndex].optsArr"
          >
          </m-radio>
        </m-radio-group>
      </view>
      <view
        class="problem-ops"
        v-if="
          problemList[problemListIndex].questionType == 1 &&
          problemList[problemListIndex].isCompleted
        "
      >
        <view
          v-for="(item, index) in problemList[problemListIndex].optsArr"
          :key="index"
          class="problem-select"
        >
          <icon
            v-if="item.isAnswer && item.selected"
            class="icon-box-img"
            type="success"
            color="#06c05f"
            size="37"
          ></icon>
          <icon
            v-if="!item.isAnswer && item.selected"
            class="icon-box-img"
            type="clear"
            size="37"
          ></icon>
          <text v-if="!item.isAnswer && !item.selected" class="problem-op">{{
            numberToLetter(index)
          }}</text>
          <text
            v-if="item.isAnswer && !item.selected"
            class="problem-op problem-op_green"
            >{{ numberToLetter(index) }}</text
          >
          <view style="width: 8px"></view>
          <text class="problem-opAnswer">{{ judgMap[item.value] }}</text>
        </view>
      </view>
      <!-- 单选 -->
      <view
        v-if="
          problemList[problemListIndex].questionType == 2 &&
          !problemList[problemListIndex].isCompleted
        "
        class="problem-ops"
      >
        <m-radio-group
          @change="changeRadioGroup"
          :value.sync="problemList[problemListIndex].userAnswer"
        >
          <m-radio
            :value="item.value"
            :item="item"
            :useIconSlot="true"
            :key="index"
            :name="numberToLetter(index)"
            v-for="(item, index) in problemList[problemListIndex].optsArr"
          >
          </m-radio>
        </m-radio-group>
      </view>
      <view
        class="problem-ops"
        v-if="
          problemList[problemListIndex].questionType == 2 &&
          problemList[problemListIndex].isCompleted
        "
      >
        <view
          v-for="(item, index) in problemList[problemListIndex].optsArr"
          :key="index"
          class="problem-select"
        >
          <icon
            v-if="item.isAnswer && item.selected"
            class="icon-box-img"
            type="success"
            color="#06c05f"
            size="37"
          ></icon>
          <icon
            v-if="!item.isAnswer && item.selected"
            class="icon-box-img"
            type="clear"
            size="37"
          ></icon>
          <text v-if="!item.isAnswer && !item.selected" class="problem-op">{{
            numberToLetter(index)
          }}</text>
          <text
            v-if="item.isAnswer && !item.selected"
            class="problem-op problem-op_green"
            >{{ numberToLetter(index) }}</text
          >
          <view style="width: 8px"></view>
          <text class="problem-opAnswer">{{ item.value }}</text>
        </view>
      </view>

      <!-- 多选 -->

      <view
        v-if="
          problemList[problemListIndex].questionType == 3 &&
          !problemList[problemListIndex].isCompleted
        "
        class="problem-ops"
      >
        <m-checkbox-group
          @change="changeCheckboxGroup"
          :value="problemList[problemListIndex].userAnswer"
          :max="4"
        >
          <m-checkbox
            @change="changeCheckbox"
            :item="item"
            :value="item.value"
            class="problem-checkbox"
            use-icon-slot
            v-for="(item, index) in problemList[problemListIndex].optsArr"
            :key="index"
            :name="numberToLetter(index)"
          >
          </m-checkbox>
        </m-checkbox-group>
        <view class="flex-center pb16">
          <van-button
            @click="confirmMult"
            color="#498ef5"
            round
            custom-style="width:600rpx"
            type="primary"
            >确定</van-button
          >
        </view>
      </view>
      <view
        class="problem-ops"
        v-if="
          problemList[problemListIndex].questionType == 3 &&
          problemList[problemListIndex].isCompleted
        "
      >
        <view
          v-for="(item, index) in problemList[problemListIndex].optsArr"
          :key="index"
          class="problem-select"
        >
          <icon
            v-if="item.isAnswer && item.selected"
            class="icon-box-img"
            type="success"
            color="#06c05f"
            size="37"
          ></icon>
          <icon
            v-if="!item.isAnswer && item.selected"
            class="icon-box-img"
            type="clear"
            size="37"
          ></icon>
          <text v-if="!item.isAnswer && !item.selected" class="problem-op">{{
            numberToLetter(index)
          }}</text>
          <text
            v-if="item.isAnswer && !item.selected"
            class="problem-op problem-op_green"
            >{{ numberToLetter(index) }}</text
          >
          <view style="width: 8px"></view>
          <text class="problem-opAnswer">{{ item.value }}</text>
        </view>
      </view>

      <view
        v-if="problemList[problemListIndex].isCompleted && !hiddenAnswer"
        class="answer"
      >
        <view
          v-if="
            problemList[problemListIndex].questionType == 1 &&
            problemList[problemListIndex].isCompleted
          "
        >
          答案：{{ judgMap[problemList[problemListIndex].answer] }}
        </view>
        <view
          v-if="
            problemList[problemListIndex].questionType > 1 &&
            problemList[problemListIndex].isCompleted
          "
        >
          答案： {{ problemList[problemListIndex].answer }}
        </view>
      </view>
      <funList
        :midFunc="midFunc"
        v-if="!hiddenFunction"
        @collect="collectTopics"
        @readQuestionAndAnswer="
          readQuestionAndAnswer();
          completeQuestion();
        "
        :problemListItem="problemList[problemListIndex]"
      ></funList>

      <!-- #endif -->
      <!-- <view v-if="!hiddenFunction" class="function-list">
      <div @click="collectTopics" class="function-item">
        <van-icon
          v-if="!problemList[problemListIndex].isCollect"
          name="star-o"
          size="25px"
        />
        <van-icon
          color="#ffde00ff"
          v-if="problemList[problemListIndex].isCollect"
          name="star"
          size="25px"
        />
        <span>收藏</span>
      </div>
      <div
        @click="
          readQuestionAndAnswer();
          completeQuestion();
        "
        class="function-item"
      >
        <m-jp-icon type="a-dtda" size="25px" />
        <span>读题+答案</span>
      </div>
      <div @click="readQuestion()" class="function-item">
        <m-jp-icon type="duti" size="25px" />
        <span>读题</span>
      </div>
      <div
        @click="
          () => {
            explainJqVisible = true;
          }
        "
        class="function-item"
      >
        <m-jp-icon type="jqjj" size="25px" />
        <span>技巧讲解</span>
      </div>
    </view> -->
      <!-- 底部的栏目 -->
      <!-- #ifdef MP-WEIXIN -->
      <van-tabbar height="20px">
        <van-tabbar-item @click="goBeforeTopics"
          ><van-icon
            slot="icon"
            custom-style="transform: rotate(90deg);"
            custom-class="last-subject"
            name="down"
            size="18px"
          />上一题
        </van-tabbar-item>
        <van-tabbar-item>
          <icon
            slot="icon"
            class="icon-box-img"
            type="success"
            size="18px"
          ></icon
          >{{ trueNum }}</van-tabbar-item
        >
        <van-tabbar-item
          ><icon
            slot="icon"
            class="icon-box-img"
            type="cancel"
            size="18px"
          ></icon>
          {{ falseNum }}
        </van-tabbar-item>
        <van-tabbar-item
          ><van-icon slot="icon" size="18px" name="description" />{{
            problemListIndex + 1
          }}/{{ problemListTotal }}
        </van-tabbar-item>
        <van-tabbar-item
          @click="
            () => {
              explainJsVisible = true;
            }
          "
          ><icon slot="icon" type="warn" size="18px" />解释
        </van-tabbar-item>
        <van-tabbar-item @click="goNextTopics"
          ><van-icon
            slot="icon"
            custom-style="transform: rotate(-90deg);"
            custom-class="last-subject"
            name="down"
            size="18px"
          />下一题
        </van-tabbar-item>
      </van-tabbar>
      <!-- #endif -->
      <!-- #ifdef MP-TOUTIAO -->
      <tabbar height="45px">
        <view v-if="bottomFunc.includes('previous')" class="h-full tabbar-item">
          <view @click="goBeforeTopics">
            <van-icon
              slot="icon"
              custom-style="transform: rotate(90deg);"
              custom-class="last-subject"
              name="down"
              size="18px"
            />
            <view style="width: 100%"> 上一题 </view>
          </view>
        </view>

        <view v-if="bottomFunc.includes('score')" class="h-full tabbar-item">
          <view class="tabbar-item">
            <icon
              class="icon-box-img"
              color="#06c05f"
              type="success"
              size="18px"
            ></icon
            ><view style="width: 100%; color: #06c05f">{{ trueNum }}</view>
          </view>
          <view style="margin-left: 15rpx" class="tabbar-item">
            <icon class="icon-box-img" type="clear" size="18px"></icon>
            <view style="width: 100%; color: red">{{ falseNum }}</view>
          </view>
        </view>
        <view
          v-if="bottomFunc.includes('catalogue')"
          class="h-full tabbar-item"
        >
          <van-icon size="18px" name="description" /><view style="width: 100%"
            >{{ problemListIndex + 1 }}/{{ problemList.length }}</view
          >
        </view>
        <view
          v-if="bottomFunc.includes('selectCatalogue')"
          @click="
            () => {
              selectProblemListVisible = true;
            }
          "
          class="h-full tabbar-item"
        >
          <van-icon size="18px" name="description" /><view style="width: 100%"
            >{{ problemListIndex + 1 }}/{{ problemList.length }}</view
          >
        </view>

        <view
          v-if="bottomFunc.includes('explain')"
          @click="
            () => {
              explainJsVisible = true;
            }
          "
          class="h-full tabbar-item"
        >
          <icon type="warn" size="18" /><view
            style="width: 100%; text-align: center"
            >解释</view
          >
        </view>
        <view
          @click="submitExam"
          v-if="bottomFunc.includes('submitExam')"
          class="h-full tabbar-item"
        >
          <van-icon slot="icon" size="18px" name="records" />
          <view style="width: 100%">交卷</view>
        </view>

        <view
          v-if="bottomFunc.includes('next')"
          @click="goNextTopics"
          class="h-full tabbar-item"
        >
          <van-icon
            slot="icon"
            custom-style="transform: rotate(-90deg);"
            custom-class="last-subject"
            name="down"
            size="18px"
          />
          <view style="width: 100%"> 下一题 </view>
        </view>
      </tabbar>
      <!-- #endif -->
      <van-overlay
        @click-overlay="
          () => {
            selectProblemListVisible = false;
          }
        "
        :show="selectProblemListVisible"
      >
        <view class="select-problem">
          <view class="problem-index">
            <view class="problem-header">
              <view class="problem-header-left">
                <view class="problem-dui">
                  <icon
                    class="icon-box-img"
                    color="#06c05f"
                    type="success"
                    size="18"
                  ></icon>
                  <text
                    style="color: #06c05f; font-size: 14px; margin-left: 8rpx"
                    >{{ trueNum }}</text
                  >
                </view>
                <view class="problem-cuo" style="margin-left: 16rpx">
                  <icon class="icon-box-img" type="clear" size="18"></icon>
                  <text
                    style="color: red; font-size: 14px; margin-left: 8rpx"
                    >{{ falseNum }}</text
                  >
                </view>
              </view>
              <view class="problem-header-right">
                <van-icon size="18px" name="description" />
                <view
                  style="font-size: 14px; display: flex; align-items: center"
                  >{{ problemListIndex + 1 }}/{{ problemListTotal }}</view
                >
              </view>
            </view>
            <view class="problem-body">
              <view class="problem-listBody">
                <view
                  class="problem-listItem"
                  :key="index"
                  @click="
                    () => {
                      $emit('update:problemListIndex', index);
                    }
                  "
                  v-for="(item, index) in problemList"
                  :class="{
                    'problem-listItem_dui':
                      item.userAnswer.length && item.userAnswer == item.answer,
                    'problem-listItem_cuo':
                      item.userAnswer.length && item.userAnswer !== item.answer,
                  }"
                >
                  {{ index + 1 }}
                </view>
              </view>
            </view>
            <view class="problem-bottom">
              <view
                @click="
                  () => {
                    selectProblemListVisible = false;
                  }
                "
                class="problem-bottom-sure"
                >确定
              </view>
              <view
                @click="
                  () => {
                    selectProblemListVisible = false;
                  }
                "
                class="problem-bottom-close"
              >
                关闭</view
              >
            </view>
          </view>
        </view>
      </van-overlay>
      <explainJs
        @close="
          () => {
            explainJsVisible = false;
          }
        "
        :explainJs="problemList[problemListIndex].explainJs"
        :explainjsmp3="problemList[problemListIndex].explainjsmp3"
        :show="explainJsVisible"
      ></explainJs>
    </view>
  </view>
</template>

<script>
import countDown from "@/components/countDown/index";
import mRadio from "@/components/m-radio/m-radio.vue";
import mRadioGroup from "@/components/m-radio-group/m-radio-group.vue";
import mCheckbox from "@/components/m-checkbox/m-checkbox.vue";
import mCheckboxGroup from "@/components/m-checkbox-group/m-checkbox-group.vue";
import api from "@/api/index";
import utils from "@/utils/index";
import explainJq from "./components/explainJq.vue";
import tabbar from "./components/tabbar.vue";
import explainJs from "./components/explainJs.vue";
import funList from "./components/funList.vue";
let origProblemList = [];
export default {
  data() {
    return {
      //topic
      //isCollect
      isAutoReadTopics: false,
      mode: 0,
      problemList: [
        {
          questionType: 2,
          answer: "×",
          answerkeyword: "",
          isCollect: false,
          answermp3:
            "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer1389.mp3",
          classIssue: "54",
          classIssueName: "车内开关/装置",
          classSort: 16,
          createTime: "2022-04-21 13:33:46",
          excellIssue: "23",
          excellIssueName: "必学题三",
          excellSort: 4,
          explainGif:
            "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain1389.gif",
          explainJq:
            "看图答题：红色圆圈套在杆子中间.答对；不在中间或没有圆圈的.答错。",
          explainJs:
            "图中所示为左右转向灯开关转向灯操作：上提是右转向灯亮起，下压是左转向灯。",
          explainMp3:
            "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain1389.mp3",
          explainjsmp3:
            "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS1389.mp3",
          id: 831,
          idKt: 1389,
          idYdt: 950,
          image:
            "https://t1-1305573081.file.myqcloud.com/kt/image/image1389.png",
          imageYdt:
            "https://t1-1305573081.file.myqcloud.com/kt/image_ydt/5eb4d75agw1e291vmniovj.jpg",
          issue: "将转向灯开关向上提，左转向灯亮。",
          issuemp3:
            "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue1389.mp3",
          liceBus: "1",
          liceCar: "1",
          liceMoto: null,
          liceTruck: "1",
          number: 831,
          opts: "√-×",
          optsArr: ["√", "×"],
          placeIssue: null,
          placeIssueName: null,
          placeSort: null,
          questionType: 1,
          sequeIssue: "7",
          sequeIssueName: "机械仪表",
          sequeSort: 25,
          skillkeyword: "没有圆圈-答错",
          subject: 1,
          titlekeyword: "",
          updateTime: "2022-04-22 13:43:07",
          userAnswer: [],
        },
      ],
      judgMap: {
        "√": "正确",
        "×": "错误",
      },
      gsMap: {
        xc: "小车",
        hc: "货车",
        mtc: "摩托车",
        kc: "客车",
      },
      examTime:1000*60*45,
      useTime:'',
      problemListTotal: 1,
      explainJqVisible: false,
      selectProblemListVisible: false,
      explainJsVisible: false,
      trueNum: 0,
      falseNum: 0,
      errQuestionIds: [],
    };
  },
  watch: {
    //specify
    problemListIndex(newValue, oldValue) {
      if (this.isAutoReadTopics) {
        let audio = utils.wxUtils.getGlobAudio();
        audio.stop();
        audio.src = this.problemList[this.problemListIndex].issuemp3;
        audio.play();
      }
    },
  },
  methods: {
    getUseTime(leftTime,useTime){
      this.useTime = useTime
    },
    stopAudio() {
      let audio = utils.wxUtils.getGlobAudio();
      audio.stop();
    },
    playCurrentIssue() {
      let audio = utils.wxUtils.getGlobAudio();
      audio.stop();
      audio.src = this.problemList[this.problemListIndex].issuemp3;
      audio.play();
    },
    createCompleteProblemList() {
      if (this.mode == 2) {
        return;
      }
      let problemList = JSON.parse(JSON.stringify(origProblemList));

      problemList.forEach((item) => {
        item.optsArr.forEach((_item) => {
          if (_item.isAnswer) {
            _item.selected = true;
          }
        });
        item.isCompleted = true;
      });
      this.trueNum = 0;
      this.falseNum = 0;

      this.problemList = problemList;
      this.$emit("update:problemListIndex", 0);
    },
    createOrderProblemList() {
      if (this.mode == 0) {
        return;
      }
      let problemList = JSON.parse(JSON.stringify(origProblemList));
      console.log(problemList);
      console.log(origProblemList);
      this.problemList = problemList;
      this.trueNum = 0;
      this.falseNum = 0;
      //初始化序号
      this.$emit("update:problemListIndex", 0);
    },
    createRandomProblemList() {
      if (this.mode == 1) {
        return;
      }
      let problemList = JSON.parse(JSON.stringify(origProblemList));
      problemList.sort(function () {
        return Math.random() - 0.5;
      });
      this.problemList = problemList;
      this.trueNum = 0;
      this.falseNum = 0;
      //初始化序号
      this.$emit("update:problemListIndex", 0);
    },
    goBeforeTopics() {
      if (this.problemListIndex <= 0) {
        uni.showToast({
          title: "到底了",
          icon: "none",
        });
        return;
      }
      // this.problemListIndex = this.problemListIndex - 1;
      this.$emit("update:problemListIndex", this.problemListIndex - 1);
    },
    goNextTopics() {
      if (this.problemListIndex >= this.problemList.length - 1) {
        uni.showToast({
          title: "到底了",
          icon: "none",
        });
        return;
      }
      // this.problemListIndex = this.problemListIndex + 1;
      this.$emit("update:problemListIndex", this.problemListIndex + 1);
    },
    completeQuestion() {
      this.problemList[this.problemListIndex].optsArr.forEach((item, index) => {
        if (item.isAnswer) {
          this.$set(
            this.problemList[this.problemListIndex].optsArr[index],
            "selected",
            true
          );
        }
      });
      this.$set(this.problemList[this.problemListIndex], "isCompleted", true);
      this.$set(
        this.problemList[this.problemListIndex],
        "userAnswer",
        this.problemList[this.problemListIndex].answer
      );
    },
    submitExam(e) {
      let score = 0;
      let query = this.query;
      let that = this;
      let scorePerQuestion = 0;
      query.subject === "4" ? (scorePerQuestion = 2) : (scorePerQuestion = 1);
      score = this.trueNum * scorePerQuestion;
      uni.showModal({
        title: "是否交卷",
        content: "交卷后不可再修改了",
        success(res) {
          if (res.confirm) {
            let useTime = that.useTime;
  
      
            uni.navigateTo({
              url:
                "/otherPages/mockExamEnd/index?" +
                utils.mapToUrlQuery({
                  score,
                  useTime,
                  questionIds: that.errQuestionIds.join(","),
                  type: that.type,
                  ...that.query,
                }),
            });
          }
        },
        fail() {},
      });
    },
    collectTopics(e) {
      api.exam
        .studentQuestionCollection({
          questionId: this.problemList[this.problemListIndex].id,
          carType: this.gsMap[this.query.gs],
          km: this.query.subject === "4" ? "科目四" : "科目一",
        })
        .then((res) => {
          if (!this.problemList[this.problemListIndex].isCollect) {
            this.$set(
              this.problemList[this.problemListIndex],
              "isCollect",
              true
            );
            uni.showToast({
              title: "收藏成功",
            });
          } else {
            this.$set(
              this.problemList[this.problemListIndex],
              "isCollect",
              false
            );
            uni.showToast({
              title: "取消收藏",
              icon: "fail",
            });
          }
        });
    },
    readQuestionAndAnswer() {
      let globalAudio = utils.wxUtils.getGlobAudio();

      if (globalAudio) {
        globalAudio.src = this.problemList[this.problemListIndex].issuemp3;
        globalAudio.stop();
        globalAudio.play();
        globalAudio.onEnded(() => {
          globalAudio.src = this.problemList[this.problemListIndex].answermp3;
          globalAudio.stop();
          globalAudio.play();
          globalAudio.offEnded();
        });
      }
    },
    readQuestion() {
      let globalAudio = utils.wxUtils.getGlobAudio();
      if (globalAudio) {
        globalAudio.src = this.problemList[this.problemListIndex].issuemp3;
        globalAudio.stop();
        globalAudio.play();
      }
    },
    numberToLetter(index) {
      index = Number(index);
      return String.fromCharCode(index + 65);
    },
    confirmMult(e) {
      this.$set(this.problemList[this.problemListIndex], "isCompleted", true);
      if (
        JSON.stringify(
          this.problemList[this.problemListIndex].answer.split("-").sort()
        ) ===
        JSON.stringify(
          this.problemList[this.problemListIndex].userAnswer.sort()
        )
      ) {
        this.trueNum++;
        this.$emit("update:trueNum", this.trueNum);
      } else {
        this.falseNum++;
        this.$emit("update:falseNum", this.falseNum);
        this.errQuestionIds.includes(this.problemList[this.problemListIndex].id)
          ? ""
          : this.errQuestionIds.push(
              this.problemList[this.problemListIndex].id
            );

        api.exam.studentQuestionWrong({
          questionId: this.problemList[this.problemListIndex].id,
          carType: this.gsMap[this.query.gs],
          km: this.query.subject === "4" ? "科目四" : "科目一",
        });
      }
      // this.problemList[this.problemListIndex]
    },
    changeCheckboxGroup(e) {
      //console.log(e);
      // this.$set()
      // #ifdef MP-WEIXIN
      this.$set(
        this.problemList[this.problemListIndex],
        "userAnswer",
        e.detail
      );
      this.problemList[this.problemListIndex].optsArr.forEach((item) => {
        if (e.detail.includes(item.value)) {
          item.selected = true;
        } else {
          item.selected = false;
        }
      });
      //#endif
      // #ifdef MP-TOUTIAO
      this.$set(
        this.problemList[this.problemListIndex],
        "userAnswer",
        e.detail
      );
      this.problemList[this.problemListIndex].optsArr.forEach((item, index) => {
        if (e.detail.includes(item.value)) {
          item.selected = true;
          this.$set(
            this.problemList[this.problemListIndex].optsArr[index],
            "selected",
            true
          );
        } else {
          item.selected = false;
          this.$set(
            this.problemList[this.problemListIndex].optsArr[index],
            "selected",
            false
          );
        }
      });
      //#endif
      // if (
      //   this.problemList[this.problemListIndex].answer
      //     .split("-")
      //     .sort()
      //     .toString() ===
      //   this.problemList[this.problemListIndex].userAnswer.sort().toString()
      // ) {
      //   this.trueNum = this.trueNum + 1;
      //   this.$emit("update:trueNum", this.trueNum);
      // } else {
      //   this.falseNum = this.falseNum + 1;
      //   this.$emit("update:falseNum", this.falseNum);
      // }
      //score=1&useTime=NaN%3ANaN&questionIds=&type=&cert=C1%2FC2%2FC3&vehicle=%E8%BD%BF%E8%BD%A6&subject=1&title=%E9%A1%BA%E5%BA%8F%E7%BB%83%E4%B9%A0&liceCar=1&liceTruck=&liceBus=&liceMoto=&name=%E7%A7%91%E7%9B%AE%E4%B8%80&gs=xc&sort=3&sequeIssueName=%E7%BB%83%E4%B9%A0%E4%B8%80&__id__=3
    },
    changeRadioGroup(e) {
      console.log(e, "changeRadioGroup");
      // #ifdef MP-WEIXIN
      this.$set(this.problemList[this.problemListIndex], "isCompleted", true);
      if (e.detail == this.problemList[this.problemListIndex].answer) {
        this.trueNum = this.trueNum + 1;
        this.$emit("update:trueNum", this.trueNum);
      } else {
        this.falseNum = this.falseNum + 1;
        api.exam.studentQuestionWrong({
          questionId: this.problemList[this.problemListIndex].id,
          carType: this.gsMap[this.query.gs],
          km: this.query.subject === "4" ? "科目四" : "科目一",
        });
        this.$emit("update:falseNum", this.falseNum);
        this.errQuestionIds.includes(this.problemList[this.problemListIndex].id)
          ? ""
          : this.errQuestionIds.push(
              this.problemList[this.problemListIndex].id
            );
        console.log(this.errQuestionIds);
      }
      this.$set(
        this.problemList[this.problemListIndex],
        "userAnswer",
        e.detail
      );
      this.optsArr = this.problemList[this.problemListIndex].optsArr.map(
        (item) => {
          item.selected = item.value == e.detail;
        }
      );

      // e.detail.value === this.problemList[this.problemListIndex].answer
      //   ? (this.trueNum = this.trueNum + 1)
      //   : (this.falseNum = this.falseNum + 1);
      //#endif

      // #ifdef MP-TOUTIAO
      this.$set(this.problemList[this.problemListIndex], "isCompleted", true);
      this.$set(
        this.problemList[this.problemListIndex],
        "userAnswer",
        e.detail
      );
      this.problemList[this.problemListIndex].optsArr.forEach((item, index) => {
        if (e.detail === item.value) {
          item.selected = true;
          this.$set(
            this.problemList[this.problemListIndex].optsArr[index],
            "selected",
            true
          );
        } else {
          item.selected = false;
          this.$set(
            this.problemList[this.problemListIndex].optsArr[index],
            "selected",
            false
          );
        }
      });
      console.log(e, "组件");
      if (e.detail === this.problemList[this.problemListIndex].answer) {
        this.trueNum = this.trueNum + 1;
        this.$emit("update:trueNum", this.trueNum);
      } else {
        this.falseNum = this.falseNum + 1;
        this.$emit("update:falseNum", this.falseNum);
        this.errQuestionIds.includes(this.problemList[this.problemListIndex].id)
          ? ""
          : this.errQuestionIds.push(
              this.problemList[this.problemListIndex].id
            );
        api.exam.studentQuestionWrong({
          questionId: this.problemList[this.problemListIndex].id,
          carType: this.gsMap[this.query.gs],
          km: this.query.subject === "4" ? "科目四" : "科目一",
        });
      }

      //#endif
    },
  },
  filters: {
    questionType: function (value) {
      let question = "";
      switch (value) {
        case 1:
        case "1":
          question = "判断题";
          break;
        case 2:
        case "2":
          question = "单选题";
          break;
        case 3:
        case "3":
          question = "多选题";
          break;
      }
      return question;
    },
  },
  components: {
    mRadio,
    mRadioGroup,
    mCheckbox,
    mCheckboxGroup,
    explainJq,
    tabbar,
    explainJs,
    funList,
    countDown,
  },

  props: {
    midFunc: {
      type: Array,
      default: () => {
        return [];
      },
    },
    bottomFunc: {
      type: Array,
      default: () => {
        return [];
      },
    },
    hiddenAnswer: {
      type: Boolean,
      default: false,
    },
    hiddenFunction: {
      type: Boolean,
      default: false,
    },
    hiddenMode: {
      type: Boolean,
      default: false,
    },
    problemListTotal: {
      type: Number,
      default: 0,
    },
    query: {
      type: Object,
      default: () => {
        return {};
      },
    },
    type: {
      type: String,
      default: "",
    },
    problemListIndex: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    let that = this;
    uni.showLoading({
      title: "加载题目中",
    });
    switch (that.type) {
      case "specify":
        api.open
          .questionInfoGetQuestionInfoByIds({
            ids: newValue.questionIds,
          })
          .then((res) => {
            res.rows.forEach((element) => {
              element.optsArr = [];
              element.isCollect = false;
              element.opts.split("-").forEach((item, index) => {
                if (element.questionType == 3) {
                  element.optsArr.push({
                    selected: false,
                    value: item,
                    index: index,
                    isAnswer: element.answer.split("-").includes(item),
                  });
                } else {
                  element.optsArr.push({
                    selected: false,
                    value: item,
                    index: index,
                    isAnswer: item === element.answer,
                  });
                }
              });
              element.isCompleted = false;
              element.userAnswer = [];
            });
            that.problemListTotal = res.total;
            origProblemList = JSON.parse(JSON.stringify(res.rows));

            that.problemList = res.rows;

            that.$emit("update:problemListTotal", res.total);
            uni.hideLoading();
          });

        break;
      case "exam":
        api.exam
          .studentQuestionInfoSelectTestQuestionInfo({
            gs: "xc",
            subject: 1,
          })
          .then((res) => {
            res.rows.forEach((element) => {
              element.optsArr = [];
              element.isCollect = false;
              element.opts.split("-").forEach((item, index) => {
                if (element.questionType == 3) {
                  element.optsArr.push({
                    selected: false,
                    value: item,
                    index: index,
                    isAnswer: element.answer.split("-").includes(item),
                  });
                } else {
                  element.optsArr.push({
                    selected: false,
                    value: item,
                    index: index,
                    isAnswer: item === element.answer,
                  });
                }
              });
              element.isCompleted = false;
              element.userAnswer = [];
            });
            that.problemListTotal = res.total;
            origProblemList = JSON.parse(JSON.stringify(res.rows));

            that.problemList = res.rows;

            that.$emit("update:problemListTotal", res.total);
            uni.hideLoading();
          });

        break;
      case "free":
        api.open
          .questionInfoSelectFreeQuestionInfo({
            ...this.query,
          })
          .then((res) => {
            res.rows.forEach((element) => {
              element.optsArr = [];
              element.opts.split("-").forEach((item, index) => {
                if (element.questionType == 3) {
                  element.optsArr.push({
                    selected: false,
                    value: item,
                    index: index,
                    isAnswer: element.answer.split("-").includes(item),
                  });
                } else {
                  element.optsArr.push({
                    selected: false,
                    value: item,
                    index: index,
                    isAnswer: item === element.answer,
                  });
                }
              });
              element.isCompleted = false;
              element.userAnswer = [];
            });
            that.problemList = res.rows;
            origProblemList = JSON.parse(JSON.stringify(res.rows));
            that.problemListTotal = res.total;
            uni.hideLoading();
          });

        break;
      case "wrong":
        api.exam
          .studentQuestionWrongWrongByUser({
            carType: this.gsMap[this.query.gs],
            km: this.query.subject === "1" ? "科目一" : "科目四",
          })
          .then((res) => {
            res.data.forEach((element) => {
              element.optsArr = [];
              element.opts.split("-").forEach((item, index) => {
                if (element.questionType == 3) {
                  element.optsArr.push({
                    selected: false,
                    value: item,
                    index: index,
                    isAnswer: element.answer.split("-").includes(item),
                  });
                } else {
                  element.optsArr.push({
                    selected: false,
                    value: item,
                    index: index,
                    isAnswer: item === element.answer,
                  });
                }
              });
              element.isCompleted = false;
              element.userAnswer = [];
            });
            that.problemListTotal = res.total;
            that.problemList = res.data;
            origProblemList = JSON.parse(JSON.stringify(res.data));
            that.$emit("update:problemListTotal", res.data.length);

            uni.hideLoading();
            uni.hideLoading();
          });

        break;
      case "collect":
        api.exam
          .studentQuestionCollectionCollectionByUser({
            carType: this.gsMap[this.query.gs],
            km: this.query.subject === "1" ? "科目一" : "科目四",
          })
          .then((res) => {
            res.data.forEach((element) => {
              element.optsArr = [];
              element.opts.split("-").forEach((item, index) => {
                if (element.questionType == 3) {
                  element.optsArr.push({
                    selected: false,
                    value: item,
                    index: index,
                    isAnswer: element.answer.split("-").includes(item),
                  });
                } else {
                  element.optsArr.push({
                    selected: false,
                    value: item,
                    index: index,
                    isAnswer: item === element.answer,
                  });
                }
              });
              element.isCompleted = false;
              element.userAnswer = [];
            });
            that.problemListTotal = res.total;
            that.problemList = res.data;
            origProblemList = JSON.parse(JSON.stringify(res.data));
            that.$emit("update:problemListTotal", res.data.length);

            uni.hideLoading();
          });

        break;
      default:
        api.exam
          .studentQuestionInfoList({
            ...this.query,
          })
          .then((res) => {
            res.rows.forEach((element) => {
              element.optsArr = [];
              element.opts.split("-").forEach((item, index) => {
                if (element.questionType == 3) {
                  element.optsArr.push({
                    selected: false,
                    value: item,
                    index: index,
                    isAnswer: element.answer.split("-").includes(item),
                  });
                } else {
                  element.optsArr.push({
                    selected: false,
                    value: item,
                    index: index,
                    isAnswer: item === element.answer,
                  });
                }
              });
              element.isCompleted = false;
              element.userAnswer = [];
            });
            that.problemListTotal = res.total;
            that.problemList = res.rows;
            origProblemList = JSON.parse(JSON.stringify(res.rows));
            that.$emit("update:problemListTotal", res.total);
            uni.hideLoading();
          });
        break;
    }
  },
};
</script>

<style lang="scss" scoped>
.answer {
  padding-left: 16rpx;
  padding-bottom: 16rpx;
  padding-top: 16rpx;
  > view {
    padding-left: 16rpx;
    background: #d8d8d8;
    padding-bottom: 8rpx;
    padding-top: 8rpx;
  }
}
.pb16 {
  padding-bottom: 16rpx;
}
.mode {
  display: flex;
  padding: 20rpx 30rpx;
  justify-content: space-between;
  border-top: 2rpx solid #d8d8d8;
  .mode-item {
    width: 140rpx;
    height: 50rpx;
    font-size: 26rpx;
    line-height: 50rpx;
    background: #b8c0cc;
    color: #fff;
    text-align: center;
    border-radius: 32rpx;
  }
  .mode-item_select {
    background: #498ef5;
  }
}
.divider {
  width: 100%;
  height: 24rpx;
  background-color: #f2f3f5;
}
.select-problem {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-content: flex-end;
  align-items: flex-end;
  .problem-index {
    width: 100vw;
    height: 650rpx;
    background: #fff;
    border-radius: 16rpx;
    padding-top: 50rpx;
  }
  .problem-bottom {
    width: 100%;
    display: flex;
    height: 80rpx;
    .problem-bottom-sure {
      width: 50%;
      height: 100%;
      border-right: 2rpx solid #d8d8d8;
      border-top: 2rpx solid #d8d8d8;
      text-align: center;
      color: #498ef5;
      line-height: 80rpx;
    }
    .problem-bottom-close {
      width: 50%;
      height: 100%;
      color: red;
      text-align: center;
      border-top: 2rpx solid #d8d8d8;
      line-height: 80rpx;
    }
  }
  .problem-header {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 0rpx 30rpx;
    .problem-header-left {
      display: flex;

      .problem-dui {
        display: flex;
        align-content: center;
        align-items: center;
      }
      .problem-cuo {
        display: flex;
        align-content: center;
        align-items: center;
      }
    }
    .problem-header-right {
      display: flex;
      align-content: center;
    }
  }
  .problem-body {
    height: 480rpx;
    padding-top: 30rpx;
    overflow-y: scroll;

    .problem-listBody {
      display: inline-block;
      overflow: hidden;
      .problem-listItem {
        display: inline-block;
        width: 99rpx;
        height: 99rpx;
        line-height: 100rpx;
        text-align: center;
        border-radius: 50%;
        border: 2rpx #d8d8d8 solid;
        margin-bottom: 15rpx;
        margin-left: 13rpx;
        margin-right: 13rpx;
      }
      .problem-listItem_dui {
        background: #c1e6db;
        color: #4eb79a;
      }
      .problem-listItem_cuo {
        background: #e6c5c6;
      }
    }
  }
}
.tabbar-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  align-content: space-around;
  align-items: space-around;
}
.mt30 {
  margin-top: 30rpx;
}
.flex-center {
  display: flex;
  justify-content: center;
}
.problem-box {
  padding: 15rpx;
  padding-bottom: 45px;
  background: #fff;
  /deep/ .van-checkbox {
    padding-bottom: 15rpx;
  }
  /deep/ .van-radio {
    padding-bottom: 15rpx;
  }
  .problem-issue {
    font-size: 38rpx;
    font-weight: 500;
  }
  .problem-select {
    display: flex;
    align-content: center;
    align-items: center;
    padding-top: 16rpx;
    padding-bottom: 16rpx;
  }
  .problem-type {
    padding-left: 10rpx;
    padding-right: 10rpx;
    padding-top: 4rpx;
    padding-bottom: 4rpx;
    font-size: 24rpx;
    border-radius: 16rpx 16rpx 0 16rpx;
    background: #498ef5;
    margin-right: 10rpx;
    color: #fff;
    font-size: 32rpx;
  }
  .problem-ops {
    margin-top: 30rpx;
    padding-left: 30rpx;
    .problem-checkbox {
      height: 100rpx;
      margin-bottom: 30rpx;
    }
  }
  .problem-op {
    width: 75rpx;
    height: 75rpx;
    line-height: 75rpx;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.16);
  }
  .problem-op_green {
    width: 75rpx;
    height: 75rpx;
    line-height: 75rpx;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    background: #01c18d;

    box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.16);
  }
  .problem-op_selected {
    background: #498ef5;
  }
  .problem-img {
    width: 100%;
    margin-top: 20rpx;
    display: flex;
    justify-content: center;
    image {
      margin: 0 auto;
    }
  }
}
.function-list {
  width: 100%;
  font-size: 13px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 8px;
  box-sizing: border-box;
  border-top: 2rpx solid #d8d8d8;
  .function-item {
    margin-bottom: 20px;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    color: #8a9099;
    span {
      margin-top: 5px;
    }
  }
}
</style>