<template>
  <section class="qeustion-content-wrapper">
    <article class="content" v-show="currentQuestion.unionType">
      <p class="text" v-show="currentQuestion.unionType == 1" v-html="currentQuestion.unionQuestion"></p>
      <article
        class="select-wrapper"
        style="padding: 10px 15px 20px;"
        v-show="currentQuestion.unionType == 2"
      >
        <div class="item" v-for="(item, index) in currentQuestion.options" :key="index">
          <span class="option lh-22">{{getOrderVac(index)}}.</span>
          <span class="content">{{item.text}}</span>
        </div>
      </article>
      <commonSpliteLine></commonSpliteLine>
    </article>
    <article class="title-wrapper">
      <span class="type" :class="{'multi': currentQuestion.typeId == 2, 'top-1': isAndroid}">
        <span :class="{'top-2': isAndroid}">{{currentQuestion.typeId == 1 ? "单选题" : currentQuestion.typeId == 2 ? "多选题" : "判断题"}}</span>
      </span>
      <span class="content" v-html="currentQuestion.question"></span>
      <!-- <img src="https://files.yunqueyi.com/image/png/protal/project/20200702161856970.png" /> -->
    </article>
    <article class="select-wrapper">
      <div
        class="item"
        v-for="(item, index) in currentQuestion.options"
        :key="index"
        @click="selectOption(index)"
      >
        <span
          v-if="!item.isSelected && !((item.isSelected && !currentQuestion.commitFlag) || (!item.isSelected && currentQuestion.commitFlag && item.isCorrect))"
          class="option border"
        >{{getOrderVac(index)}}</span>
        <span
          v-else-if="(item.isSelected && !currentQuestion.commitFlag) || (!item.isSelected && currentQuestion.commitFlag && item.isCorrect)"
          class="option bg"
        >{{getOrderVac(index)}}</span>
        <template v-else>
          <img v-if="item.isSelected && item.isCorrect" src="../../images/question/correct.png" alt />
          <img v-if="item.isSelected && !item.isCorrect" src="../../images/question/error.png" alt />
        </template>
        <span
          v-if="!currentQuestion.commitFlag"
          class="content"
          :class="{'select': item.isSelected}"
        >{{currentQuestion.unionType == 2 ? getOrderVac(index) : item.text}}</span>
        <span
          v-else
          class="content"
          :class="{'select': item.isCorrect, 'error': item.isSelected && !item.isCorrect}"
        >{{currentQuestion.unionType == 2 ? getOrderVac(index) : item.text}}</span>
      </div>
    </article>
    <article
      class="c-btn-wrapper"
      v-show="currentQuestion.typeId == 2 && !currentQuestion.commitFlag"
      @click="commitAnswer()"
    >
      <van-button size="large" round color="#449284">确 认</van-button>
    </article>
    <article class="answer-wrapper" v-show="currentQuestion.isAnalyzed">
      <span class="content">正确答案：{{getShowAnswer(currentQuestion.answer)}}</span>
    </article>
    <article class="analysis-wrapper" v-show="currentQuestion.isAnalyzed">
      <span class="title">解析</span>
      <div v-show="currentQuestion.intro && !currentQuestion.intro.startsWith('<img')" class="content" v-html="currentQuestion.intro"></div>
      <div v-show="currentQuestion.intro && currentQuestion.intro.startsWith('<img')" class="content-nmt" v-html="currentQuestion.intro"></div>
      <div class="no-intro" v-show="!currentQuestion.intro">
          <img src="../../images/question/no-analysis.png" alt />
          <span class="text">暂无相关解析</span>
      </div>
    </article>
  </section>
</template>
<script>
import commonSpliteLine from "@/components/common/common-splite-line";
import { mapGetters, mapActions } from "vuex";
import { getOrderText } from "@/utils";

