<template>
  <div class="mul_ex_wrap">
    <!-- 多元测评例题 -->
    <div class="mul_ex_box clearfix">
      <!-- 上部 分类 -->
      <div class="mul_ex_classify clearfix">
        <div
          v-for="item in list"
          :key="item.id"
          class="mul_ex_subject layout align_center justify"
          :class="{color_blue:isBlue == item.id,bg_color:item.complete}"
        >
          <div class="mul_sub_pic">
            <img :src="item.complete?src2:isBlue == item.id?src1:src" alt />
          </div>
          <div class="mul_sub_name">{{item.name}}</div>
        </div>
      </div>
      <!-- 下部 各种学科例题-->
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { post } from "../../../api/http";
export default {
  data() {
    return {
      list: [],
      isBlue: 1,
      src: require("@/assets/img/wait.png"),
      src1: require("@/assets/img/progress.png"),
      src2: require("@/assets/img/complete.png")
    };
  },
  methods: {
    // 多元性向测评题目类型
    getTestPluralisticType() {
      let url = "/api/primary_pluralistic/getTestPluralisticType/";
      let params = {
        id: localStorage.getItem("evaluteId")
      };
      post(url, params).then(res => {
        console.log('测评例题',res)
        this.list = res;
        for (let obj of res) {
          if (obj.is_answer == 1) {
            this.$set(obj, "complete", true);
          }
        }
        let routerArr = [];
        for (let obj of this.list) {
          switch (obj.id) {
            case 1:
              localStorage.setItem("chineseStatus", obj.is_answer);
              break;
            case 2:
              localStorage.setItem("wenfaStatus", obj.is_answer);
              break;
            case 3:
              localStorage.setItem("chouxiangStatus", obj.is_answer);
              break;
            case 4:
              localStorage.setItem("shuziStatus", obj.is_answer);
              break;
            case 5:
              localStorage.setItem("tuwenStatus", obj.is_answer);
              break;
            case 6:
              localStorage.setItem("studystyleStatus", obj.is_answer);
              break;
            
          }
          console.log('3477377',obj)
          if (obj.is_answer != 1) {
            routerArr.push(obj.id);
          }
        }
        switch (routerArr[0]) {
          case 1:
            this.$router.replace({ path: "/ChineseExample" });
            // 题目类型
            localStorage.setItem("typeId", 1);
            // 答题状态
            this.isBlue = 1;
            break;
          case 2:
            this.$router.replace({ path: "/WenfaApplyexample" });
            // 题目类型
            localStorage.setItem("typeId", 2);
            // 答题状态
            this.isBlue = 2;
            break;
          case 3:
            this.$router.replace({ path: "/LogicExample" });
            // 题目类型
            localStorage.setItem("typeId", 3);
            // 答题状态
            this.isBlue = 3;
            break;
          case 4:
            this.$router.replace({ path: "/SpeedExample" });
            // 题目类型
            localStorage.setItem("typeId", 4);
            // 答题状态
            this.isBlue = 4;
            break;
          case 5:
            this.$router.replace({ path: "/MomentExample" });
            // 题目类型
            localStorage.setItem("typeId", 5);
            // 答题状态
            this.isBlue = 5;
            break;
          case 6:
            this.$router.replace({ path: "/SpaceExample" });
            // 题目类型
            localStorage.setItem("typeId", 6);
            // 答题状态
            this.isBlue = 6;
            break;
          case 7:
            this.$router.replace({ path: "/WordExample" });
            // 题目类型
            localStorage.setItem("typeId", 7);
            // 答题状态
            this.isBlue = 7;
            break;
          case 8:
            this.$router.replace({ path: "/GrammerExample" });
            // 题目类型
            localStorage.setItem("typeId", 8);
            // 答题状态
            this.isBlue = 8;
            break;
          case 9:
            this.$router.replace({ path: "/EnglishExample" });
            // 题目类型
            localStorage.setItem("typeId", 9);
            // 答题状态
            this.isBlue = 9;
            break;
          case 10:
            this.$router.replace({ path: "/StyleExample" });
            // 题目类型
            localStorage.setItem("typeId", 10);
            // 答题状态
            this.isBlue = 10;
            break;
        }
      }).catch(err => {
        console.log(err,347843787)
      });;
    }
  },
  mounted() {
    
  },
  created(){
    console.log(3434439)
      this.getTestPluralisticType();
//     if (!localStorage.getItem("typeId")) {
//       localStorage.setItem("typeId", 1);
//     }
  }
};
</script>
<style scoped>
.mul_ex_wrap {
  width: 100%;
  background-color: #f2f5fa;
  padding: 22px 0 27px;
}
.mul_ex_box {
  width: 1200px;
  margin: 0 auto;
}
/* 上部分类 */
.mul_ex_classify {
  height: 177px;
  width: 1200px;
  background-color: #fff;
  margin-bottom: 21px;
}
.mul_ex_all {
  width: 1116px;
  height: 177px;
  margin: 0 auto;
}
/* 学科名称 */
.mul_ex_subject {
  width: 181px;
  height: 48px;
  background: rgba(243, 243, 243, 1);
  font-size: 18px;
  color: #8c9198;
  float: left;
  margin-left: 47px;
  margin-top: 26px;
  border-radius: 3px;
  border: 1px solid rgba(243, 243, 243, 1);
}
.color_blue {
  color: #409eff;
  border-color: #409eff;
  background-color: #fff;
}
.bg_color {
  background-color: #409eff;
  color: #fff;
}
/* 图标 */
.mul_sub_pic {
  margin-left: 21px;
}
/* 名字 */
.mul_sub_name {
  margin-right: 11px;
  width: 108px;
}
/* 下部 各种学科例题 */
</style>