<script>
import {
  getPracticeTopic,
  getTopicDetail,
  getTestCache,
  saveTestCache,
  submitPracticeTopic,
  getUserName,
  getPracticeDetails,
  getImgUrl,
  getCorrectImg,
} from "@/api/user";
import { sortString } from "@/util/tools";

export default {
  name: "examDetails",
  data() {
    return {
      // 题目详情
      testContent: {
        testType: "多选题",
        question:
          "1、以社会主义核心价值观为引领，发展社会主义先进文化，弘扬革命文化，传承中华优秀传统文化，满足人民日益增长的精神文化需求，巩固全党全国各族人民团结奋斗的共同思想基础，不断提升（ ）。",
        score: "10",
        your_answer: "",
        total:'',
        blanks_answer: [],
        options: [
          {
            item_letter: "A",
            item: "国家文化软实力和中华文化影响力",
          },
          {
            item_letter: "B",
            item: "国家文化硬实力和中华文化影响力",
          },
          {
            item_letter: "C",
            item: "国家文化硬实力和中华传统文化影响力",
          },
          {
            item_letter: "D",
            item: "国家文化硬实力和中华传统文化",
          },
        ],
      },
      testList: [],
      //题目数量
      testTypeNum: [
        {
          type: "单选题",
          children: [],
        },
        {
          type: "多选题",
          children: [],
        },
        {
          type: "判断题",
          children: [],
        },
        {
          type: "填空题",
          children: [],
        },
        {
          type: "简答题",
          children: [],
        },
      ],
      optionIndex: -1, // 选中的选项
      examDialogShow: false,
      // 考试请求参数
      params: {
        result_id: "",
      },
      //   题量总数
      questionTotal: 0,
      passScore: 0, //及格分
      score: 0, //总分
      minute: 0, //剩余时间
      number: 0, //第几题
      isCache: false, //是否获取完缓存
      testTitle: "", //试卷名称
      user_id: "", //用户ID
      user_name: "", //用户名称
      countdown: "", //剩余时间
      timer: "", //定时器
      inputArr: 0, //填空题输入框长度
      shortImgList: [],
      shortRightImg: [],
    };
  },
  methods: {
    //获取简答题答案
    getShortAnswer(row) {
      this.shortImgList = [];
      let dataMap = {
        theory_base_id: row.theory_base_id,
        result_id: this.params.result_id,
      };
      getImgUrl(dataMap)
        .then((res) => {
          res.data.data.forEach((element) => {
            this.shortImgList.push(element.http_url);
          });
          // this.shortImgList = res.data.data.http_url;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取简答题正确答案
    getRightImg(row) {
      this.shortRightImg = [];
      let dataMap = {
        theory_base_id: row.theory_base_id,
        result_id: "answer",
      };
      getCorrectImg(dataMap)
        .then((res) => {
          res.data.data.forEach((element) => {
            this.shortRightImg.push(element.http_url);
          });
          // this.shortRightImg = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查询考试人名
    getUser() {
      this.user_id = this.$route.query.user_id;
      getUserName({ user_id: this.$route.query.user_id })
        .then((res) => {
          this.user_name = res.data.data.real_name;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //输入框输入事件
    handleInput(index) {
      // this.inputArr = index;
    },
    inputValue(value) {
      this.$set(
        this.testList[this.number - 1],
        "your_answer",
        this.testContent.your_answer
      );
    },
    sparseArrayToNull(arr, length) {
      if (arr[length - 1] == undefined) {
        arr[length - 1] = undefined;
      }
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] === undefined) {
          // 检查稀疏数组的空洞
          arr[i] = "null";
        }
      }
      return arr;
    },
    //交卷按钮
    handPaper() {
      //   this.examDialogShow = true;
      this.$router.push("/examModule?" + this.user_id);
    },
    //确定交卷按钮
    submitTest() {
      let list = this.testList.map((el) => {
        if (el.kind == "填空题") {
          const parts = el.question.split("_");
          let inputNum = this.generateArray(parts);
          // let filteredArr = el.blanks_answer.filter(
          //   (item) => item !== undefined && item !== null
          // );
          return {
            your_answer:
              el.blanks_answer.length != 0
                ? this.sparseArrayToNull(el.blanks_answer, inputNum).join("__")
                : "", // 将数组元素通过 '__' 连接成字符串
            theory_base_id: el.theory_base_id,
          };
        } else if (el.kind == "简答题") {
          return {
            your_answer: el.your_answer,
            theory_base_id: el.theory_base_id,
          };
        } else {
          return {
            your_answer: el.your_answer.includes(",")
              ? sortString(el.your_answer).slice(0, -1)
              : el.your_answer,
            theory_base_id: el.theory_base_id,
          };
        }
      });
      let params = sessionStorage.getItem("params");
      let data = JSON.parse(params);
      data.list_item_answer = list;
      let formData = new FormData();
      formData.append("data", JSON.stringify(data));
      submitPracticeTopic(formData).then((res) => {
        localStorage.removeItem("countdownEndTime");
        this.$router.push("/practiceSuccess");
      });
    },
    //答题卡数据获取
    getCardData() {
      // 考试信息
      this.testTitle = this.$route.query.exam_name; //考试名称
      // 试卷id
      this.params.result_id = this.$route.query.id;
      this.score = Number(this.$route.query.score); //得分
      this.minute = this.$route.query.examine_time; //考试时间
      this.passScore = this.$route.query.pass_score; //及格分
      getPracticeDetails(this.params).then((res) => {
        // 总数
        this.questionTotal = res.data.data.length;
        res.data.data.forEach((el) => {
          this.testTypeNum.forEach((item) => {
            if (el.kind === item.type) {
              item.children.push(el);
            }
          });
        });
        this.testTypeNum.forEach((item, index) => {
          this.testList.push(...item.children);
          item.children.forEach((el) => {
            // 回答的问题
            // el.your_answer = "";
            el.blanks_answer = [];
            if (el.kind === "单选题") {
              el.number = el.no;
            } else if (el.kind === "多选题") {
              el.number = el.no + this.testTypeNum[0].children.length;
            } else if (el.kind === "判断题") {
              el.number =
                el.no +
                this.testTypeNum[0].children.length +
                this.testTypeNum[1].children.length;
            } else if (el.kind === "填空题") {
              el.number =
                el.no +
                this.testTypeNum[0].children.length +
                this.testTypeNum[1].children.length +
                this.testTypeNum[2].children.length;
            } else if (el.kind === "简答题") {
              el.number =
                el.no +
                this.testTypeNum[0].children.length +
                this.testTypeNum[1].children.length +
                this.testTypeNum[2].children.length +
                this.testTypeNum[3].children.length;
            }
          });
        });
        //   获取缓存数据
        this.getCacheData();
        this.testClick(this.testList[0]);
      });
    },
    //  题目点击
    testClick(item) {
      console.log(item, "item");
      if (item.kind == "简答题") {
        //获取简答题图片
        this.getShortAnswer(item);
        this.getRightImg(item);
      }
      // 保存缓存
      this.saveCacheData();
      this.testContent.options = [];
      this.testContent.question = "";
      this.testContent.score = item.score;
      this.testContent.right_answer = item.right_answer;
      this.testContent.blanks_answer = item.your_answer_desc;
      // 第几个题目
      this.number = item.number;
      // 分数赋值
      // this.testContent.score = item.per_score;
      this.testContent.testType = item.kind;
      getTopicDetail({ theoryBaseId: item.theory_base_id }).then((res) => {
        this.testContent.question = res.data.data.question;
        this.testContent.options = res.data.data.items;
      });

      // 当前答案
      this.testContent.your_answer = item.your_answer;
      this.testContent.total = item.total
      // this.testContent.blanks_answer = item.blanks_answer;
    },
    // 获取缓存数据
    getCacheData() {
      let params = sessionStorage.getItem("params");
      let data = JSON.parse(params);
      let formData = {
        user_id: data.user_id,
        batch_id: data.batch_id,
      };
      getTestCache(formData).then((res) => {
        if (res.data.state) {
          res.data.data.list_item_answer.forEach((val) => {
            this.testList.forEach((ele) => {
              if (val.theory_base_id === ele.theory_base_id) {
                this.$set(ele, "your_answer", val.your_answer);
                // ele.your_answer = val.your_answer
              }
            });
          });
          this.testContent.your_answer = this.testList[0].your_answer;
        } else {
        }

        this.isCache = true;
      });
    },
    // 保存缓存数据
    saveCacheData() {
      let list = this.testList.map((el) => {
        return {
          your_answer: el.your_answer,
          theory_base_id: el.theory_base_id,
        };
      });
      let params = sessionStorage.getItem("params");
      let data = JSON.parse(params);
      data.list_item_answer = list.filter((el) => {
        return el.your_answer;
      });
      let formData = new FormData();
      formData.append("data", JSON.stringify(data));
      // 保存缓存
      saveTestCache(formData);
    },
    // 下一题点击
    nextClick() {
      if (this.number === this.questionTotal) {
        return;
      }
      this.number++;
      let data = this.testList[this.number - 1];
      this.testClick(data);
    },
    // 上一题点击
    preClick() {
      if (this.number === 1 || this.number === 0) {
        return;
      }
      this.number--;
      let data = this.testList[this.number - 1];
      this.testClick(data);
    },

    generateArray(arr) {
      let count = 0;
      for (let i = 0; i < arr.length; i++) {
        if (i % 2 === 1) {
          count++;
        }
      }
      return count;
    },
  },
  mounted() {
    this.getCardData();
    //获取用户名
    this.getUser();
  },

  computed: {
    // 将题目字符串按“-”分割，形成一个包含文本和输入框的数组
    questionParts() {
      let num = 0;
      const parts = this.testContent.question.split("_");
      return parts.map((part, index) => {
        if (index % 2 === 1) {
          num++;
        }
        return {
          type: index % 2 === 1 ? "input" : "text",
          value: part,
          index: num,
          totalInput: this.generateArray(parts),
        };
      });
    },
  },
  watch: {
    "testContent.options"(newVal, oldVal) {},
  },
};
</script>

<template>
  <div class="exam">
    <div class="exam-box">
      <div class="exam-left">
        <div class="exam-test-title">{{ testTitle }}</div>
        <div class="exam-left-top">
          <div class="exam-left-num">{{ number }}/{{ questionTotal }}</div>
          <div class="exam-left-type">{{ testContent.testType }}</div>
          <span>({{ testContent.total }}分)</span>
          <div v-if="testContent.testType === '单选题'" class="exam-left-msc">
            每题只有一个正确答案
          </div>
          <div v-else-if="testContent.testType === '多选题'" class="exam-left-msc">
            每题只有两个以上正确答案
          </div>
        </div>
        <!-- 题干 -->
        <div class="exam-left-test">
          <div class="exam-left-test-title">
            <div v-if="testContent.testType === '填空题'" class="exam-left-test-blanks">
              <div v-for="(char, index) in questionParts" :key="index">
                <span v-if="char.type !== 'input'">{{ char.value }}</span>
                <el-input
                  v-else
                  :disabled="true"
                  v-model="testContent.blanks_answer[char.index - 1]"
                  @input="handleInput(char.totalInput)"
                  type="text"
                  placeholder="请输入答案"
                  class="answer-input"
                ></el-input>
              </div>
            </div>
            <div v-else>{{ testContent.question }}</div>
          </div>
          <div v-if="testContent.testType === '多选题'" class="exam-left-test-content">
            <div
              v-for="(item, index) in testContent.options"
              ref="option"
              :class="
                testContent.your_answer.includes(item.item_letter) ? 'optionSelect' : ''
              "
              class="exam-left-test-option"
              @click="optionClick($event, index, item)"
            >
              {{ item.item_letter }}丶{{ item.item }}
            </div>
            <div class="exam-left-test-result">
              <span>得分：{{ testContent.score }}</span>
              <span>您的答案：{{ testContent.your_answer }}</span>
              <span>正确答案：{{ testContent.right_answer }}</span>
            </div>
          </div>
          <div
            v-else-if="testContent.testType === '简答题'"
            class="exam-left-test-content"
          >
            <div class="exam-left-test-shortAnswer">
              <div class="exam-left-test-shortAnswer-result">
                <span>得分：{{ testContent.score }}</span>
                <span
                  ><p>您的答案： {{ testContent.your_answer }}</p>
                  <el-image
                    v-for="(item, index) in shortImgList"
                    :key="index"
                    :src="item"
                    :preview-src-list="shortImgList"
                  >
                  </el-image>
                </span>
                <span>
                  <p>正确答案：{{ testContent.right_answer }}</p>
                  <el-image
                    v-for="(item, index) in shortRightImg"
                    :key="index"
                    :src="item"
                    :preview-src-list="shortRightImg"
                  ></el-image>
                </span>
              </div>
            </div>
          </div>
          <div v-else class="exam-left-test-content">
            <div
              v-for="(item, index) in testContent.options"
              ref="option"
              :class="testContent.your_answer === item.item_letter ? 'optionSelect' : ''"
              class="exam-left-test-option"
              @click="optionClick($event, index, item)"
            >
              {{ item.item_letter }}丶{{ item.item }}
            </div>

            <div class="exam-left-test-result">
              <span>得分：{{ testContent.score }}</span>
              <span>您的答案：{{ testContent.your_answer }}</span>
              <span>正确答案：{{ testContent.right_answer }}</span>
            </div>
          </div>
          <!--    按钮    -->
          <div class="exam-left-btn">
            <div
              :class="number === 1 ? 'exam-left-btn-pre' : 'exam-left-btn-next'"
              @click="preClick"
            >
              上一题
            </div>
            <div
              :class="
                number === questionTotal ? 'exam-left-btn-pre' : 'exam-left-btn-next'
              "
              style="margin-left: 164px"
              @click="nextClick"
            >
              下一题
            </div>
          </div>
        </div>
      </div>
      <div class="exam-right">
        <div class="exam-right-title">答题卡</div>
        <div class="exam-right-card">
          <div class="exam-right-card-score">
            <span>{{ user_name }}</span>
            <span>{{ minute }} </span>
          </div>
          <div class="exam-right-card-time">
            <span>{{ score }}分</span>
            <img src="@/assets/image/nojg.png" v-if="score < passScore" />
            <img src="@/assets/image/jg.png" v-else />
          </div>
          <div class="exam-right-card-line"></div>
          <div v-if="isCache" class="exam-right-card-box">
            <div v-for="(item, index) in testTypeNum" class="exam-right-card-num">
              <span class="exam-right-card-num-title"
                ><span class="type">{{ item.type }}</span>
                <span>(共{{ item.children.length }}题)</span></span
              >
              <div class="exam-right-card-num-item">
                <span
                  ref="answer"
                  v-for="s in item.children"
                  :class="{
                    selectQuestion: s.result_desc == '对',
                    border: s.number === number,
                  }"
                  :style="{
                    'background-color':
                      (s.result_desc == '错' && s.kind != '简答题') ||
                      (s.result_desc == '缺' && s.kind != '简答题')
                        ? 'rgba(135, 85, 96)'
                        : 'rgba(101, 140, 246, 0.6)',
                  }"
                  @click="testClick(s)"
                  >{{ s.no }}</span
                >
              </div>
            </div>
          </div>
          <div class="submit" @click="handPaper"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.exam-test-title {
  position: absolute;
  top: -40px;
  font-size: 24px;
  color: rgba(255, 255, 255, 1);
  font-weight: 700;
  left: 0;
}

.exam {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  //提示弹窗
  &-dialog {
    width: 807px;
    height: 391px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-image: url("../../assets/image/prompt.png");
    background-size: 100% 100%;

    &-title {
      text-align: center;
      margin-right: 25px;
      margin-top: 7px;
      color: rgba(255, 255, 255, 1);
      font-size: 24px;
    }

    &-content {
      margin-top: 113px;
      text-align: center;
      font-size: 26px;
      color: rgba(255, 255, 255, 1);
    }

    &-btn {
      display: flex;
      margin-top: 97px;
      justify-content: center;

      div {
        width: 157px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        background-size: 100% 100%;
      }

      &-light {
        color: rgba(255, 255, 255, 1);
        background-image: url("../../assets/image/highlight-btn.png");
      }

      &-dark {
        margin-right: 82px;
        color: rgba(255, 255, 255, 0.2);
        background-image: url("../../assets/image/dark-btn.png");
      }
    }
  }

  &-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  &-left::-webkit-scrollbar {
    display: none;
  }

  &-left {
    position: relative;
    width: 1325px;
    height: 858px;
    background-size: 100% 100%;
    background-image: url("../../assets/image/test.png");

    &-top {
      margin-top: 32px;
      display: flex;
      align-items: center;
    }

    &-type {
      border: 2px solid rgba(101, 140, 246, 1);
      color: rgba(101, 140, 246, 1);
      padding: 0 7px;
      margin-left: 20px;
      font-size: 24px;
    }

    &-type + span {
      margin: 0 10px;
      color: rgba(255, 255, 255, 1);
      font-size: 20px;
    }

    &-num {
      text-align: center;
      font-size: 26px;
      line-height: 52px;
      color: rgba(255, 255, 255, 1);
      width: 114px;
      height: 52px;
      background-size: 100% 100%;
      background-image: url("../../assets/image/test-num.png");
    }

    &-msc {
      color: rgba(255, 255, 255, 0.6);
      font-size: 18px;
    }

    //  试卷内容
    &-test {
      margin-top: 33px;
      padding: 0 50px;
      //题目
      &-title {
        font-size: 24px;
        line-height: 44px;
        color: rgba(255, 255, 255, 1);
      }
      &-blanks {
        display: flex;
        flex-wrap: wrap;
        ::v-deep .el-input__inner {
          border: none;
          border-radius: 0;
          background: transparent;
          color: #fff;
          border-bottom: 1px solid #fff;
          font-size: 20px;
          width: 200px;
        }
      }
      &-content::-webkit-scrollbar {
        display: none;
      }

      //  选项
      &-content {
        margin-top: 40px;
        height: 500px;
        overflow-y: scroll;
      }
      &-result {
        display: flex;
        flex-direction: column;
        span:nth-child(1) {
          color: #fff;
        }
        span:nth-child(2) {
          margin-top: 10px;
          color: #ff5858;
        }
        span:nth-child(3) {
          margin-top: 10px;
          color: #4fe979;
        }
      }
      &-shortAnswer {
        // background: url("../../assets/image/shortAnswer.png") no-repeat;
        // background-size: 100% 100%;
        height: 305px;
        ::v-deep .el-textarea__inner {
          background: transparent;
          border: none;
          color: rgb(255, 255, 255);
        }
        ::v-deep .upload-demo {
          height: 160px;
          display: flex;
          // flex-direction: column-reverse;
          margin-top: 40px;
          position: relative;
        }
        ::v-deep .el-upload--picture-card {
          background: transparent;
          border: none;
          border-radius: 0.375rem;
          box-sizing: border-box;
          width: 9.25rem;
          height: 40px;
          cursor: pointer;
          line-height: 30px;
          vertical-align: top;
          position: absolute;
          right: 0px;
          top: -35px;
        }
        &-result {
          display: flex;
          flex-direction: column;
          span:nth-child(1) {
            color: #fff;
          }
          span:nth-child(2) {
            margin-top: 10px;
            color: #ff5858;
          }
          span:nth-child(3) {
            margin-top: 10px;
            color: #4fe979;
          }
          .el-image {
            width: 250px;
            height: 160px;
            margin: 10px 15px 0 0;
          }
        }
      }
      ::-webkit-scrollbar {
        display: none;
      }
      .optionSelect {
        background-color: rgba(101, 140, 246, 0.55);
      }

      &-option {
        width: 100%;
        height: 80px;
        margin-bottom: 20px;
        background-image: url("../../assets/image/test-option.png");
        padding-left: 34px;
        display: flex;
        font-size: 22px;
        color: #ffffff;
        align-items: center;
        box-sizing: border-box;
      }
    }

    //按钮
    &-btn {
      position: absolute;
      bottom: 50px;
      display: flex;
      margin-left: -239px;
      left: 50%;

      &-pre,
      &-next {
        width: 157px;
        height: 44px;
        text-align: center;
        line-height: 44px;
        background-size: 100% 100%;
        cursor: pointer;
      }

      &-pre {
        color: rgba(255, 255, 255, 0.5);
        background-image: url("../../assets/image/dark-btn.png");
      }

      &-next {
        color: rgba(255, 255, 255, 1);
        background-image: url("../../assets/image/highlight-btn.png");
      }
    }
  }

  &-right {
    position: relative;
    width: 441px;
    height: 858px;
    background-size: 100% 100%;
    background-image: url("../../assets/image/test-card.png");

    //答题卡名称
    &-title {
      text-align: center;
      font-size: 24px;
      color: rgba(255, 255, 255, 1);
      margin-top: 16px;
    }

    &-card {
      font-size: 18px;
      color: rgba(255, 255, 255, 1);
      padding: 46px;
      //提交按钮
      .submit {
        width: 157px;
        height: 44px;
        margin: 20px auto;
        //left: 50%;
        //margin-left: -78px;
        //bottom: 50px;
        background-image: url("../../assets/image/closeDetails.png");
        cursor: pointer;
      }
      &-lenged {
        width: 400px;
        height: 80px;
        background-color: rgba(149, 149, 149, 0.2);
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -200px;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          span {
            font-size: 14px;
            margin-right: 26px;
            span:last-child {
              margin-right: 0;
            }
            i {
              width: 18px;
              height: 10px;
              margin-right: 10px;
              display: inline-block;
              box-sizing: border-box;
            }
            .current {
              border: 2px solid rgba(101, 140, 246, 1);
            }
            .notDone {
              background-color: rgba(0, 0, 0, 0.2);
            }
            .have {
              background-color: rgba(64, 253, 137, 0.2);
            }
          }
        }
      }
      &-score {
        justify-content: space-between;
        display: flex;
        font-size: 18px;
      }

      &-line {
        border: 1px solid rgba(255, 255, 255, 0.3);
        margin: 22px 0;
      }

      &-time {
        margin-top: 37px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span:nth-child(1) {
          color: rgba(255, 189, 34, 1);
          font-size: 26px;
        }
      }

      //题目容器
      &-box {
        position: relative;
        height: 516px;
        overflow-y: auto;
      }

      //  滚动条
      &-box::-webkit-scrollbar {
        position: absolute;
        left: -50px;
        width: 7px; //修改滚动条宽度
        background-color: rgba(107, 126, 177, 0.2);
      }

      &-box::-webkit-scrollbar-thumb {
        border-radius: 7px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(107, 126, 177, 1);
      }

      //  题目数量
      &-num {
        &-title {
          display: block;
          margin-bottom: 16px;

          .type {
            border: 2px solid rgba(101, 140, 246, 1);
            color: rgba(101, 140, 246, 1);
            padding: 0 7px;
            display: inline-block;
            margin-right: 8px;
            font-size: 24px;
          }
        }

        &-item {
          display: flex;
          flex-wrap: wrap;
          .border {
            box-sizing: border-box;
            border: 2px solid rgba(101, 140, 246, 1);
          }
          .selectQuestion {
            background-color: rgba(64, 253, 137, 0.2) !important;
          }

          span {
            //display:inline-block ;
            margin: 0 11px 14px 0;
            width: 58px;
            line-height: 38px;
            text-align: center;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.1);
            height: 38px;
          }

          span:nth-child(5n) {
            margin-right: 0 !important;
          }
        }
      }
    }
  }
}
</style>
