<template >
  <div class="preview_container">
    <el-card>
      <div class="paper_header">
        <div class="paper_title">{{ title }}</div>
      </div>
      <!-- 题目组 -->
      <div class="paper_questions" id="question_list">
        <div class="que_item" v-for="(item, index) in queList" :key="item.id">
          <!-- 题目 -->
          <div class="que_content" style="display: flex">
            <div>{{ index + 1 }}.</div>
            <span v-html="item.title"></span>
          </div>
          <!-- 选项 -->
          <div class="options">
            <el-radio-group v-model="answerForm[item.id]">
              <div class="option" v-if="item.optionA">
                <el-radio label="A">
                  <div style="margin-right: 5px">A:</div>
                  <div v-html="item.optionA"></div>
                </el-radio>
              </div>
              <div class="option" v-if="item.optionB">
                <el-radio label="B">
                  <div style="margin-right: 5px">B:</div>
                  <div v-html="item.optionB"></div>
                </el-radio>
              </div>
              <div class="option" v-if="item.optionC">
                <el-radio label="C">
                  <div style="margin-right: 5px">C:</div>
                  <div v-html="item.optionC"></div>
                </el-radio>
              </div>
              <div class="option" v-if="item.optionD">
                <el-radio label="D">
                  <div style="margin-right: 5px">D:</div>
                  <div v-html="item.optionD"></div>
                </el-radio>
              </div>
            </el-radio-group>
          </div>
        </div>
      </div>

      <!-- 保存练习 -->
      <div class="save">
        <span @click="savePractice">提交答案</span>
      </div>
    </el-card>
    <!-- 提示 -->
    <el-dialog title="警告" :visible.sync="dialogVisible" width="30%">
      <span style="color: red">尚未完成答题</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">返回做题</el-button>
      </span>
    </el-dialog>
    <div class="exam_time">用时:{{ secondStr }}</div>
  </div>
</template>
<script>
import {
  getQuestionsByChapter,
  getQuestionsByKnowledge,
  savePractice,
} from "@/api/webApi/webQue.js";

