<template>
  <div class="el-dialog-wrapper" v-show="diaVisible" width="400" center @click.self="cancel">
    <div class="el-dialog-content">
      <p class="title">
        <!-- 设置答案 <i class="fa fa-exchange" @click="editType = !editType"></i> -->
        设置答案
        <i class="el-icon-close" @click="cancel"></i>
      </p>
      <div v-show="editType">
        <div v-for="(item, index) in FormQuestionList" :key="index">
          <template v-for="(subQuestions, indexs) in item.subQuestions">
            <div
              class="sub-questions"
              :key="indexs"
              v-if="subQuestions.correctAnswer"
            >
              <div class="qs-num">题{{ subQuestions.questionIndex }}</div>
              <div class="qs-options qs-options2">
                <p v-if="subQuestions.questionType == 4" class="answer-box">
                  <span
                    class="answer-s"
                    :class="subQuestions.correctAnswer == 1 ? 'active' : ''"
                    @click="subQuestions.correctAnswer = 1"
                    >✓</span
                  >
                  <span
                    class="answer-s"
                    :class="subQuestions.correctAnswer == 2 ? 'active' : ''"
                    @click="subQuestions.correctAnswer = 2"
                    >✗</span
                  >
                </p>
                <p v-if="subQuestions.questionType == 3" class="answer-box">
                  <span
                    class="answer-s"
                    v-for="option in subQuestions.answerOptions"
                    :class="
                      subQuestions.correctAnswer.includes(option)
                        ? 'active'
                        : ''
                    "
                    :key="option"
                    @click="changAnswer(subQuestions, option)"
                    >{{ option }}</span
                  >
                </p>
                <p v-if="subQuestions.questionType == 2" class="answer-box">
                  <span
                    class="answer-s"
                    v-for="option in subQuestions.answerOptions"
                    :class="
                      subQuestions.correctAnswer == option ? 'active' : ''
                    "
                    :key="option"
                    @click="subQuestions.correctAnswer = option"
                    >{{ option }}</span
                  >
                </p>
              </div>
            </div>
          </template>
        </div>
      </div>
      <!-- <div v-show="!editType">
        <p class="dia-tips">
            请点击选项按钮设置答案,多选题题目之间用“,”隔开，若添加5道题：“AC,AD,BD,AC,CD”
          </p>
        <div class="dia-question-box">
          <div v-for="(item, index) in FormQuestionList2" :key="index">
            <template v-for="(items, indexs) in item.subQuestions">
              <div class="set-questions" :key="indexs">
                <div class="qs-num">
                  <p>{{ items.name }}</p>
                  <p>共{{ items.list.length }}题</p>
                </div>
                <div class="qs-options">
                  <p class="ipt">
                    <el-input
                      v-model="items.answerList"
                      @keydown.native="keydownAnswer($event)"
                    ></el-input>
                  </p>
                  <p class="answer-box">
                    <template v-if="items.list[0].questionType == 4">
                      <span
                        class="answer-s active"
                        @click="
                          items.answerList.length < items.list.length
                            ? (items.answerList += '✓')
                            : ''
                        "
                        >✓</span
                      >
                      <span
                        class="answer-s active"
                        @click="
                          items.answerList.length < items.list.length
                            ? (items.answerList += '✗')
                            : ''
                        "
                        >✗</span
                      >
                    </template>
                    <template v-if="items.list[0].questionType == 3">
                      <span
                        class="answer-s active"
                        v-for="option in items.list[0].answerOptions"
                        :key="option"
                        @click="setAnswer(items,option)"
                        >{{ option }}</span
                      >
                      <span
                        class="answer-s active"
                        @click="
                          items.answerList.split(',').length < items.list.length
                            ? (items.answerList += ',')
                            : ''
                        "
                        >,</span
                      >
                    </template>
                    <template
                      v-if="items.list[0].questionType == 2"
                      class="answer-box"
                    >
                      <span
                        class="answer-s active"
                        v-for="option in items.list[0].answerOptions"
                        :key="option"
                        @click="
                          items.answerList.length < items.list.length
                            ? (items.answerList += option)
                            : ''
                        "
                        >{{ option }}</span
                      >
                    </template>
                    <span
                      class="answer-s delButton"
                      @click="items.answerList = items.answerList.slice(0, -1)"
                      >x</span
                    >
                    <span
                      class="answer-s ac"
                      @click="items.answerList = ''"
                      >AC</span
                    >
                  </p>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div> -->
      <div class="footer-box">
        <el-button class="dia-btn" type="primary" @click="saveAnswer"
          >确 定</el-button
        >
        <el-button class="dia-btn" type="danger" @click="cancel"
          >取 消</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { deepClone } from "utils";
