<template>
  <!-- 生涯报告 -->
  <div class="career_report clearfix">
    <!-- 学期列表 -->
    <div class="term_list clearfix layout flex_row">
      <div
        class="term_msg layout justify_center flex_diection"
        v-for="item in termList"
        :key="item.id"
        :class="{term_bot:isBot == item.id}"
        @click="changeBot(item.id)"
      >
        <div class="term_group">{{item.group}}</div>
        <div class="term_det">{{item.term}}</div>
      </div>
    </div>
    <!-- 学科成绩 -->
    <div class="academic_results clearfix">
      <div class="career_title">学科成绩</div>
      <!-- 表格 -->
      <table class="first_table">
        <tr class="acade_title">
          <td class="first_td">科目</td>
          <td>分数</td>
          <td>时间</td>
        </tr>
        <tr v-for="item in trList" :key="item.trId">
          <td class="first_td">{{item.name}}</td>
          <td>{{item.score}}</td>
          <td>{{item.date}}</td>
        </tr>
      </table>
      <table class="second_table">
        <tr class="acade_title">
          <td class="first_td">科目</td>
          <td>分数</td>
          <td>时间</td>
        </tr>
        <tr v-for="item in trList2" :key="item.trId">
          <td class="first_td">{{item.name}}</td>
          <td>{{item.score}}</td>
          <td>{{item.date}}</td>
        </tr>
      </table>
    </div>
    <!-- 评测结果 -->
    <div class="evaluation_results">
      <div class="career_title">评测结果</div>
      <!-- 多元性向潜能 -->
      <div class="multielement" clearfix>
        <div class="evaluation_title">多元性向潜能</div>
        <div class="mul_content clearfix layout flex_row">
          <div class="mul_l">结果分析：</div>
          <div class="mul_r" v-show="muList.average">{{muList.average}}%</div>
          <div class="mul_explain" v-show="muList.average">在多元性向潜能测评中，您超过了{{muList.average}}%的测评者</div>
        </div>
        <div class="mul_content clearfix layout flex_row">
          <div class="mul_l">最高性向：</div>
          <div class="mul_r">{{muList.xx_highs}}</div>
        </div>
        <div class="mul_content clearfix layout flex_row">
          <div class="mul_l">最低性向：</div>
          <div class="mul_r">{{muList.xx_lows}}</div>
        </div>
        <div class="mul_content clearfix layout flex_row">
          <div class="mul_l">适合专业：</div>
          <div class="mul_r">{{muList.ss_profession}}</div>
        </div>
        <div class="mul_content clearfix layout flex_row">
          <div class="mul_l">学习风格：</div>
          <div class="mul_r">{{muList.fengge}}</div>
        </div>
      </div>
      <!-- 兴趣测评 -->
      <div class="interest">
        <div class="evaluation_title">兴趣测评</div>
        <div class="mul_content clearfix layout flex_row">
          <div class="mul_l">结果分数：</div>
          <div
            class="mul_r"
            v-for="(item,index) in scoreList"
            :key="index"
          >{{item.title}}({{item.name}}){{index == 5?"":"、"}}</div>
        </div>
      </div>
    </div>
    <!-- 下载报告 -->
    <div class="second_btn" v-show="isDown">下载报告</div>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  data() {
    return {
      isBot: "",
      id: "",
      termList: [],
      muList: [],
      trList: [],
      trList2: [],
      scoreList: [],
      isDown:false
    };
  },
  methods: {
    //   边框
    changeBot(index) {
      this.isBot = index;
      this.id = index;
      this.getReport();
    },
    // 获取学期列表
    getTermList: function() {
      let url = "/api/test/getTermList";
      post(url)
        .then(res => {
          this.termList = res;
          for(let obj of res){
            if(obj.this_term == 1){
              this.isBot = obj.id;
              this.id = obj.id;
            }
          }
          this.getReport();
          for (var obj of this.termList) {
            if (obj.term == "first") {
              obj.term = "第一学期";
            } else if (obj.term == "second") {
              obj.term = "第二学期";
            }
          }
        })
        .catch(err => {
          console.log("err=" + err);
        });
    },
    // 生涯报告
    getReport() {
      
      let url = "/api/student/baogao";
      let params = {
        id: this.id
      };
      post(url, params).then(res => {
        this.trList = [];
      this.trList2 = [];
      this.scoreList = [];
        // 成绩表格
        for (let i in res.score_list) {
          if (i % 2 == 0) {
            this.trList.push(res.score_list[i]);
          } else {
            this.trList2.push(res.score_list[i]);
          }
        }
        // 测评结果
        this.muList = res.test_result;
        // 结果分数
        let resultScore = res.interest_result.result.result;
        for (let key in resultScore) {
          var obj = {};
          switch (key) {
            case "A":
              obj.title = "A 艺术型";
              obj.name = resultScore[key];
              break;
            case "R":
              obj.title = "R 实际型";
              obj.name = resultScore[key];
              break;
            case "I":
              obj.title = "I 研究型";
              obj.name = resultScore[key];
              break;
            case "S":
              obj.title = "S 社会型";
              obj.name = resultScore[key];
              break;
            case "E":
              obj.title = "E 企业型";
              obj.name = resultScore[key];
              break;
            case "C":
              obj.title = "C 事务型";
              obj.name = resultScore[key];
              break;
          }
          this.scoreList.push(obj);
        }
      });
    }
  },
  mounted() {
    this.getTermList();
  }
};
</script>
<style scoped>
/* 学期 */
@import "../../../style/term.css";
/* 按钮 */
@import "../../../style/btn.css";
.career_report {
  background-color: #fff;
}
/* 成绩表格 */
table tr {
  line-height: 40px;
  font-size: 14px;
  color: #5b5e63;
  border-bottom: 1px solid #eee;
}
table td {
  width: 25%;
}
/* 表头 */
.acade_title {
  line-height: 30px;
  background-color: #f1f1f1;
}
/* 左侧表格 */
.first_table {
  width: 499px;
  border-right: 1px solid #707070;
  float: left;
}
/* 右侧表格 */
.second_table {
  float: left;
  width: 497px;
}
/* 标题 */
.career_title {
  height: 53px;
  line-height: 53px;
  color: #34485e;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  margin-left: 26px;
}
/* 评测结果标题 */
.evaluation_title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  background-color: #f1f1f1;
  color: #5b5e63;
}
/* 多元测评结果 */
.mul_content {
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.mul_l {
  padding: 0 27px;
  color: #5b5e63;
}
.mul_r {
  color: #8c9198;
}
.mul_explain {
  color: #bdc4ce;
  margin-left: 44px;
}
/* 兴趣描述 */
.inter_content {
  border-bottom: none;
}
.inter_l {
  float: left;
}
.inter_r {
  width: 845px;
  float: left;
  text-align: left;
}
/* 下载报告 */
.second_btn {
  margin-top: 49px;
  margin-bottom: 27px;
}
</style>