<template>
  <div class="answer_main" id="title">
    <div class="">
      <!-- 大题 -->
      <div style="display: flex; justify-content: flex-start">
        <div>{{ currentQuestion.seq || 1 }}、</div>
        <div class="answer_main_title" style="flex: 1" v-html="currentQuestion.title"></div>
      </div>
      <!-- 小题 -->
      <div style="padding-left: 50px" v-if="currentQuestion.subQuestions">
        <div style="margin-bottom: 15px" v-for="(subItem, ix) in currentQuestion.subQuestions" :key="ix">
          <div v-html="ix + 1 + '、' + subItem.title"></div>
          <template v-if="subItem.options&&subItem.options.length">
            <div style="margin-top: 20px">
              <div v-for="(itemOpt, idx) in subItem.options" :key="idx">
                <div style="margin-bottom: 15px" v-html="selectOpt[idx] + ' 、 ' + itemOpt"></div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div>
      <template v-if="currentQuestion.typeId == 1">
        <div style="margin-top: 20px">
          <div v-for="(itemOpt, idx) in currentQuestion.options" :key="idx">
            <template v-if="dataDetail.state == 3 || dataDetail.state == 4">
              <!-- 答题 -->
              <el-radio style="margin-bottom: 15px" v-model="currentQuestion.answer" :label="selectOpt[idx]" border size="medium">{{ selectOpt[idx] + " 、 "
                }}<span style="white-space: normal" v-html="itemOpt"></span></el-radio>
            </template>
            <template v-else>
              <!-- 查看 -->
              <el-radio-group v-model="currentQuestion.answer">
                <el-radio style="margin-bottom: 15px" :class="{
                  'is-checked' : currentQuestion.answers[0].includes(selectOpt[idx]),
                  'is-error': currentQuestion.answer.includes(selectOpt[idx]) && !currentQuestion.answers[0].includes(selectOpt[idx])
                }" :label="selectOpt[idx]" disabled border size="medium">{{ selectOpt[idx] + " 、 "
                }}<span style="white-space: normal" v-html="itemOpt"></span></el-radio>
              </el-radio-group>
              <!--  currentQuestion.answers[0] == selectOpt[idx] 表示正确答案  红色-->
              <!-- currentQuestion.answer== selectOpt[idx] && currentQuestion.answers[0]!= selectOpt[idx] 表示当前答案 蓝色-->
            </template>
          </div>
        </div>
      </template>
      <template v-if="currentQuestion.typeId == 3">
        <div style="margin-top: 20px" id="dati">
          <!-- 遍历客观题的答题项 -->
          <div v-for="(itemOpt, idx) in currentQuestion.options" :key="idx">
            <!-- todo 只在state为3和4的时候可以做题 -->
            <template v-if="
                (dataDetail.state == 3 ||
                dataDetail.state == 4 ||
                dataDetail.state == 7)&& isAnswer

              ">
              <!-- 答题 -->
              <el-checkbox-group v-model="currentQuestion.answer" @change="changeCheckbox">
                <el-checkbox style="margin-bottom: 15px" :label="selectOpt[idx]" border size="medium">{{ selectOpt[idx] + ' 、 '
                }}<span style="white-space: normal" v-html="itemOpt"></span></el-checkbox>
              </el-checkbox-group>
            </template>
            <template v-else>
              <!-- 查看 -->
              <el-checkbox-group v-model="currentQuestion.answer">
                <el-checkbox v-if="currentQuestion.answer.length" style="margin-bottom: 15px" :class="{
                  'is-checked' : currentQuestion.answers[0].includes(selectOpt[idx]),
                  'is-error': currentQuestion.answer.includes(selectOpt[idx]) && !currentQuestion.answers[0].includes(selectOpt[idx])
                }" :label="selectOpt[idx]" disabled border size="medium">{{ selectOpt[idx] + ' 、 '
                }}<span style="white-space: normal" v-html="itemOpt"></span></el-checkbox>
              </el-checkbox-group>
            </template>
          </div>
        </div>
      </template>
      <template>
        <div class="answer_main_btn">
          <el-button v-if="dataDetail.state == 3 || dataDetail.state == 4" :type="solvingType == 1 ? 'primary' : ''" @click="answerFunc(1)">手动答题
          </el-button>
          <el-button v-if="dataDetail.state == 3 || dataDetail.state == 4" :type="solvingType == 2 ? 'primary' : ''" @click="answerFunc(2)"><i class="el-icon-camera-solid"></i>拍照上传
          </el-button>
          <el-button v-if="dataDetail.state == 5" :type="solvingType == 3 ? 'primary' : ''" @click="answerFunc(3)">
            解析
          </el-button>
          <el-button v-if="canScore && dataDetail.state == 5" :type="solvingType == 4 ? 'primary' : ''" @click="answerFunc(4)">
            计分
          </el-button>
          <span v-if="dataDetail.state != 3 && dataDetail.state != 4 && showScore" class="font_color_brown">得分：{{ currentQuestion.score || 0 }}分</span>
        </div>
        <div class="upload_container" v-loading="loading">
          <template v-if="solvingType == 1">
            <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="currentQuestion.answer">
            </el-input>
          </template>
          <template v-if="solvingType == 2">
            <!-- 答题图片展示 -->
            <ul class="el-upload-list el-upload-list--picture-card" v-if="currentQuestion.typeId == 2">
              <li tabindex="0" class="el-upload-list__item is-ready el-list-enter-to" v-for="(img, index) in currentQuestion.cacheFiles" :key="index">
                <img :src="img" alt="" class="el-upload-list__item-thumbnail" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(img)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span class="el-upload-list__item-delete" @click="deleteImg(index)" v-if="dataDetail.state == 3 || dataDetail.state == 4"><i class="el-icon-delete"></i></span>
                </span>
              </li>
            </ul>
            <!-- 上传图片 -->
            <label class="el-upload el-upload--picture-card" v-if="
                (dataDetail.state == 3 || dataDetail.state == 4) &&
                currentQuestion.typeId == 2
              "><i class="el-icon-plus"></i><input type="file" ref="upFile" name="file" accept="image/*" class="el-upload__input" @change="UploadImage" /></label>
          </template>
          <template v-if="solvingType == 3">
            <!-- 解析 -->
            <el-row :gutter="24" id="parse">
              <el-col v-if="currentQuestion.typeId != 1" :span="12">
                <div style="padding: 30px">
                  <div v-html="'答：' + (currentQuestion.answer || '')"></div>
                  <div v-if="currentQuestion.typeId == 2">
                    <ul class="el-upload-list el-upload-list--picture-card">
                      <li tabindex="0" class="el-upload-list__item is-ready el-list-enter-to" v-for="(img, index) in currentQuestion.attachments" :key="index">
                        <img :src="img" alt="" class="el-upload-list__item-thumbnail" />
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(img)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                      </li>
                    </ul>
                  </div>
                </div>
              </el-col>
              <el-col :span="currentQuestion.typeId == 1 ? 24 : 12">
                <div>
                  <div style="padding: 30px" v-html="currentQuestion.parse"></div>
                </div>
              </el-col>
            </el-row>
          </template>
          <!-- 记分 -->
          <template v-if="solvingType == 4">
            <el-row :gutter="24">
              <el-col :span="12">
                <div style="padding: 30px">
                  <div v-html="'答：' + (currentQuestion.answer || '')"></div>
                  <div v-if="currentQuestion.typeId == 2">
                    <ul class="el-upload-list el-upload-list--picture-card">
                      <li tabindex="0" class="el-upload-list__item is-ready el-list-enter-to" v-for="(img, index) in currentQuestion.attachments" :key="index">
                        <img :src="img" alt="" class="el-upload-list__item-thumbnail" />
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(img)">
                            <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                      </li>
                    </ul>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" class="text-center">
                <div style="margin-top: 30px">
                  此题总分{{ currentQuestion.scoreTotal || '--' }}分
                </div>
                <div style="margin-top: 30px">
                  <el-input :disabled="currentQuestion.typeId == 1" class="fenshu" type="number" v-model="score" min="0" :max="currentQuestion.scoreTotal" placeholder="请输入内容" @change="
                      score > currentQuestion.scoreTotal
                        ? (score = currentQuestion.scoreTotal)
                        : (score = Math.floor(score));
                      score < 0 ? (score = 0) : (score = Math.floor(score));
                    "></el-input>
                  <el-input style="width: 50%; margin: 20px 0" type="textarea" :rows="2" placeholder="请输入批阅内容" maxlength="200" v-model="comment" v-if="false">
                  </el-input>
                </div>

                <el-button style="margin-top: 30px; margin-bottom: 30px; width: 100px" type="success" round @click="scoreExamineeQuestion">提交
                </el-button>
              </el-col>
            </el-row>
          </template>
          <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import {
  openWrongQuestion,
  openQuestion,
  scoreWrongQuestion,
} from "@/api/webApi/front";
//import { scoreWrongQuestion } from "@/api/webApi/studentEvaluating";
export default {
  // TODO: 和answer页面需要形成重用组件
  props: {
    questionId: {
      type: Number | String,
      default: 0,
    },
    examineeId: {
      type: Number | String,
      default: 0,
    },
    customerCode: {
      type: String,
      default: "", // 错题模式下, 老师如果要查看解析需要传入错题人的customerCode
    },
    showScore: {
      type: Boolean,
      default: true, // 只读模式下只能查看结果，不能阅卷评分
    },
    canScore: {
      type: Boolean,
      default: false, // 只读模式下只能查看结果，不能阅卷评分
    },
    lockAnswerInSolving: {
      // 解析时不动答案，方便对比
      type: Boolean,
      default: false,
    },
    // 错模式使用接口openWrongQuestion，否则使用openQuestion
    // 错题模式与测评无关，没有当时的答案。 openQuestion是某一次测评的答题状态所以要带examineeId
    wrongMode: {
      type: Boolean,
      default: true,
    },
    displayQuestion: {
      type: Object,
      default: null,
    },
    initSolvingType: {
      type: Number | String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      selectOpt: ["A", "B", "C", "D", "E", "F", "G"],
      currentQuestion: {},
      subjectTime: 0,
      solvingType: 3,
      imgFileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      dataDetail: {
        state: 5
      },
      comment: "",
      score: 0,
    };
  },
  watch: {
    "currentQuestion.title": function (value) {
      if (value) this.$nextTick(() => this.mxGlobal.MathQueue("title"));
    },
    solvingType: function (value) {
      if (value == 3) this.$nextTick(() => this.mxGlobal.MathQueue("parse"));
    },
  },
  created() {
    if (this.initSolvingType) this.solvingType = this.initSolvingType;
    if (this.displayQuestion != null) {
      console.log("displayQuestion", this.displayQuestion);
      this.currentQuestion = this.displayQuestion;
      return;
    }
    this.getQuestionById();
  },
  methods: {
    getQuestionById() {
      if (!this.questionId) return;
      let questionMethod = openQuestion;
      this.wrongMode ? openWrongQuestion : openQuestion;
      let methodName = "openQuestion";
      let questionParams = {
        questionId: this.questionId,
        examineeId: this.examineeId,
      };
      if (this.wrongMode) {
        questionMethod = openWrongQuestion;
        methodName = "openWrongQuestion";
        questionParams = {
          questionId: this.questionId,
          isReview: true, // 如果为true，会返回答案
        };
        if (this.customerCode) questionParams.code = this.customerCode;
      }
      questionMethod(questionParams).then((rep) => {
        console.log(
          methodName + " rep=",
          rep,
          this.solvingType,
          this.initSolvingType
        );
        if (rep.code == 200 || rep.code == 0) {
          // 加一些容错处理,
          this.currentQuestion = rep.data || {};
          this.currentQuestion.title = this.currentQuestion.title || "";
          this.currentQuestion.answers = this.currentQuestion.answers || ["", "",];
          this.currentQuestion.answer = this.currentQuestion.answer || ''
          this.comment = this.currentQuestion.comment;
          if (this.currentQuestion.typeId == 1)
            this.score = this.currentQuestion.answer == this.currentQuestion.answers[0] ?
              this.currentQuestion.scoreTotal : 0;
          else if (this.currentQuestion.typeId == 3) {
            this.score = this.currentQuestion.answer == this.currentQuestion.answers[0] ?
              this.currentQuestion.scoreTotal : 0;
            this.currentQuestion.answer = this.currentQuestion.answer.split(',')
          }
          console.log('display question', this.currentQuestion.answers.toString(), this.currentQuestion)
        } else {
          this.msgError(rep.msg || methodName + "请求异常");
        }
      });
    },
    // 答题方式
    answerFunc(type) {
      this.solvingType = type;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file;
      this.dialogVisible = true;
    },
    scoreExamineeQuestion() {
      if (this.score < 0) {
        this.msgError("请先打分");
        return;
      }
      var params = {
        questionId: this.currentQuestion.questionId,
        score: this.score || 0,
        comment: this.comment || "",
        answer: this.currentQuestion.answer.toString(),
        duration: this.currentQuestion.duration,
        attachments: this.currentQuestion.attachments,
      };
      scoreWrongQuestion(params).then((rep) => {
        if (rep.code == 200 || rep.code == 0) {
          this.$emit("scoreWrongCompleted");
        } else {
          this.msgError(rep.msg || "scoreWrongQuestion 请求异常");
        }
      });
    },
  },
};
</script>

<style>
.upload_container img {
  max-width: 100%;
}
</style>

<style scoped lang="scss">
.btn {
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  color: #606266;
  display: inline-block;
  cursor: pointer;
}

.font_color_brown {
  color: #d77616;
  font-size: 20px;
  margin-left: 10%;
}

.color_gblue {
  background-color: #cfdcd5;
  color: #ffffff;
}

.color_blue {
  background-color: #47c6a2;
  color: #ffffff;
}

.color_brown {
  background-color: #f77e67;
  color: #ffffff;
}

.color_gbrown {
  background-color: #fbd0a6;
  color: #ffffff;
}

.color_gray {
  background-color: #ffcbc1;
  color: #ffffff;
}

.answer_title {
  text-align: center;
  position: relative;

  img {
    width: 50px;
    height: 50px;
  }

  .answer_title_info {
    position: absolute;
    left: 10px;
    top: 10px;
    text-align: left;

    span {
      margin-right: 10px;
    }
  }

  .answer_title_name {
    font-size: 32px;
    font-weight: 500;
    margin: 5px 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
  }
}

.answer_main {
  .answer_main_title {
    margin-bottom: 30px;
    word-break: break-all;

    img {
      max-width: 100%;
    }
  }

  .answer_main_btn {
    margin: 10px 0;

    button {
      // margin-left: 20px;
    }

    .question_function_container {
      position: absolute;
      top: 0;
      right: 0;
      text-align: right;
      display: flex;

      .question_function_item {
        margin-left: 20px;
        padding: 5px 0;
        cursor: pointer;
        display: flex;

        span {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        i,
        img {
          margin-right: 5px;
        }

        .question_function_image {
          width: 24px;
          font-size: 24px;
          color: orange;
        }
      }
    }
  }

  .upload_container {
    border: 1px solid #6cd1b5;
    padding: 10px;
    border-radius: 8px;
    min-height: 200px;
  }

  .answer_footer_btn {
    display: flex;
    justify-content: space-between;
    margin: 15px 0 30px;

    .color_green_a {
      border: 1px solid #6cd1b5;
      color: #6cd1b5;
    }

    .prev_btn {
      padding: 0;
      border: 1px solid #dcdfe6;
      border-radius: 50%;
      color: #333;
      width: 35px;
      height: 35px;
      line-height: 35px;
      text-align: center;
    }

    .next_btn {
      padding: 0;
      border: 1px solid #dcdfe6;
      border-radius: 50%;
      color: #333;
      width: 35px;
      height: 35px;
      line-height: 35px;
      text-align: center;
    }

    .color_green_b {
      border: 1px solid #6cd1b5;
      background-color: #6cd1b5;
      color: #ffffff;
    }
  }

  .ft_green {
    color: #6cd1b5;
    margin: 30px 0;
  }
}

.answer_card {
  border: 1px solid #dcdfe6;
  padding-bottom: 15px;

  .card_title {
    text-align: center;
    font-size: 20px;
    padding: 15px;
  }

  .card_btn_container {
    padding: 15px 0 15px 15px;

    .card_btn {
      position: relative;
      padding: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      text-align: center;
      margin-right: 15px;
      margin-bottom: 15px;

      .ebtn_mblem {
        position: absolute;
        top: -5px;
        right: -5px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 14px;
        background-color: red;
        color: #ffffff;
        border-radius: 50%;
      }
    }
  }

  .card_timer {
    padding: 25px;
    text-align: center;
    color: #fd0303;
  }

  .card_footer {
    display: flex;
    justify-content: space-around;
  }
}
</style>
<style scoped>
.el-checkbox.is-bordered.is-checked,
.el-radio.is-bordered.is-checked {
  border-color: #47c6a2;
}

.el-checkbox.is-bordered.is-error,
.el-radio.is-bordered.is-error {
  border-color: #f56c6c;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #47c6a2;
  background: #47c6a2;
}

.el-radio.is-bordered.is-error /deep/ .el-radio__label {
  color: #f56c6c;
}

.el-radio.is-bordered.is-checked /deep/ .el-radio__label {
  color: #47c6a2;
}

.fenshu /deep/ .el-input__inner {
  width: 50%;
  line-height: 40px;
  border: none;
  background: #eee;
  color: #333;
  text-align: center;
}

.el-radio--medium.is-bordered {
  height: auto;
  padding-bottom: 8px;
}

.fenshu:focus-visible {
  outline: none;
}

/deep/ .el-textarea__inner {
  height: 180px;
}

/deep/ .el-dropdown-link {
  cursor: pointer;
  font-size: 16px;
  color: #333333;
}

/deep/ .el-icon-warning {
  font-size: 24px;
  color: #999999;
}

.el-checkbox.is-bordered.el-checkbox--medium {
  height: auto;
}
</style>