export default {
  name: "SetAnswer",
  props: {
    diaVisible: false, //修改答案
    paperId: "",
    questionList: Array,
  },
  data() {
    return {
      editType: true, //修改答案模式
      FormQuestionList: [],
    };
  },
  watch: {
    questionList: {
      handler: function () {
        this.FormQuestionList = deepClone(this.questionList);
        console.log(this.questionList);
        //组合每道大题中的相同题目
        // let questionList = deepClone(item.questionList);
        // for (let i = 0; i < questionList.length; i++) {
        //   let jsons = {};
        //   let answerOptions = [];
        //   questionList[i].subQuestions.map((items) => {
        //     let txt = this.setSubPro(items.questionType);
        //     if (jsons[txt]) {
        //       jsons[txt].push(items);
        //     } else {
        //       jsons[txt] = [items];
        //     }
        //     if (items.questionType == 2 || items.questionType == 3) {
        //       if (items.answerOptions.length > answerOptions.length) {
        //         answerOptions = items.answerOptions;
        //       }
        //       jsons[txt][0].answerOptions = answerOptions;
        //     }
        //   });
        //     this.FormQuestionList2[i].subQuestions = Object.keys(jsons).map(
        //     (item) => {
        //       return {
        //         name: item,
        //         list: jsons[item],
        //         answerList: "",
        //       };
        //     }
        //   );
        // }
      },
      deep: true,
    },
  },
  methods: {
    setSubPro(type) {
      let tit;
      switch (type) {
        case 2:
          tit = "单选题";
          break;
        case 3:
          tit = "多选题";
          break;
        case 4:
          tit = "判断题";
          break;
        case 5:
          tit = "主观题";
          break;
      }
      return tit;
    },
    keydownAnswer(event) {
      //快速答案设置禁止输入
      if (
        event.key == "Meta" ||
        event.key == "CapsLock" ||
        event.key == "Shift" ||
        event.key == "Enter" ||
        event.key == "Alt" ||
        event.key == "Backspace" ||
        event.key == "Delete" ||
        event.key == "ArrowUp" ||
        event.key == "ArrowDown" ||
        event.key == "ArrowLeft" ||
        event.key == "v" ||
        event.key == "V" ||
        event.key == "ArrowRight"
      ) {
        return;
      } else {
        event.returnValue = "";
      }
    },
    setAnswer(obj, answer) {
      //多选答案设置
      obj.answerList += answer;
      let str = obj.answerList;
      let str2 = checkAnswer(
        str,
        3,
        obj.list[0].answerOptions,
        obj.list.length
      );
      obj.answerList = str2;
    },
    changAnswer(sub, option) {
      //设置多选答案
      let str = new RegExp(option, "g");
      if (sub.correctAnswer?.includes(option)) {
        sub.correctAnswer = sub.correctAnswer.replace(str, "");
      } else {
        let arrs = (sub.correctAnswer && sub.correctAnswer.split("")) || [];
        arrs.push(option);
        sub.correctAnswer = arrs.sort().join("");
      }
    },
    async saveAnswer() {
      const { data, status, message } = await this.$request.modifyPaper({
        paperId: this.paperId,
        questionList: questionList,
      });
      if (status == 0) {
        this.$emit("saveSuccess");
      } else {
        this.$message.error(message);
      }
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2022;
  .el-dialog-content {
    width: 600px;
    background:#fff;
    border-radius: 10px;
    padding:16px 20px 20px;
  }
  .title{
    font-size: 18px;
    position: relative;
    margin-bottom:20px;
    .el-icon-close{
      position: absolute;
      top:0;
      right:12px;
      padding:2px;
      font-size: 16px;
      cursor: pointer;
      &:hover{
        color: #667ffa;
      }
    }
  }
}
.footer-box {
  text-align: center;
  padding-top:20px;
}
.sub-questions {
  width: 100%;
  display: flex;
  &:hover {
    background: #f8f8f8;
  }
  & > div {
    min-height: 40px;
    padding: 5px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .qs-num {
    width: 80px;
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }
  .qs-options {
    flex: 1;
  }
  .qs-options2 {
    text-align: left;
    justify-content: flex-start;
    padding-left: 20px;
    .answer-s {
      cursor: pointer;
      border-color: #667ffd;
      color: #667ffd;
      margin: 0 15px;
      &.active {
        color: #fff;
      }
    }
  }
  :deep(.el-select) {
    .el-input__inner {
      border-radius: 20px;
      border-color: #667ffd;
      width: 150px;
      height: 32px;
      line-height: 32px;
      background: rgba($color: #667ffd, $alpha: 0.05);
    }
    .el-input__icon {
      line-height: 32px;
    }
  }
}
</style>