<template>
  <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">
        <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">
        <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>

    <!-- #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 class="function-item" @click="answerAudioPlay">
      <m-icon type="a-dtda" 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>
      <!-- <div class="function-item" @click="currentAnswerIndexBack">
      <m-icon type="shangyiti" size="25px" />
      <span>上一题</span>
    </div>
    <div class="function-item" @click="skillsShow = true">
      <m-icon type="zongtishu" size="25px" />
      <span>1/100</span>
    </div>
    <div class="function-item" @click="currentAnswerIndexGo">
      <m-icon type="xiayiti" size="25px" />
      <span>下一题</span>
    </div> -->
    </view>
    <explainJq
      :show="explainJqVisible"
      :explainJqGif="problemList[problemListIndex].explainGif"
      :explainJq="problemList[problemListIndex].explainJq"
      :explainMp3="problemList[problemListIndex].explainMp3"
      @close="
        () => {
          explainJqVisible = false;
        }
      "
    ></explainJq>
  </view>
</template>

<script>
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";
export default {
  data() {
    return {
      //topic
      //isCollect
      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: "客车",
      },
      explainJqVisible: false,
    };
  },
  watch: {
    query(newValue, oldValue) {
      let that = this;
      console.log(this.type);
      uni.showLoading({
        title: "加载题目中",
        mask: true,
      });
      if (this.type == "wrong") {
        api.exam
          .studentQuestionInfoGetQuestionInfoByIds({
            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;
            that.problemList = res.rows;
            that.$emit("update:problemListTotal", res.total);
            uni.hideLoading();
          });
      } else {
        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;
            that.$emit("update:problemListTotal", res.total);
            uni.hideLoading();
          });
      }
    },
  },
  methods: {
    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);
    },
    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);
        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);
      // }
    },
    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.$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);
        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,
  },

  props: {
    hiddenFunction: {
      type: Boolean,
      default: false,
    },
    problemListTotal: {
      type: Number,
      default: 0,
    },
    query: {
      type: Object,
      default: () => {
        return {};
      },
    },
    type: {
      type: String,
      default: "",
    },
    trueNum: {
      type: Number,
      default: 0,
    },
    falseNum: {
      type: Number,
      default: 0,
    },
    problemListIndex: {
      type: Number,
      default: 0,
    },
  },
};
</script>

<style lang="scss" scoped>
.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>