export default {
  components: {
    commonSpliteLine
  },
  props: {
    questionObj: {
      type: Array,
      default: () => {}
    }
  },
  computed: {
    ...mapGetters([
      "questionList",
      "currentQuestion",
      "commonConfig",
      "titleConfig",
      "userInfo"
    ])
  },
  data() {
    return {
      isAndroid: window.__isAndroid
    };
  },
  methods: {
    // 处理多选答案
    getShowAnswer(answerStr) {
      if(!answerStr) return "";
      return answerStr.split(",").join("、");
    },

    // 将序号转成字母
    getOrderVac(index) {
      return getOrderText(index);
    },

    // 选择选项
    selectOption(index) {
      if (this.currentQuestion.commitFlag) return;
      // 多选题 -- 重新设置答案（myAnswer）
      if (this.currentQuestion.typeId == 2) {
        // 只记录当前选项，不提交答案
        this.currentQuestion.options[index].isSelected = !this.currentQuestion.options[index].isSelected;
        let myAnswer = "";
        this.currentQuestion.options.forEach((item, index) => {
          if (item.isSelected) {
            myAnswer += this.getOrderVac(index);
          }
        });
        myAnswer = myAnswer.split("").join(",");
        this.currentQuestion.myAnswer = myAnswer;
      } else {
        this.currentQuestion.options[index].isSelected = true;
        // 单选题或者判断题直接设置commitFlag
        if (this.currentQuestion.options[index].isCorrect) {
          this.currentQuestion.commitFlag = 1;
        } else {
          this.currentQuestion.commitFlag = 2;
        }
        let myAnswer = this.getOrderVac(index);
        let isAnalyzed =
          this.currentQuestion.commitFlag &&
          myAnswer != this.currentQuestion.answer;
        this.currentQuestion.isAnalyzed = isAnalyzed;
        this.currentQuestion.myAnswer = this.getOrderVac(index);
        this.commitAnswer();
      }
      this.$forceUpdate();
      console.log("in commit", this.currentQuestion.myAnswer);
    },

    // 提交答案
    commitAnswer() {
      this.checkTokenForNative( () => {
        let params = {
          commitKind: this.commonConfig.commitKind, // 答题来源 1：错题集 2：收藏 3：题库
          directoryId: this.currentQuestion.directoryId, // 题库ID
          myAnswer: this.currentQuestion.myAnswer, // 我的答案，单选时单个答案，如A；多选答案，按照顺序使用
          paperId: this.currentQuestion.paperId, // 试卷ID
          paperIndex: this.currentQuestion.paperIndex, // 试卷索引（随机试卷的第n套）
          resultId: this.titleConfig.resultId, // 刷题库轮次ID，刷收藏和错题集时为0
          // rightFlag: 1,                                // 答题对错：1对 2错
          titleId: this.currentQuestion.titleId, // 题目ID
          titleNo: this.currentQuestion.titleNo, // 题目ID
          setEntry: true,
          token: this.userInfo.userToken
        };
        // 计算是否答对了题目（只有多选题，才做相应处理）
        // if (this.currentQuestion.typeId == 2) {
          let isRight = this.currentQuestion.myAnswer == this.currentQuestion.answer;
          if (isRight) {
            this.currentQuestion.commitFlag = 1;
          } else {
            this.currentQuestion.commitFlag = 2;
            this.currentQuestion.isAnalyzed = true;
          }
        // }
        this.POST(`onlineexam/practise/commit`, params).then(({ data }) => {
          console.log('in commitAnswer res', data);
          // if(data.resultType == 1) {
          //   this.currentQuestion.commitFlag = 1;
          // } else {
          //   this.currentQuestion.commitFlag = 2;
          // }
        }).catch( error => {
          this.currentQuestion.commitFlag = 0;
          this.currentQuestion.isAnalyzed = false;
        })
      });
    }
  }
};
</script>
<style lang="less">
  .qeustion-content-wrapper, .title-wrapper, .answer-wrapper, .analysis-wrapper {
    .content {
      img {
        margin-top: 15px;
        max-width: 100% !important;
      }
    }    
    .content-nmt {
      img {
        margin-top: 0;
        max-width: 100% !important;
      }
    }
  }
</style>
<style lang="less" scoped>
.qeustion-content-wrapper {
  // img {
  //   width: 98% !important;
  // }
  font-size: 14px;
  .content {
    .text {
      padding: 20px 15px;
      font-size: 14px;
      color: #373839;
    }
  }
  .title-wrapper {
    padding: 20px 15px 15px;
    box-sizing: border-box;
    .type {
      position: relative;
      top: 2.8px;
      left: 0;
      display: inline-block;
      width: 47px;
      height: 16px;
      line-height: 12px;
      margin-right: 4px;
      border-radius: 2px;
      background: #5890dd;
      font-size: 12px;
      & > span {
        position: absolute;
        top: 2px;
        left: 4.5px;
        color: #ffffff;
        &.top-2 {
          top: 2.8px;
        }
      }
      &.multi {
        background: #e6a23c;
      }
      &.top-1 {
        top: 1px;
      }
    }
    .content {
      font-size: 16px;
      font-weight: 700;
      color: #333333;
      // & > img {
      //   margin-top: 15px !important;
      //   width: 100% !important;
      // }
    }
    img {
      margin-top: 15px !important;
      width: 100% !important;
    }
  }
  .select-wrapper {
    padding: 0 15px 8px;
    .item {
      display: flex;
      // height: 40px;
      // line-height: 1.2;
      font-size: 16px;
      align-items: center;
      padding: 8px 0;
      .option {
        display: block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        // vertical-align: middle;
        margin-right: 10px;
        color: #373839;
        &.border {
          border: 1px solid #c7c8c9;
          border-radius: 50%;
          line-height: 19px;
        }
        &.bg {
          color: #fff;
          background: #449284;
          border-radius: 50%;
        }
        &.lh-22 {
          line-height: 22px;
        }
      }
      & > img {
        width: 18px;
        height: 18px;
        margin-right: 10px;
      }
      .select {
        color: #449284;
      }
      .error {
        color: #ed3131;
      }
    }
  }
  .c-btn-wrapper {
    padding: 20px 15px;
  }
  .answer-wrapper {
    margin: 20px 15px;
    border-radius: 6px;
    height: 40px;
    line-height: 40px;
    background: #f8f9fa;
    .content {
      margin: 10px 0;
      height: 16px;
      line-height: 1;
      font-size: 16px;
      font-weight: 700;
      padding: 0 15px;
    }
  }
  .analysis-wrapper {
    padding: 15px 15px 30px;
    .title {
      display: flex;
      height: 16px;
      line-height: 1;
      margin-bottom: 15px;
      font-size: 16px;
      font-weight: 700;
      color: #373839;
      &::before {
        display: inline-block;
        content: "";
        height: 15px;
        width: 3px;
        margin-right: 9px;
        background: #f68367;
        border-radius: 2px;
      }
    }
    .content {
      font-size: 14px;
      font-weight: 400;
      color: #373839;
      & > img {
        width: 100% !important;
      }
    }
    .no-intro {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 60px 0 120px;
      img {
        width: 100px;
        height: 100px;
      }
      .text {
        height: 12px;
        line-height: 12px;
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
</style>
