<template>
  <!-- 语文部分具体问题 -->
  <div class="cn_right_box clearfix">
    <!-- 标题及时间 -->
    <div class="cn_exam_title layout align_center justify">
      <h2>第一部分</h2>
      <div>
        剩余时间：
        <p class="cn_title_time">{{ansTime | seconds}}</p>
      </div>
    </div>
    <!-- 说明 -->
    <div class="cn_exam_exp cn_det_exp">（时间截止自动提交本部分作答，截止前未记录任何答案，禁止提前离开本页面。）</div>
    <!-- 具体问题 -->
    <div
      class="cn_det_quest clearfix"
      v-for="item in questionList"
      :key="item.index"
      :id="item.id"
    >
      <div class="det_quest_box layout flex_diection align_center">
        <!-- 问题 -->
        <div class="det_box_question layout">{{item.id}}.{{item.title}}</div>
        <!-- 答案 -->
        <div class="det_box_answer">
          <div
            class="det_answer_choice layout flex_row align_center"
            v-for="ansItems in item.answer"
            :key="ansItems.index"
            @click="choiced(ansItems,item.id)"
          >
            <div class="det_answer_circle">
              <img :src="ansItems.choiced?src1:src2" alt class="det_ans_pic" />
            </div>
            <div>
              <i class="order_num">{{ansItems.order}}</i>
              {{ansItems.ans}}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 阅读完毕开始答题 -->
    <div class="currency_btn" @click="nextPage">{{btnValue}}</div>
    <!-- 结束提示弹窗 -->
    <OverDialog :overVisible.sync="overVisible" v-if="overVisible" :typeId="typeId"></OverDialog>
  </div>
</template>
<script>
import OverDialog from "../OverDialog";
import { post } from "@/api/http";
import { Notification } from "element-ui";
let answer1 = {};
let ansTimer = null;
export default {
  data() {
    return {
      btnValue: "停！等候指示，才可以翻页再作答",
      typeId:'',
      overVisible: false,
      src1: require("@/assets/img/15.png"),
      src2: require("@/assets/img/9.png"),
      // 答题的时间
      ansTime: 0,
      // 数据
      questionList: [],
      // 共几页
      pageNum: "",
      // 每页数量
      pageSize: 10,
      // 默认显示第一页
      currentPage: 1,
      // 当前显示的数据
      // questionList: []
    };
  },
  methods: {
    // 选择答案
    choiced: function(item, num) {
      let that = this;
      for (let i in this.questionList) {
        for (let j in this.questionList[i].answer) {
          if (item.evaId == this.questionList[i].answer[j].evaId) {
            that.$set(that.questionList[i].answer[j], "choiced", false);
            if (item.index == this.questionList[i].answer[j].index) {
              that.$set(that.questionList[i].answer[j], "choiced", true);
            }
          }
        }
        this.$forceUpdate();
      }
      answer1[num] = item.order;
      localStorage.setItem("cnAnswer", JSON.stringify(answer1));
    },
    // 测评题目
    getTestPluralisticList() {
      clearInterval(ansTimer);
      let begin = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      let url = "/api/primary_pluralistic/getTestPluralisticList/";
      let params = {
        id: localStorage.getItem("evaluteId"),
        type: localStorage.getItem("typeId")
      };
      let that = this;
      post(url, params).then(res => {
        this.questionList = res.list;
        // 答案
        for (var obj of this.questionList) {
          if (that.currentPage == 1) {
            answer1[obj.id] = "";
          }

          let arr = [];
          arr.push(
            {
              evaId: obj.id,
              index: obj.id + "-1",
              order: "A",
              ans: obj.option_a,
              choiced: false
            },
            {
              evaId: obj.id,
              index: obj.id + "-2",
              order: "B",
              ans: obj.option_b,
              choiced: false
            },
            {
              evaId: obj.id,
              index: obj.id + "-3",
              order: "C",
              ans: obj.option_c,
              choiced: false
            },
            {
              evaId: obj.id,
              index: obj.id + "-4",
              order: "D",
              ans: obj.option_d,
              choiced: false
            }
          );
          obj.answer = arr;
        };
        let answered = JSON.parse(localStorage.getItem("cnAnswer"));
        if(answered){
          answer1 = answered;
        };
        // 缓存的数据
        for (let i in answered) {
          // 所有数据
          for (let obj of this.questionList) {
            if (i == obj.id) {
              for (let k in obj.answer) {
                if (answered[i] == obj.answer[k].order) {
                  obj.answer[k].choiced = true;
                }
              }
            }
          }
        };
        // 总页数
        this.pageNum = Math.ceil(this.questionList.length / this.pageSize);
        // 当前显示的数据
        // this.questionList = this.questionList.slice(begin, end);
        // 答题时间
        this.ansTime = res.time;
        ansTimer = setInterval(function() {
          res.time--;
          that.ansTime = res.time;
          if (that.ansTime == 0) {
            clearInterval(ansTimer);
            ansTimer = null;
            that.setTestPluralistic();
          }
        }, 1000);
      });
    },

    nextPage() {
      // 所有问题
      let allArr = [];
      // 已选择问题
      let ansArr = [];
      for (let obj of this.questionList) {
        allArr.push(obj.id);
      }
      // 已选择问题
      for (let i in answer1) {
        if (answer1[i]) {
          ansArr.push(i / 1);
        }
      }
      for (var i = 0; i < allArr.length; i++) {
        if (ansArr.indexOf(allArr[i]) == -1) {
          allArr = allArr[i];
        }
      }
      if (allArr.length > 3) {
        clearInterval(ansTimer);
        this.setTestPluralistic();
        // if (this.currentPage == this.pageNum) {
        //   clearInterval(ansTimer);
        //   ansTimer = null;
        //   this.setTestPluralistic();
        //   return "";
        // } else {
        //   this.currentPage++;
        //   this.getTestPluralisticList();
        //   document.body.scrollTop = 0;
        //   document.documentElement.scrollTop = 0;
        // }
      } else {
        Notification.info({
          title: "提示",
          message: "请全部选择",
          duration: 1500
        });
        this.goTop(allArr);
      }
    },
    // 未选择跳转
    goTop(id) {
      document.getElementById(id).scrollIntoView();
    },
    // 提交测评
    setTestPluralistic() {
      let url = "/api/primary_pluralistic/setTestPluralistic/";
      let params = {
        id: localStorage.getItem("evaluteId"),
        type: localStorage.getItem("typeId"),
        data: JSON.stringify(answer1)
      };
      post(url, params).then(res => {
        localStorage.setItem('is_complete',res.is_complete)
        // 题目类型
        localStorage.setItem("typeId", 2);
        this.btnValue = "停！等候指示，才可以翻页再作答";
        this.overVisible = true;
        this.typeId = 1;
      });
    }
  },
  components: {
    OverDialog
  },
  mounted() {
    this.getTestPluralisticList();
  },
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
@import "../../../../../style/detailExample.css";
</style>