export default {
  data() {
    return {
      title: "",
      knowledgeId: 0,
      chapterId: 0,
      queList: [],
      answerForm: {},
      dialogVisible: false,
      subjectId: 0,
      secondStr: 0,
      second: 0,
    };
  },
  created() {
    //  开启记时
    this.timing();
    this.knowledgeId = this.$route.query.knowledgeId;
    this.chapterId = this.$route.query.chapterId;
    this.subjectId = this.$route.query.subjectId;
    this.title = this.$route.query.title;
    if (this.chapterId) {
      getQuestionsByChapter({ chapterId: this.chapterId }).then((res) => {
        this.queList = this.formatQueList(res.data);
        this.answerForm.key = console.log(res);
        this.$nextTick((_) => this.mxGlobal.MathQueue("question_list"));
      });
    } else if (this.knowledgeId) {
      getQuestionsByKnowledge({ knowledgeId: this.knowledgeId }).then((res) => {
        this.queList = this.formatQueList(res.data);
        this.$nextTick((_) => this.mxGlobal.MathQueue("question_list"));
        console.log(res);
      });
    }
  },
  methods: {
    /**
     * 格式化数据  去除\
     */
    formatQueList(data) {
      // let len = data.length;
      // for (let i = 0; i < len; i++) {
      //   let item = data[i];
      //   item["title"] = item["title"].replace(/[\\]/g, "");
      //   item["optionA"] = item["optionA"].replace(/[\\]/g, "");
      //   item["optionB"] = item["optionB"].replace(/[\\]/g, "");
      //   item["optionC"] = item["optionC"].replace(/[\\]/g, "");
      //   item["optionD"] = item["optionD"].replace(/[\\]/g, "");
      // }
      return data;
    },
    savePractice() {
      if (Object.keys(this.answerForm).length >= this.queList.length) {
        if (this.knowledgeId) {
          savePractice({
            answers: this.answerForm,
            knowledgeId: this.knowledgeId,
            subjectId: this.subjectId,
            seconds: this.second,
          }).then((res) => {
            console.log("--------------------------", res);
            this.$router.push({
              path: "/question-center/smartExercise/answerDetailas",
              query: {
                info: encodeURIComponent(JSON.stringify(res.data)),
                type: 1,
                knowledgeId: this.knowledgeId,
              },
            });
          });
        } else if (this.chapterId) {
          savePractice({
            answers: this.answerForm,
            chapterId: this.chapterId,
            subjectId: this.subjectId,
            seconds: this.second,
          }).then((res) => {
            this.$router.push({
              path: "/question-center/smartExercise/answerDetailas",
              query: {
                info: encodeURIComponent(JSON.stringify(res.data)),
                type: 1,
              },
            });
          });
        }
      } else {
        this.dialogVisible = true;
        console.log("继续选题");
      }
    },
    timing() {
      let hour = 0;
      let minute = 0;
      let second = 0;
      let count = this.secondStr / 1000;
      clearInterval(this.timeInterval);
      this.timeInterval = setInterval(() => {
        hour = parseInt(count / 3600);
        minute = parseInt((count / 60) % 60);
        second = parseInt(count % 60);
        this.secondStr =
          this.toDouble(hour) +
          ":" +
          this.toDouble(minute) +
          ":" +
          this.toDouble(second);
        count++;
        this.second = count;
      }, 1000);
    },
    // 时间补0
    toDouble(n) {
      if (n < 10) {
        return "0" + n;
      } else {
        return "" + n;
      }
    },
  },
};
</script>
<style scoped>
.preview_container {
  padding: 20px;
}
.paper_header {
  overflow: hidden;
  margin-bottom: 33px;
}
.paper_title {
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #292929;
  line-height: 25px;
  float: left;
}
.operation {
  float: right;
}
.shoucan {
  display: flex;
  align-items: center;
  margin-right: 53px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
.shoucan img {
  margin-right: 6px;
  cursor: pointer;
}
.shoucan .sc_text {
  color: #9f9f9f;
  line-height: 20px;
  cursor: pointer;
  margin-right: 28px;
}
.shoucan .btn {
  padding: 6px 20px;
  cursor: pointer;
  background: #47c6a2;
  color: white;
  border-radius: 4px;
}
.que_item {
  border-radius: 1px;
  border: 1px solid #dedede;
  margin-bottom: 8px;
}
.que_content {
  padding: 12px 24px 0 33px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #4c4c4c;
  line-height: 27px;
  margin-bottom: 40px;
}
.options {
  padding-left: 36px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #4c4c4c;
  line-height: 27px;
}
.options .option {
  margin-bottom: 10px;
}

.operation {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #47c6a2;
  line-height: 20px;
}
.operation > div {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.operation .shoucan {
  margin-right: 46px;
}
.operation .detail span {
  border-radius: 1px;
  border-bottom: 1px solid #47c6a2;
}
.operation .detail {
  margin-right: 32px;
}
.operation > div > img {
  margin-right: 10px;
}
.operation .addQue {
  padding: 7px;
  border-radius: 4px;
  border: 1px solid #979797;
  margin-right: 24px;
}
.info {
  padding: 12px 40px;
}
.que_item p {
  margin: 0 !important;
}
.save {
  display: flex;
  justify-content: center;
}
.save span {
  padding: 20px;
  background: #47c6a2;
  color: white;
  cursor: pointer;
}
.exam_time {
  position: fixed;
  right: 0;
  color: white;
  background: #47c6a2;
  top: 50%;
  padding: 5px 10px;
}
</style>
<style scoped>
/deep/.paper_questions .options .el-radio {
  display: flex;
}
/deep/.paper_questions .options .el-radio:hover {
  color: #47c6a2;
}
/deep/.paper_questions .options .el-radio__label {
  display: flex;
}
</style>
