<template>
  <!-- 兴趣检测报告 -->
  <div class="assessment_report">
    <div class="assessment_wrap">
      <!-- 第一部分 -->
      <div class="assessment_first layout align_center justify_center clearfix">
        <div>
          <img src="@/assets/img/note.png" alt />
        </div>
        <h1>
          个人报告
          <br />生涯兴趣测验
        </h1>
      </div>
      <!-- 第二部分 -->
      <div class="assessment_second clearfix">
        <!-- 书签 -->
        <div class="first_bg_l">
          <img src="@/assets/img/bg.png" alt />
        </div>
        <div class="first_bg_r">
          <img src="@/assets/img/bg.png" alt />
        </div>
        <!-- 上层 -->
        <div class="assess_second_top layout justify clearfix">
          <!-- 受试者资料 -->
          <div class="assess_top_l layout flex_diection align_left clearfix">
            <h2>受试者资料</h2>
            <div class="assess_det_data layout justify align_center">
              <!-- 头像 -->
              <div class="assess_img">
                <img :src="studentInfo.avatar" alt />
              </div>
              <!-- 资料 -->
              <div class="assess_msg layout justify flex_diection align_left">
                <h3>{{studentInfo.nickname}}</h3>
                <!-- 个人信息 -->
                <div class="personal_infor layout flex_row">
                  <div class="per_infor_single">
                    性别：
                    <i></i>
                    {{studentInfo.sex == 1?"男":"女"}}&nbsp;&nbsp;&nbsp;&nbsp;
                  </div>
                  <div class="per_infor_single">
                    年级：
                    <i></i>
                    {{studentInfo.group}}
                  </div>
                  <!-- <div class="per_infor_single per_infor_num">
                    学号：
                    <i></i>
                    {{userName}}
                  </div>-->
                </div>
                <div class="layout flex_row">
                  <div class="per_infor_single">
                    班级：
                    <i></i>
                    {{studentInfo.class}}
                  </div>
                  <div class="per_infor_single">
                    学校：
                    <i></i>
                    {{studentInfo.school_name}}
                  </div>
                  <!-- <div class="per_infor_single">
                    日期：
                    <i></i>
                    {{reportList.endtime_text}}
                  </div>-->
                </div>
              </div>
            </div>
          </div>
          <!-- 这份报告你会看到 -->
          <div class="assess_top_r layout flex_diection justify align_left clearfix">
            <h2>这份报告你会看到</h2>
            <div class="report_content layout flex_row">
              <div
                class="report_single layout justify_center align_center"
                v-for="item in watchList"
                :class="{report_center:item.watchId == 2,report_right:item.watchId == 3}"
                :key="item.watchId"
                @click="goAnchor(item.watchId)"
              >
                {{item.name}}
                <br />
                {{item.name1}}
              </div>
            </div>
          </div>
        </div>
        <!-- 下层 -->
        <div class="assess_second_bot">
          <div v-for="(item,index) in contentList" :key="index" class="assess_bot_content">{{item}}</div>
        </div>
        <!-- 书签 -->
        <div class="second_bg_l">
          <img src="@/assets/img/bg.png" alt />
        </div>
        <div class="second_bg_r">
          <img src="@/assets/img/bg.png" alt />
        </div>
      </div>
      <!-- 第三部分 -->
      <div class="assessment_third clearfix layout flex_diection align_left" id="first">
        <!-- 六类型分数 -->
        <div class="assess_third_score layout flex_diection align_left">
          <h2>六类型分数</h2>
          <table class="assess_type_score">
            <tr class="tr_type">
              <td v-for="(item,index) in titList" :key="index">{{item.name}}</td>
            </tr>
            <tr>
              <td v-for="(item,index) in tdList" :key="index" class="tr_score">{{item}}</td>
            </tr>
          </table>
        </div>
        <!-- 测评反馈 -->
        <div class="assess_third_induc layout flex_diection align_left">
          <!-- 图表 -->
          <div class="assess_third_echats layout">
            <!-- 六角星图 -->
            <div class="assess_echats_radar layout align_left flex_diection">
              <h2>六角星图</h2>
              <div id="myChart" :style="{width: '477px', height: '401px'}"></div>
            </div>
            <!-- 数线图 -->
            <div class="assess_echats_line layout align_left flex_diection">
              <h2>数线图</h2>
              <div id="lineChart" :style="{width: '482px', height: '415px'}"></div>
            </div>
          </div>
          <!-- 评价 -->
          <div class="assess_third_eva">
            <ul class="assess_third_ul layout flex_diection align_left">
              <li>
                生涯兴趣组型（Holland Code）：
                <i class="assess_third_bold">{{coded}}</i>
              </li>
              <li>
                我的生涯特质：
                <i class="assess_third_bold">{{traits}}</i>
              </li>
              <li>
                自我介绍三码：
                <i class="assess_third_bold">{{introduceCode}}</i>
              </li>
              <li>
                区分性：
                <i class="assess_third_bold">{{strong}}</i>
              </li>
            </ul>
          </div>
          <!-- 选课意向 -->
          <div class="assess_third_choice" id="second">
            <ul class="assess_choice_ul">
              <li class="assess_choice_li clearfix">
                <p class="assess_ul_p">我有兴趣的选课倾向：</p>
                <div v-for="(item,index) in currList1" :key="index" class="curr">{{item}}</div>
              </li>
              <li class="assess_choice_li clearfix">
                <p class="assess_ul_p">我有兴趣的科系：</p>
                <div class="assess_ul_div">
                  <div v-for="(item,index) in currList2" :key="index">
                    <i class="curr" v-for="(items,index) in item" :key="index">{{items}}</i>
                  </div>
                </div>
              </li>
              <li class="assess_choice_li clearfix">
                <p class="assess_ul_p">我有兴趣的职业：</p>
                <div class="assess_ul_div">
                  <div v-for="(item,index) in currList3" :key="index" class="curr">
                    <i class="curr" v-for="(items,index) in item" :key="index">{{items}}</i>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 得分说明 -->
        <div class="assess_third_score_induc" id="third">
          <h2>得分说明</h2>
          <div class="third_score_induc">
            <div class="third_score_det" v-for="(item,index) in inducList" :key="index">{{item}}</div>
          </div>
        </div>
        <!-- 书签 -->
        <div class="third_bg_l">
          <img src="@/assets/img/bg.png" alt />
        </div>
        <div class="third_bg_r">
          <img src="@/assets/img/bg.png" alt />
        </div>
      </div>
      <!-- 第四部分 -->
      <div class="assessment_fourth clearfix layout align_left flex_diection">
        <h2>六型介绍</h2>
        <!-- 具体类型 -->
        <div class="assess_four_type clearfix layout flex_row">
          <div
            class="assess_det_type"
            v-for="item in typeList"
            :key="item.typeId"
            @click="showDialog(item)"
            :class="{type_two:item.typeId  == 2,type_three:item.typeId  == 3,type_four:item.typeId  == 4,type_five:item.typeId  == 5,type_six:item.typeId  == 6}"
          >
            <i>{{item.letter}}</i>
            <br />
            {{item.name}}
            <!-- 类型介绍图片 -->
            <div
              class="type_pic"
              v-show="item.typeId == isType"
              :class="{type_pic1:item.typeId == 1||item.typeId == 2,type_pic3:item.typeId == 3,type_pic4:item.typeId == 4,type_pic5:item.typeId == 5||item.typeId == 6}"
            >
              <div class="type_close" @click.stop="closeTypePic(item)"></div>
              <img :src="item.img" alt />
            </div>
          </div>
        </div>
      </div>
      <div class="second_btn">
        <a :href="assessReportUrl" target="_blank">下载报告</a>
      </div>
    </div>
  </div>
