<template>
  <div>
    <!-- 主体 -->
    <div class="evalute_wrap clearfix">
      <!-- banner -->
      <div class="evalute_banner clearfix">
        <img :src="evaSrc" alt />
      </div>
      <!-- 测评列表 -->
      <div class="test_list clearfix" v-if="timeList.length>0">
        <!-- 标题 -->
        <h3 class="test_title">测评列表</h3>
        <!-- 测评内容 -->
        <div class="test_content clearfix">
          <!-- 测评学期 -->
          <div class="test_time">
            <div
              class="test_year"
              v-for="item in timeList"
              :key="item.id"
              :class="{test_border:isBorder == item.id}"
              @click="changeBorder(item)"
            >
              <p class="test_det_year">{{item.year}} {{item.group}}</p>
              <p class="test_det_term">{{item.term}}</p>
            </div>
          </div>
          <!-- 具体内容 -->
          <div class="test_det clearfix">
            <div class="test_det_list clearfix" v-for="item in testList" :key="item.id">
              <!-- 测评类型 -->
              <div class="test_style clearfix">
                <div class="test_style_l">
                  <div class="test_interest">
                    <!-- <p>{{item.test_category == 'interest'?"兴趣测评":"多元性向GS"}}</p> -->
                    <p>{{item.type_category_text}}</p> 
                    <p>{{item.title}}</p>
                  </div>
                  <div class="test_start_end">
                    <p>开始时间：{{item.starttime}}</p>
                    <p>结束时间：{{item.endtime}}</p>
                  </div>
                </div>
              </div>
              <!-- 测评说明 -->
              <div class="test_induction clearfix">
                <!-- 左侧 -->
                <div class="test_induction_l">
                  <div class="test_l_title">测评说明：</div>
                  <div class="test_l_content">{{item.text}}</div>
                </div>

                <!-- 右侧 -->
                <div class="test_induction_r layout align_center justify_center">
                  <!-- v-show="item.is_to_show_student == 1" -->
                  <!-- 学生 -->
                  <div
                    v-show="groupId == 1"
                    class="test_btn"
                    :class="{test_btned:item.button_status != 2}"
                    @click="toInduction(item)"
                  >{{item.button_status == 1?"查看报告":item.button_status == 2?"开始测评":item.button_status == 3?"已过期":"未开始"}}</div>
                  <!-- 家长 -->
                  <div
                    v-show="groupId == 2"
                    class="test_no"
                    :class="{test_parent:item.status == 1}"
                    @click="toInduction(item)"
                  >{{item.status == 1?"查看报告":"未测评"}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 暂无测评 -->
      <div class="no_test_lis" v-else>暂无测评</div>
    </div>
  </div>
</template>
<script>
import { Notification } from "element-ui";
import { post } from "@/api/http";
export default {
  data() {
    return {
      timeList: [],
      isBorder: 2,
      testList: [],
      // 按钮是否显示
      isShow: true,
      groupId: "",
      evaSrc:"",
    };
  },
  methods: {
    imgZip(){
      let file = require("@/assets/img/7.png");
      lrz(file)
      .then(res=>{
        this.evaSrc = res.base64
      })
    },
    // 施测说明 查看报告
    toInduction: function(item) {
      // 测评id
      localStorage.setItem("evaluteId", item.id);
      // 学生
      if (this.groupId == 1) {
        // if (item.test_category == "interest") {
        //     // 兴趣测评
        //     this.$router.push({ path: "/Inducte" });
        //   } else if (item.test_category == "pluralistic") {
        //     // 多元性向测评
        //     this.$router.push({ path: "/MulAgreement" });
        //   }else if(item.test_category=='school_suit'){
        //     // 校园生活适应测评
        //       this.$router.push({ path: "/SchoolLife" });
        //   }else if(item.test_category=='junior_interest'){
        //     // 初中兴趣测评
        //     this.$router.push({ path: "/JuniorIntrest" });
        //   }
        if (item.button_status == 1) {
          if (item.is_to_show_student == 1) {
            // 查看报告
            if (item.test_category == "interest") {
              // 兴趣测评报告
              this.$router.push({
                path: "/AssessmentReport",
                query: { testId: item.test_student_id }
              });
            }else if(item.test_category == "junior_interest"){
              // 初中兴趣测评
               this.$router.push({
                path: "/juniorintrestresult",
                query: { testId: item.test_student_id }
              });

            }else if(item.test_category == "primary_pluralistic"){
                // 小学多元测评
                //  this.$router.push({
                //   path: "/juniorintrestresult",
                //   query: { testId: item.test_student_id }
                // });

            }else if (item.test_category == "pluralistic") {
              // 多元测评报告
              this.$router.push({ path: "/MulReport" });
            }
          } else {
            Notification.info({
              title: "提示",
              message: "无查看权限",
              duration: 1500
            });
          }
        } else if (item.button_status == 2) {
          if (item.test_category == "interest") {
            // 兴趣测评
            this.$router.push({ path: "/Inducte" });
          } else if (item.test_category == "pluralistic") {
            // 多元性向测评
            this.$router.push({ path: "/MulAgreement" });
          }else if(item.test_category=='school_suit'){
            // 校园生活适应测评
              this.$router.push({ path: "/SchoolLife" });
          }else if(item.test_category=='junior_interest'){
            // 初中兴趣测评
            this.$router.push({ path: "/JuniorIntrest" });
          }else if(item.test_category=='primary_pluralistic'){
            // 小学多元测评
            this.$router.push({ path: "/SchoolMulAgreement" });
          }
          
        }
      } else if (this.groupId == 2) {
        // 家长
        // 查看报告
        if (item.status == 1) {
          if (item.test_category == "interest") {
            // 兴趣测评报告
            this.$router.push({
              path: "/AssessmentReport",
              query: { testId: item.test_student_id }
            });
          } else if (item.test_category == "pluralistic") {
            // 多元测评报告
            this.$router.push({ path: "/MulReport" });
          }
        }
      }
    },
    // 获取学期列表
    getTermList: function() {
      let url = "/api/test/getTermList";
      post(url)
        .then(res => {
          this.timeList = res;
          for(let obj of res){
            if(obj.this_term == 1){
              this.isBorder = obj.id;
              this.getTestList(obj.id);
            }
          }
          // 学校id
          localStorage.setItem("schoolId", res[0].school_id);
          // 学期id
          localStorage.setItem("termId", res[0].id);
          // 年级
          localStorage.setItem("group", res[0].group);
          for (var obj of this.timeList) {
            if (obj.term == "first") {
              obj.term = "第一学期";
            } else if (obj.term == "second") {
              obj.term = "第二学期";
            }
          }
        })
        .catch(err => {});
    },
    // 测评列表
    changeBorder: function(item) {
      this.isBorder = item.id;
      // 学校id
      localStorage.setItem("schoolId", item.school_id);
      // 学期id
      localStorage.setItem("termId", item.id);
      // 年级
      localStorage.setItem("group", item.group);
      this.getTestList(item.id);
    },
    // 测评列表
    getTestList: function(id) {
      let url = "/api/test/getTestList";
      let params = {
        id: id
      };
      post(url, params).then(res => {
        this.testList = res;
      });
    }
  },

  mounted() {
    this.groupId = localStorage.getItem("groupId");
    this.getTermList();
    this.imgZip()
  }
};
</script>
<style scoped>
@import "../../../style/evaluteManage.css";
.evalute_wrap {
  width: 100%;
  background-color: #f2f5fa;
}
/* 图片 */
.evalute_banner {
  width: 100%;
  height: 430px;
}
.evalute_banner img {
  width: 100%;
  height: 100%;
}
/* 测评列表 */
.test_list {
  width: 1200px;
  margin: 0 auto;
  margin-top: 40px;
}
.test_title {
  font-size: 20px;
  color: #34485e;
  text-align: left;
  margin-bottom: 20px;
  position: relative;
  line-height: 1;
}
.test_title::before {
  display: inline-block;
  content: "";
  width: 4px;
  height: 14px;
  background: #409eff;
  opacity: 1;
  border-radius: 2px;
  position: absolute;
  top: 4px;
  left: -10px;
}
/* 暂无测评 */
.no_test_lis {
  font-size: 16px;
  font-weight: bold;
  color: #34485e;
  margin: 100px auto;
}
</style>