<template>
  <div class="inter_wrap">
    <!-- 兴趣测评 -->
    <div class="inter_test clearfix">
      <!-- 左侧提示 -->
      <div class="inter_test_l">
        <div class="inter_l_box clearfix">
          <div class="inter_box_t clearfix">
            <h1>生涯兴趣测验(CIA)</h1>
          </div>
          <!-- 选项说明 -->
          <div class="inter_box_b">
            <h2>选项说明：</h2>
            <ul>
              <li v-for="item in list" :key="item.index" class="clearfix">
                <p class="inter_b_title">{{item.title}}</p>
                <p class="inter_b_content">{{item.content}}</p>
              </li>
            </ul>
          </div>
          <!-- 图片 -->
          <div class="inter_box_pic">
            <img src="@/assets/img/14.png" alt />
          </div>
        </div>
      </div>
      <!-- 右侧选项 -->
      <div class="inter_test_r">
        <div class="inter_r_box clearfix">
          <!-- 答题组数 倒计时 -->
          <div class="inter_r_num layout align_center justify">
            <div class="inter_group_num">第{{currentPage}}组/共{{pageNum}}组</div>
            <div class="inter_count_down">
              已用时间：
              <p class="count_down_time">{{useTime | seconds}}</p>
            </div>
          </div>

          <!-- 题目 -->
          <div class="inter_r_problem clearfix">
            <!-- 所有的问题 -->
            <div
              class="inter_pro_box layout flex_diection"
              v-for="item in dataShow"
              :key="item.id"
              v-show="isLast"
              :id="item.id"
              @change="goTop()"
            >
              <!-- 问题 -->
              <div class="inter_pro_question layout justify">{{item.id}}.{{item.title}}</div>
              <!-- 答案 -->
              <div class="inter_pro_answer">
                <ul class="layout align_center justify inter_answer_ul">
                  <li
                    class="inter_answer_li"
                    v-for="arrItem in item.arr"
                    :key="arrItem.index"
                    @click="choiced(arrItem,item.id)"
                  >
                    <div class="inter_answer_circle">
                      <img :src="arrItem.choiced?src1:src2" alt />
                    </div>
                    {{arrItem.name}}
                  </li>
                </ul>
              </div>
            </div>
            <!-- 最后一组问题 -->
            <div class="inter_pro_last" v-show="!isLast">
              <h3>下面哪一种「自我介绍」最能代表你自己？</h3>
              <table class="inter_pro_table">
                <tr v-for="item in introduceData" :key="item.id" class="inter_table_tr">
                  <td class="td_left">
                    <p class="td_l_p">{{item.id}}</p>
                  </td>
                  <td class="td_right">{{item.value}}</td>
                </tr>
              </table>
            </div>
            <div
              class="inter_pro_box layout flex_diection"
              v-for="item in introduceList"
              :key="item.id"
              v-show="!isLast"
            >
              <!-- 问题 -->
              <div class="inter_pro_question layout justify">{{item.id}}.{{item.value}}</div>
              <!-- 答案 -->
              <div class="inter_pro_answer">
                <ul class="layout align_center justify inter_answer_ul">
                  <li
                    class="inter_answer_li"
                    v-for="arrItem in item.arr"
                    :key="arrItem.num"
                    @click="choicedLast(arrItem,item.id)"
                  >
                    <div class="inter_answer_circle">
                      <img :src="arrItem.choiced?src1:src2" alt />
                    </div>
                    {{arrItem.num}}
                  </li>
                </ul>
              </div>
            </div>
            <!-- 下一页按钮 -->
            <div class="inter_answer_btn" @click="nextPage">{{isLast?"下一页":"提交"}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "../../../api/http";
import { Notification } from "element-ui";
let answer1 = {};
let answer2 = {};
export default {
  data() {
    return {
      // 已用时间
      useTime: 0,
      // 单选框的值
      checkedValue: [],
      list: [
        { index: 1, title: "非常喜欢：", content: "有强烈（特别喜欢）的感觉" },
        {
          index: 2,
          title: "喜欢：",
          content: "有（喜欢做）的快乐感觉，不会日久生厌"
        },
        { index: 3, title: "不喜欢：", content: "有（不想做）的厌烦感觉" },
        { index: 4, title: "非常不喜欢：", content: "有强烈（排斥）的感觉" }
      ],
      src1: require("@/assets/img/15.png"),
      src2: require("@/assets/img/9.png"),
      // 数据
      interestList: [],
      // 自我介绍
      introduceData: [],
      introduceList: [],
      // 共几页
      pageNum: "",
      // 每页数量
      pageSize: 36,
      // 默认显示第一页
      currentPage: 1,
      // 当前显示的数据
      dataShow: [],
      isLast: true,
      flag: false,
      count: 0,
      userTimer: null
    };
  },
  methods: {
    // 选择答案
    choiced: function(item, num) {
      this.count++;
      let that = this;
      for (let i in that.dataShow) {
        for (let j in that.dataShow[i].arr) {
          if (item.interId == that.dataShow[i].arr[j].interId) {
            that.$set(that.dataShow[i].arr[j], "choiced", false);
            if (item.index == that.dataShow[i].arr[j].index) {
              that.$set(that.dataShow[i].arr[j], "choiced", true);
            }
          }
        }
        this.$forceUpdate();
      }
      answer1[num] = item.order;
      localStorage.setItem("interAnswer", JSON.stringify(answer1));
    },
    // 自我介绍选择答案
    choicedLast: function(arrItem, index) {
      for (let i in this.introduceList) {
        for (let j in this.introduceList[i].arr) {
          if (arrItem.interId == this.introduceList[i].arr[j].interId) {
            this.$set(this.introduceList[i].arr[j], "choiced", false);
            if (arrItem.index == this.introduceList[i].arr[j].index) {
              this.$set(this.introduceList[i].arr[j], "choiced", true);
            }
          }
        }
        this.$forceUpdate();
      }
      answer2[index] = arrItem.num;
      localStorage.setItem("interAnswer2", JSON.stringify(answer2));
    },
    // 兴趣测评题目
    getTestInterestList: function() {
      let url = "/api/junior_interest/getTestJuniorInterestList";
      let begin = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      console.log(begin);
      console.log(end)
      let that = this;
      let params = {
        id: localStorage.getItem("evaluteId")
      };
      clearInterval(that.userTimer);
      post(url, params).then(res => {
        console.log('测评题目',res)
        // 计时器
        that.userTimer = setInterval(function() {
          that.useTime++;
        }, 1000);
        // 提交测评id
        localStorage.setItem("testStatus", res.student_test_id);
        // 自我介绍
        this.introduceData = res.junior_interest.introduce;
        // 自我介绍题目
        this.introduceList = res.junior_interest.test;
        for (var obj of this.introduceList) {
          let arr = [];
          arr.push(
            { interId: obj.id, index: obj.id + "-1", num: "1", choiced: false },
            { interId: obj.id, index: obj.id + "-2", num: "2", choiced: false },
            { interId: obj.id, index: obj.id + "-3", num: "3", choiced: false },
            { interId: obj.id, index: obj.id + "-4", num: "4", choiced: false },
            { interId: obj.id, index: obj.id + "-5", num: "5", choiced: false },
            { interId: obj.id, index: obj.id + "-6", num: "6", choiced: false }
          );
          obj.arr = arr;
        }
        // 兴趣试题
         this.interestList = res.interest;
        for (var obj of this.interestList) {
          let answerArr = [];
          answerArr.push(
            {
              interId: obj.id,
              index: obj.id + "-1",
              name: obj.option_a,
              choiced: false,
              order: "A"
            },
            {
              interId: obj.id,
              index: obj.id + "-2",
              name: obj.option_b,
              choiced: false,
              order: "B"
            },
            {
              interId: obj.id,
              index: obj.id + "-3",
              name: obj.option_c,
              choiced: false,
              order: "C"
            },
            {
              interId: obj.id,
              index: obj.id + "-4",
              name: obj.option_d,
              choiced: false,
              order: "D"
            }
          );
          obj.arr = answerArr;
        }
        console.log(this.interestList)
        let answered = JSON.parse(localStorage.getItem("interAnswer"));
        let answered2 = JSON.parse(localStorage.getItem("interAnswer2"));
        if (answered) {
          answer1 = answered;
        }
        if (answered2) {
          answer2 = answered2;
        }
       // 前180答案
        //缓存的数据
        for (let i in answered) {
          // 所有数据
          for (let obj of this.interestList) {
            if (i == obj.id) {
              for (let k in obj.arr) {
                if (answered[i] == obj.arr[k].order) {
                  obj.arr[k].choiced = true;
                }
              }
            }
          }
        }
        //181-183答案
        for (let i1 in answered) {
          // 所有数据
          for (let obj of this.introduceList) {
            if (i1 == obj.id) {
              for (let k1 in obj.arr) {
                if (answered[i1] == obj.arr[k1].order) {
                  obj.arr[k1].choiced = true;
                }
              }
            }
          }
        }
        // 总页数
        this.pageNum = Math.ceil(this.interestList.length / this.pageSize + 1);
        this.dataShow = this.interestList.slice(begin, end);
        
      });
    },
    // 下一页
    nextPage: function() {
      let that = this;
      // 兴趣所有问题
      let allArr = [];
      // 已选择问题
      let ansArr = [];

      for (let obj of this.dataShow) {
        allArr.push(obj.id);
      }
      // 已选择问题
      for (let i in answer1) {
        ansArr.push(i / 1);
      }
      console.log(ansArr)
      for (var i = 0; i < allArr.length; i++) {
        if (ansArr.indexOf(allArr[i]) == -1) {
          
          allArr = allArr[i];
        }
      }
      console.log(allArr,'全部选择')
      if (allArr.length > 3) {
        //
        if (this.currentPage < this.pageNum - 1) {
          console.log(6666)
          this.currentPage++;
          let begin = (this.currentPage - 1) * this.pageSize;
          let end = this.currentPage * this.pageSize;
          // 当前显示的数据
          this.dataShow = this.interestList.slice(begin, end);
          document.body.scrollTop = 0;
          document.documentElement.scrollTop = 0;
        } else {
          console.log(11111)
         
          //  this.currentPage++;
           this.isLast = false;
          // this.currentPage = 6;
          // 自我介绍已选择问题
          let inducArr = [];
          console.log('答案',answer2)
          for (let i in answer2) {
            inducArr.push(i / 1);
          }
          console.log(this.pageNum,'当前页面')
          console.log(this.currentPage,'页面页面')
          console.log('页面里的题',inducArr)
          if (this.currentPage == this.pageNum) {
            if (inducArr.length == 3) {
              clearInterval(that.userTimer);
              this.setTestInterest();
              return "";
            } else {
             
              Notification.info({
                title: "提示",
                message: "请选择自我介绍答案",
                duration: 1500
              });
            }
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
            this.currentPage = this.pageNum;
            return false;
          }else{
            this.currentPage++
            
          }
        }
      } else {
        Notification.info({
          title: "提示",
          message: "请全部选择",
          duration: 1500
        });
        this.goTop(allArr);
      }

     
    },
    // 181-183提交

    // 未选择跳转
    goTop(id) {
      document.getElementById(id).scrollIntoView();
    },
    // 提交兴趣测评
    setTestInterest() {
      let url = "/api/junior_interest/setTestJuniorInterest";
      let params = {
        id: localStorage.getItem("testStatus"),
        answer1: JSON.stringify(answer1),
        answer2: JSON.stringify(answer2)
      };
      post(url, params)
        .then(res => {
          // answer1 = {};
          // answer2 = {};
          // localStorage.removeItem("interAnswer");
          // localStorage.removeItem("interAnswer2");
          Notification.info({
            title: "提示",
            message: "提交成功",
            duration: 1500
          });
          this.$router.push({ path: "/SetEvalute" });
        })
        .catch(err => {
          console.log(err,378347874378)
          // answer1 = {};
          // answer2 = {};
          // localStorage.removeItem("interAnswer");
          // localStorage.removeItem("interAnswer2");
        });
    }
  },
  mounted() {
    answer2 = {};
    localStorage.removeItem("interAnswer2");
    this.getTestInterestList();
  },
  computed: {}
};
</script>

<style scoped>
@import "../../../style/btn.css";
.inter_wrap {
  width: 100%;
  background-color: #f2f5fa;
  padding: 36px 0 25px;
}
.inter_test {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
}
/* 左侧提示 */
.inter_test_l {
  width: 430px;
  float: left;
  text-align: left;
}
.inter_l_box {
  margin: 65px 0 0 70px;
}
/* 生涯兴趣测验(CIA) */

.inter_box_t h1 {
  font-size: 24px;
  color: #34485e;
  position: relative;
  margin-bottom: 60px;
}
h1:after {
  position: absolute;
  bottom: -30px;
  left: 0;
  content: "";
  width: 54px;
  height: 1px;
  background-color: #34485e;
}
/* 选项说明 */
.inter_box_b {
  margin-bottom: 45px;
}
.inter_box_b h2 {
  margin-bottom: 14px;
  font-size: 18px;
  color: #34485e;
}
.inter_box_b p {
  float: left;
  font-size: 14px;
  line-height: 28px;
}
.inter_b_title {
  color: #409eff;
}
.inter_b_content {
  color: #8c9198;
}
/* 图片 */
.inter_box_pic {
  width: 281px;
  height: 188px;
  margin-left: 5px;
}
.inter_box_pic img {
  width: 100%;
  height: 100%;
}
/* 右侧选项 */
.inter_test_r {
  width: 769px;
  border-left: 1px solid #eee;
  float: right;
}
.inter_r_box {
  margin: 59px 120px 0 77px;
}
/* 答题组数 时间 */
.inter_r_num {
  margin-bottom: 31px;
}
.inter_group_num {
  font-size: 18px;
  font-weight: bold;
  color: #34485e;
}
/* 时间 */
.inter_count_down {
  font-size: 14px;
  color: #5b5e63;
}
.count_down_time {
  float: right;
  color: #409eff;
}
/* 题目 */
.inter_r_problem {
  padding: 0 8px 0 4px;
  width: 100%;
}
.inter_pro_box {
  width: 100%;
  margin-bottom: 20px;
  font-size: 14px;
  color: #8c9198;
}
/* 问题 */
.inter_pro_question {
  margin-bottom: 9px;
}
/* 答案 */
.inter_answer_ul {
  padding-left: 3px;
}
.inter_answer_li {
  line-height: 19px;
}
/* 选择框 */
.inter_answer_circle {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin: 3px 4px 0 0;
  line-height: 12px;
  float: left;
  vertical-align: middle;
}
.inter_answer_circle img {
  width: 100%;
  height: 100%;
}
/* 最后一组问题 */
h3 {
  font-size: 18px;
  color: #34485e;
  text-align: left;
  margin-bottom: 20px;
}
/* 表格 */
.inter_pro_table {
  width: 646px;
  height: 570px;
  margin-bottom: 40px;
}
.inter_table_tr:last-child .td_left {
  border-bottom: 1px solid #409eff;
}
/* 表格左侧 */
.td_left {
  width: 85px;
  background-color: #409eff;
  border-bottom: 1px solid #fff;
}
.td_l_p {
  width: 29px;
  height: 29px;
  background: rgba(255, 255, 255, 1);
  border-radius: 50%;
  opacity: 1;
  color: #409eff;
  line-height: 29px;
  margin: 0 auto;
}
/* 表格右侧 */
.td_right {
  border: 1px solid #eee;
  border-left: none;
  font-size: 14px;
  color: #8c9198;
  text-align: left;
  line-height: 19px;
  padding: 0 11px 0 18px;
}
</style>