</template>
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入雷达图组件
require("echarts/lib/chart/radar");
// 引入折线图组件
require("echarts/lib/chart/line");
// 引入提示框
require("echarts/lib/component/tooltip");
import { post } from "@/api/http";
export default {
  data() {
    return {
      assessReportUrl: "",
      isType: "",
      title: "",
      // 兴趣测评报告
      reportList: [],
      //   看到内容
      watchList: [
        { watchId: 1, name: "生涯兴趣 ", name1: "测评介绍" },
        { watchId: 2, name: "适配的学系 ", name1: "与职业" },
        { watchId: 3, name: "得分及 ", name1: "说明" }
      ],
      // 弹窗内容
      dialogList: [
        "兴趣类型：喜欢在讲求实际、技术规范下动手做明确的工作，对机械、仪器、工具、动能设备有兴趣。生活喜以以实用为主，眼前的事胜于对未来的想像。情绪稳定，不善与人有深入的接触。",
        "职业活动：适合从事机械，电子、土木建筑、生物科技等工作。",
        "性格特征：情绪安稳、内向不善表达，严谨按部就班，谦虚有礼。"
      ],
      contentList: [
        "生涯兴趣测验是每一个人在生涯选择时一项重要能力指标，生涯兴趣就是个人在职业、工作、嗜好与休閒上的表现，可以反映出每个人的自我概念、生活目标、甚至创造力等特质。这一份测验採用美国霍兰德教授(Dr. John Holland)的类型论为理论参考架构(Holland, 1994)，经过不断的修正，我们尽量使这一份题目能够符合目前的社会情况。",
        "本测验可测量六种兴趣类型，包括实用（R）、研究（I） 、艺术（A） 、社会（S） 、企业（E）和事务（C）的倾向，得分越高，代表你在日常生活中比较喜欢从事该类型的相关活动,也会比较喜欢在同类型的环境下工作，工作表现也较佳。得分较低表示你在相关活动的兴趣不高，在这类环境工作容易出现不适应的情形。"
      ],
      // 得分
      tdList: [],
      titList: [],
      coded: "",
      // 特质
      traits: "",
      // 自我介绍
      introduceCode: "",
      // 区分
      strong: "",
      // 选课意向
      currList1: [],
      // 科系
      currList2: ["", "", "", ""],
      // 职业
      currList3: ["", "", "", ""],
      inducList: [
        "1. 得分最高的前三项兴趣类型就是你的生涯兴趣组型Holland Code",
        "2. 六角形图是将六类生涯兴趣依照特定的排序而成，因此六个角分别代表一个兴趣类型，根据你的兴趣高低落在六个角内不同的位置，得分越高离中心点越远，得分越低越接近中心点,以不规则的六角形描绘出你的生涯兴趣型态。",
        "3. 区分性是指你在六个得分得差距程度，当区分性越大的时候，表示你的兴趣组型越能突显，容易找到你的职业发展方向及历程。",
        "4. 数线图是区分性的表示方法，本报告将六个兴趣类型分数由高到低排列，你可以看出六个类型相聚或远离的状态，以表示六个类型的区分程度。",
        "5. 自我介绍三码通常是反映个人内心深处的渴望，如果和「生涯兴趣组型」一致或相近，表示你的兴趣类型清晰和稳定。如果不一致时，有可能你的兴趣倾向未来还会改变，也有可能你在选择自我介绍类型有特别的理由。"
      ],
      // 六型介绍
      typeList: [
        {
          typeId: 1,
          letter: "R",
          name: "实际型",
          img: require("../../../assets/img/r.png")
        },
        {
          typeId: 2,
          letter: "I",
          name: "研究型",
          img: require("../../../assets/img/i.png")
        },
        {
          typeId: 3,
          letter: "A",
          name: "艺术型",
          img: require("../../../assets/img/a.png")
        },
        {
          typeId: 4,
          letter: "S",
          name: "社会型",
          img: require("../../../assets/img/s.png")
        },
        {
          typeId: 5,
          letter: "E",
          name: "企业型",
          img: require("../../../assets/img/e.png")
        },
        {
          typeId: 6,
          letter: "C",
          name: "事务型",
          img: require("../../../assets/img/c.png")
        }
      ],
      // 图表分数
      lineScore: [],
      // x轴
      lineLike: [],
      // y轴
      yAxis: [],
      // 测评结果Id
      testId: "",
      // 学生信息
      studentInfo: ""
    };
  },
  methods: {
    handleClose: function() {
      this.dialogVisible = false;
    },
    // 锚点跳转
    goAnchor(id) {
      if (id == 1) {
        document.getElementById("first").scrollIntoView();
      } else if (id == 2) {
        document.getElementById("second").scrollIntoView();
      } else if (id == 3) {
        document.getElementById("third").scrollIntoView();
      }
    },
    // 六型弹窗
    showDialog(item) {
      this.isType = item.typeId;
    },
    // 关闭弹窗
    closeTypePic(item) {
      this.isType = "";
    },
    // 兴趣测评报告
    getTestInterestResult() {
      let that = this;
      let url = "/api/test/getTestInterestResult";
      let params = {
        id: this.testId
      };
      post(url, params).then(res => {
        this.reportList = res;
        this.assessReportUrl = res.pdf;
        this.studentInfo = res.user;
        // 组型
        this.coded = res.result.threeCode;
        // 特质
        let arr = [];
        for (let i in res.result.traits) {
          arr.push(res.result.traits[i])
        }
        this.traits = arr[0];
        // 自我介绍
        this.introduceCode = res.result.introduceCode;
        // 区分性
        this.strong = res.result.strong;
        // 选课意向
        this.currList1 = res.result.majorData.arts_sciences.total;
        // 科系
        this.currList2 = res.result.majorData.major.total;
        // 职业
        this.currList3 = res.result.majorData.occupation.total;
        // x轴
        this.lineLike = res.xAxis;
        // y轴
        this.yAxis = res.yAxis;
        // 分数
        this.tdList = res.result.result;
        for (var i in this.tdList) {
          let obj = {};
          if (i == "A") {
            obj["name"] = "艺术型（A）";
            obj["max"] = 120;
            this.titList.push(obj);
          }
          if (i == "E") {
            obj["name"] = "企业型（E）";
            obj["max"] = 120;
            this.titList.push(obj);
          }
          if (i == "R") {
            obj["name"] = "实际型（R）";
            obj["max"] = 120;
            this.titList.push(obj);
          }
          if (i == "I") {
            obj["name"] = "研究型（I）";
            obj["max"] = 120;
            this.titList.push(obj);
          }
          if (i == "S") {
            obj["name"] = "社会型（S）";
            obj["max"] = 120;
            this.titList.push(obj);
          }
          if (i == "C") {
            obj["name"] = "事务型（C）";
            obj["max"] = 120;
            this.titList.push(obj);
          }
          this.lineScore.push(i);
        }
        this.drawLine();
      });
    },
    drawLine() {
      // 折线图横轴
      let lineX = this.lineLike;
      // 纵轴
      let lineY = this.yAxis;
      // 类型
      let style = this.lineScore;
      let indic = this.titList;
      // 基于准备好的dom，初始化echarts实例
      // 六角星
      let myChart = echarts.init(document.getElementById("myChart"));
      // 折线图
      let lineChart = echarts.init(document.getElementById("lineChart"));
      // 绘制六角星图表
      myChart.setOption({
        tooltip: {
          confine: true,
          enterable: true,
          backgroundColor: "#fff",
          textStyle: {
            //提示框浮层的文本样式。
            color: "#8C9198",
            fontSize: 14
          }
        },
        radar: {
          name: {
            color: "#8C9198",
            fontSize: 14
          },
          splitNumber: 3, // 雷达图圈数设置
          // 设置雷达图中间射线的颜色
          axisLine: {
            lineStyle: {
              color: "#C8C8C8"
            }
          },
          splitArea: {
            areaStyle: {
              color: "#fff"
            }
          },
          legend: {
            data: style
          },
          indicator: indic
        },

        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
              // 提示框背景色
              backgroundColor: "#fff",
              // 文本
              textStyle: {
                color: "#8C9198",
                rich: ""
              },
              // 位置
              position: "top",
              padding: [5, 13, 5, 13]
              // 显示文字
              // formatter: function(params) {
              //   console.log(params);
              // }
            },
            // 填充区域颜色
            areaStyle: {
              color: "#E3F0FF"
            },
            symbolSize: 6,
            lineStyle: {
              color: "#409eff" //线的颜色
            },
            itemStyle: {
              borderColor: "#409eff"
            },
            data: [
              {
                name: [],
                value: lineY
              }
            ]
          }
        ]
      });
      // 绘制折线图
      lineChart.setOption({
        textStyle: {
          color: "#fff"
        },
        xAxis: {
          type: "category",
          // x轴换行
          data: lineX.map(function(str) {
            return str.replace(" ", "\n");
          }),
          // data:lineX,

          nameTextStyle: {
            fontSize: 14,
            fontWeight: "bold"
          },
          axisLine: {
            show: false, // 坐标轴是否显示
            lineStyle: {
              color: "#fff"
            }
          },
          axisTick: {
            //刻度线
            show: false //去掉刻度线
          }
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            fontSize: 10
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#fff"
            }
          },
          axisTick: {
            //刻度线
            show: false //去掉刻度线
          },
          splitNumber: 9
        },
        tooltip: {
          trigger: "item",
          // 提示框背景色
          backgroundColor: "#fff",
          // 文本
          textStyle: {
            color: "#8C9198",
            rich: ""
          },
          // 位置
          position: "top",
          // 显示文字
          formatter: "{b0}" + "<br>" + "得分：{c0}",
          padding: [5, 13, 5, 13]
        },
        legend: {
          // data: ["实际型（R）", "事务型（C）", "企业型（E）", "社会型（S）", "艺术型（A）","研究型（I）"]
        },
        series: [
          {
            data: lineY,
            type: "line",
            symbol: "circle", //拐点图形
            symbolSize: 6,
            hoverAnimation: false,
            itemStyle: {
              borderColor: "#fff", //拐点的边框色
              color: "#409eff" //拐点颜色
            },
            lineStyle: {
              color: "#fff" //线的颜色
            }
          }
        ]
      });
    }
  },
  mounted() {
    // 测评结果Id
    this.testId = this.$route.query.testId;
    // 兴趣测评报告
    this.getTestInterestResult();
  }
};
</script>
<style scoped>
@import "../../../style/report.css";
@import "../../../style/btn.css";
.type_pic {
  position: absolute;
  top: -390px;
  z-index: 999;
}
.type_pic1 {
  left: 59px;
}
.type_pic3 {
  left: -235px;
}
.type_pic4 {
  left: -427px;
}
.type_pic5 {
  right: 67px;
}
.type_close {
  width: 25px;
  height: 25px;
  float: right;
  z-index: 1000;
  position: relative;
  right: 12px;
  top: 37px;
  background-color:rgba(255,255,255,0);
}
.second_btn {
  margin-top: 49px;
}
.second_btn a {
  color: #fff;
  font-size: 14px;
}
</style>