<template>
  <!-- 专业详情 -->
  <div class="major_detail">
    <div class="major_det_box">
      <!-- 面包屑 -->
      <div class="major_title layout align_left">
        <el-breadcrumb separator="|">
          <el-breadcrumb-item @click.native="toMajorIndex">首页</el-breadcrumb-item>
          <el-breadcrumb-item>专业数据库</el-breadcrumb-item>
          <el-breadcrumb-item>{{name}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{majorName}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 信息 -->
      <div class="major_det_msg clearfix">
        <!-- 左侧专业详情 -->
        <div class="major_det_l clearfix">
          <div class="major_l_box clearfix">
            <!-- 专业名称 -->
            <div class="major_name_box clearfix">
              <div class="hot_major_name">【{{major_cate == 1?"本科":"专科"}}】{{majorName}}</div>
              <div class="hot_major_btn clearfix">
                <!-- <div class="hot_btn_l" @click="Intention()">{{intention == 1?"取消意向":"加入意向列表"}}</div> -->
                <div
                  class="hot_btn_r"
                  :class="{favorited:favorite == 1}"
                  @click="Favorite()"
                >{{favorite==1?"已收藏":"收藏"}}</div>
              </div>
            </div>
            <!-- 专业信息 -->
            <div class="hot_major_msg clearfix">
              <div class="hot_msg_det">
                专业代码：
                <i>{{number}}</i>
              </div>
              <div class="hot_msg_det">
                专业分类：
                <i>{{classific}}</i>
              </div>
              <div class="hot_msg_det">
                授予学位：
                <i>{{degree}}</i>
              </div>
            </div>
            <!-- 目录 -->
            <div class="hot_major_catalog clearfix">
              <h4>
                目
                <br />录
              </h4>
              <div class="hot_catalog_r clearfix layout align_center justify_around">
                <ul class="major_survey">
                  <li>专业概况</li>
                </ul>
                <ul class="second_ul">
                  <li
                    @click="anchor(item.secondId)"
                    v-for="item in secondList"
                    :key="item.secondId"
                  >{{item.name}}</li>
                </ul>
                <ul class="second_ul">
                  <li
                    @click="anchor(item.thirdId)"
                    v-for="item in thirdList"
                    :key="item.thirdId"
                  >{{item.name}}</li>
                </ul>
                <ul class="classic_character">
                  <li class="classic_character_li" v-show="personalInfo.id" @click="charactDet()">经典人物</li>
                </ul>
              </div>
            </div>
            <!-- 专业概况 -->
            <div class="major_survey_box clearfix layout align_left flex_diection">
              <h2>专业概况</h2>
              <!-- 专业介绍 -->
              <div class="hot_major_intro" v-show="intro" id="first">
                <h3>专业介绍</h3>
                <div class="hot_major_content" v-html="intro"></div>
              </div>
              <!-- 培养目标 -->
              <div class="hot_major_intro" v-show="target" id="second">
                <h3>培养目标</h3>
                <div class="hot_major_content" v-html="target"></div>
              </div>
              <!-- 开设课程 -->
              <div class="hot_major_intro" v-show="course" id="third">
                <h3>开设课程</h3>
                <div class="hot_major_content">{{course}}</div>
              </div>
              <!-- 具备能力 -->
              <div class="hot_major_intro" v-show="abilityList" id="fourth">
                <h3>具备能力</h3>
                <ul class="hot_major_content ability_ul">
                  <li v-html="abilityList"></li>
                </ul>
              </div>
              <!-- 就业方向 -->
              <div class="hot_major_intro" v-show="directionList" id="fifth">
                <h3>就业方向</h3>
                <ul class="hot_major_content direction_ul">
                  <li v-html="directionList"></li>
                </ul>
              </div>
              <!-- 推荐职业 -->
              <div class="hot_major_intro" v-show="occupationList.length>0" id="sixth">
                <h3>推荐职业</h3>
                <div class="occupation layout flex_row">
                  <div
                    class="occupation_name"
                    v-for="item in occupationList"
                    :key="item.id"
                  >{{item.name}}</div>
                </div>
              </div>
              <!-- 推荐院校 -->
              <div class="hot_major_intro" v-show="schooList.length>0" id="seventh">
                <h3>推荐院校</h3>
                <div class="clearfix">
                  <div
                    class="recommend_school layout flex_row align_center"
                    v-for="item in schooList"
                    :key="item.id"
                    @click="toUniversity(item)"
                  >
                    <div class="school_img">
                      <img :src="item.logo" alt />
                    </div>
                    <div class="school_info">
                      <div class="school_name">{{item.name}}</div>
                      <div class="clearfix">
                        <div class="school_address">所在地：</div>

                        <div
                          class="school_address"
                          v-for="(cityItem,index) in item.city"
                          :key="index"
                        >{{cityItem}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 报考选课要求 -->
              <div class="hot_major_intro" v-show="courseData.length>0" id="eighth">
                <div class="layout flex_row justify align_center">
                  <h3>报考选课要求</h3>
                  <!-- 下拉菜单 -->
                  <div class="school_select">
                    <el-select v-model="city" @change="showCity">
                      <el-option
                        v-for="item in cityList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                    <el-select style="margin-left:42px;" v-model="year">
                      <el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                  </div>
                </div>

                <div class="choice_course">
                  <el-table
                    :data="courseData"
                    style="width: 762px"
                    class="score_dialog"
                    :header-cell-style="changeHeader"
                  >
                    <el-table-column prop="senior_subject_name" label="科目要求" align="center"></el-table-column>
                    <el-table-column prop="university_count" label="学校数量" align="center"></el-table-column>
                    <el-table-column prop="percent" label="比例" align="center"></el-table-column>
                    <el-table-column label align="center">
                      <template slot-scope="scope">
                        <div class="check_school" @click="schoolRequire(scope.row)">查看清单院校</div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <!-- 开设本专业的所有院校 -->
              <div class="hot_major_intro" v-show="courseData.length>0">
                <h3>开设本专业的所有院校</h3>
                <!-- 饼状图 -->
                <div id="main" style="width:700px;height: 500px;"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧跳转链接 -->
        <div class="major_link_r clearfix">
          <!-- 经典人物 -->
          <div class="link_hot_major clearfix" v-show="personalInfo.id">
            <!-- 上层标题 -->
            <div class="hot_major_top layout align_center">
              <h2 class="white_h2" >经典人物</h2>
            </div>
            <!-- 下层内容 -->
            <div class="hot_major_bot clearfix">
              <!-- 人物图片及信息 -->
              <div class="classic_info clearfix layout flex_row">
                <!-- 图片 -->
                <div class="charact_img">
                  <img :src="personalInfo.avatar" alt />
                </div>
                <div class="charact_msg">
                  <!-- 姓名 -->
                  <div class="charact_name">{{personalInfo.name}}</div>
                  <!-- 个人信息 -->
                  <div class="personal_msg">
                    <div class="personal_single clearfix">
                      <div class="personal_msg_l">职业：</div>
                      <div class="personal_msg_r">{{personalInfo.profession_name}}</div>
                    </div>
                    <div class="personal_single clearfix">
                      <div class="personal_msg_l">毕业院校：</div>
                      <div class="personal_msg_r">{{personalInfo.school}}</div>
                    </div>
                    <div class="personal_single clearfix">
                      <div class="personal_msg_l">所学专业：</div>
                      <div class="personal_msg_r">{{personalInfo.majors_name}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 人物详细信息 -->
              <div class="charact_intro">
                <div class="char_intro_title">人物简介</div>
                <div class="charact_introduction">{{personalInfo.introduce}}</div>
                <div class="charact_btn" @click="charactDet()">详情 ></div>
              </div>
            </div>
          </div>
          <div class="link_img" @click="classify()">
            <img src="@/assets/img/major2.png" alt />
          </div>
          <!-- 热门专业 -->
          <div class="link_hot_major clearfix" v-show="botList.length>0">
            <!-- 上层标题 -->
            <div class="hot_major_top layout align_center">
              <h2 class="white_h2">热门专业</h2>
            </div>
            <!-- 下层内容 -->
            <div class="hot_major_bot clearfix">
              <div
                class="bot_content"
                v-for="item in botList"
                :key="item.id"
                @click="hotMajor(item)"
              >{{item.name}}</div>
            </div>
          </div>
          <!-- 重点学科 -->
          <div class="link_img" @click="discipline()">
            <img src="@/assets/img/major3.png" alt />
          </div>
          <!-- 双一流学科 -->
          <div class="link_img" @click="doubleFirst()">
            <img src="@/assets/img/major4.png" alt />
          </div>
          <!-- 高校学科评估结果 -->
          <div class="link_img" @click="assessResult()">
            <img src="@/assets/img/major5.png" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
import echarts from "echarts";
export default {
  data() {
    return {
      id: "",
      // 专业名称
      majorName: "",
      name: "",
      // 是否为本科
      major_cate: "",
      // 意向
      intention: "",
      // 收藏
      favorite: "",
      //  专业代码
      number: "",
      // 学位
      degree: "",
      // 专业分类
      classific: "",
      // 热门专业
      botList: [],
      // 目录
      secondList: [],
      thirdList: [],
      //   专业概况
      intro: "",
      // 培养目标
      target: "",
      // 开设课程
      course: "",
      // 具备能力
      abilityList: "",
      //   就业方向
      directionList: "",
      //  推荐职业
      occupationList: [],
      // 推荐院校
      schooList: [],
      // 报考选课要求
      courseData: [],
      // 饼状图
      charts: "",
      opinion: [],
      opinionData: [],
      // 个人信息
      personalInfo: [],
      // 报考院校 地区
      cityList: [],
      city: "",
      year: "",
      yearList: [],
      // 本专业id
      majorId: "",
      // 选择城市id
      cityId: "1"
    };
  },
  methods: {
    // 专业首页
    toMajorIndex(){
      this.$router.push({path:"/Major"})
    },
    // 推荐院校 详情
    toUniversity(item) {
      this.$router.push({
        path: "/UniversityIntroduc",
        query: { id: item.id }
      });
    },
    // 锚点定位
    anchor(id) {
      //判断访问终端
      var browser = {
        versions: (function() {
          var u = navigator.userAgent,
            app = navigator.appVersion;
          return {
            trident: u.indexOf("Trident") > -1, //IE内核
            presto: u.indexOf("Presto") > -1, //opera内核
            webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
            gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
          };
        })(),
        language: (
          navigator.browserLanguage || navigator.language
        ).toLowerCase()
      };
      if (browser.versions.trident){
        switch (id) {
          case 1:window.location.hash = "first";break;
          case 2:window.location.hash = "second";break;
          case 3:window.location.hash = "third";break;
          case 4:window.location.hash = "fourth";break;
          case 5:window.location.hash = "fifth";break;
          case 6:window.location.hash = "sixth";break;
          case 7:window.location.hash = "seventh";break;
          case 8:window.location.hash = "eighth";break;
        }
      }else{
        switch (id) {
          case 1:document.getElementById("first").scrollIntoView();break;
          case 2:document.getElementById("second").scrollIntoView();break;
          case 3:document.getElementById("third").scrollIntoView();break;
          case 4:document.getElementById("fourth").scrollIntoView();break;
          case 5:document.getElementById("fifth").scrollIntoView();break;
          case 6:document.getElementById("sixth").scrollIntoView();break;
          case 7:document.getElementById("seventh").scrollIntoView();break;
          case 8:document.getElementById("eighth").scrollIntoView();break;
        }
      }
      
    },
    // 人物详情
    charactDet() {
      this.$router.push({
        path: "/Character",
        query: { id: this.personalInfo.id }
      });
    },
    // 意向/取消意向
    Intention() {
      let url = "/api/common/yixiang";
      let params = {
        object_id: this.majorId,
        type: 2
      };
      post(url, params).then(res => {
        this.intention = !this.intention;
      });
    },
    // 收藏/取消收藏
    Favorite() {
      let url = "/api/common/favorite";
      let params = {
        object_id: this.majorId,
        type: 2
      };
      post(url, params).then(res => {
        this.favorite = !this.favorite;
      });
    },
    // 切换城市
    showCity(cityId) {
      this.cityId = cityId;
      this.getSearchBaokao(cityId);
    },

    // 报考院校
    schoolRequire(scope) {
      let cityName = "" ;
      for(let obj of this.cityList){
        if(this.city == obj.id){
          cityName = obj.name
        }
      }
      this.$router.push({
        path: "/SchoolRequire",
        query: {
          majors_id: this.majorId,
          province_id: this.cityId,
          subject_id: scope.id,
          majorName: this.majorName,
          subjectName: scope.senior_subject_name,
          cityName:cityName,
          year:this.year
        }
      });
    },

    // 热门专业
    hotMajor(item) {
      this.id = item.id;
      this.getMajorsDetail();
    },
    //饼状图
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          x: "right",
          y: "bottom",
          data: this.opinion
        },
        color: [
          "#FFCF2C",
          "#D5A011",
          "#F17625",
          "#8ED740",
          "#0ABCD8",
          "#FF9655",
          "#11B2CB",
          "#08AE1A"
        ],
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            center: ["45%", "62%"],
            avoidLabelOverlap: true,
            legendHoverLink: true,
            label: {
              fontSize: "14",
              show: false,
              position: "outer",
              emphasis: {
                show: true,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(30, 144, 255，0.5)",
                formatter: " {b}： {d}%  "
              }
            },
            data: this.opinionData
          }
        ]
      });
    },
    // 表头样式
    changeHeader({ row, rowIndex }) {
      if (rowIndex == 0) {
        return "background-color:#f1f1f1;color:#5B5E63!important;font-weight:400";
      }
    },
    // 教育部专业分类
    classify() {
      this.$router.push({ path: "/Major" });
    },
    // 重点学科
    discipline() {
      this.$router.push({ path: "/KeyDiscipline" });
    },
    // 双一流学科
    doubleFirst() {
      this.$router.push({ path: "/DoubleFirst" });
    },
    // 高校学科评估结果
    assessResult() {
      this.$router.push({ path: "/AssessResult" });
    },
    // 专业详情
    getMajorsDetail() {
      this.secondList = [];
      this.thirdList = [];
      this.courseData = [];
      this.option = [];
      this.opinionData = [];
      let url = "/api/major/getMajorsDetail/";
      let params = {
        id: this.id
      };
      post(url, params).then(res => {
        this.majorId = res.majors.id;
        // 父类
        this.name = res.majors.parent;
        // 专业名称
        this.majorName = res.majors.name;
        // 是否为本科
        this.major_cate = res.majors.major_category;
        // 意向
        this.intention = res.majors.is_yixiang;
        // 收藏
        this.favorite = res.majors.is_favorite;
        // 专业代码
        this.number = res.majors.number;
        // 学位
        this.degree = res.majors.degree;
        // 专业分类
        this.classific = res.majors.major;
        // 专业介绍
        this.intro = res.majors.introduce;
        if (this.intro) {
          let obj = {};
          obj["secondId"] = 1;
          obj["name"] = "专业介绍";
          this.secondList.push(obj);
        }
        // 培养目标
        this.target = res.majors.target;
        if (this.target) {
          let obj = {};
          obj["secondId"] = 2;
          obj["name"] = "培养目标";
          this.secondList.push(obj);
        }
        // 开设课程
        this.course = res.majors.lesson;
        if (this.course) {
          let obj = {};
          obj["secondId"] = 3;
          obj["name"] = "开设课程";
          this.secondList.push(obj);
        }
        // 具备能力
        this.abilityList = res.majors.ability;
        if (this.abilityList) {
          let obj = {};
          obj["secondId"] = 4;
          obj["name"] = "具备能力";
          this.secondList.push(obj);
        }
        // 就业方向
        this.directionList = res.majors.job;
        if (this.directionList) {
          let obj = {};
          obj["thirdId"] = 5;
          obj["name"] = "就业方向";
          this.thirdList.push(obj);
        }
        // 推荐职业
        this.occupationList = res.majors.recommend_profession;
        if (this.occupationList.length>0) {
          let obj = {};
          obj["thirdId"] = 6;
          obj["name"] = "推荐职业";
          this.thirdList.push(obj);
        }
        // 推荐院校
        this.schooList = res.majors.recommend_school;
        if (this.schooList.length>0) {
          let obj = {};
          obj["thirdId"] = 7;
          obj["name"] = "推荐院校";
          this.thirdList.push(obj);
        }
        // 报考选课地区
        this.cityList = res.majors.baokao.city;
        this.city = this.cityList[0].id;
        // 报考选课年份
        this.yearList.push(res.majors.baokao.year);
        this.year = res.majors.baokao.year;
        if (res.majors.baokao.data.length > 1) {
          let obj = {};
          obj["thirdId"] = 8;
          obj["name"] = "选课要求";
          this.thirdList.push(obj);
        }
        // 报考选课要求
        for (let obj of res.majors.baokao.data) {
          let bkObj = {};
          // 饼图选项
          let pieObj = {};
          bkObj["senior_subject_name"] = obj.senior_subject_name;
          bkObj["university_count"] = obj.university_count;
          bkObj["percent"] = obj.percent + "%";
          bkObj["id"] = obj.senior_subject;
          this.courseData.push(bkObj);
          // 饼图名称
          this.opinion.push(obj.senior_subject_name);
          pieObj["value"] = obj.university_count;
          pieObj["name"] = obj.senior_subject_name;
          this.opinionData.push(pieObj);
          this.$nextTick(function() {
            this.drawPie("main");
          });
        }
        // 经典人物
        this.personalInfo = res.majors.classical;
      });
    },
    // 专业详情报考选课筛选
    getSearchBaokao(cityId) {
      let url = "/api/major/getSearchBaokao/";
      let params = {
        majors_id: this.majorId,
        province_id: cityId
      };
      this.courseData = [];
      this.opinionData = [];
      this.option = [];
      post(url, params).then(res => {
        for (let obj of res) {
          let bkObj = {};
          // 饼图选项
          let pieObj = {};
          bkObj["senior_subject_name"] = obj.senior_subject_name;
          bkObj["university_count"] = obj.university_count;
          bkObj["percent"] = obj.percent + "%";
          bkObj["id"] = obj.senior_subject;
          this.courseData.push(bkObj);
          // 饼图名称
          this.opinion.push(obj.senior_subject_name);
          pieObj["value"] = obj.university_count;
          pieObj["name"] = obj.senior_subject_name;
          this.opinionData.push(pieObj);
          this.$nextTick(function() {
            this.drawPie("main");
          });
        }
      });
    },
    // 热门专业
    getHotList() {
      let url = "/api/major/getHotList/";
      post(url).then(res => {
        this.botList = res.hot_list;
      });
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getMajorsDetail();
    this.getHotList();
  },
  watch:{
    '$route'(to,from){
      this.id = this.$route.query.id;
      this.getMajorsDetail();
    }
  },
};
</script>
<style scoped>
@import "../../../../style/majorDetail.css";
@import "../../../../style/majorSearch.css";
/* 目录 */
@import "../../../../style/occupation.css";

/* 就业方向 */
.direction_ul li {
  list-style: none;
}
/* 推荐职业 */
.occupation {
  margin-top: 20px;
}
.occupation_name {
  padding: 6px 20px;
  border: 1px solid #8c9198;
  border-radius: 3px;
  margin-right: 24px;
  color: #8c9198;
}
.occupation_name:hover {
  background-color: #409eff;
  color: #fff;
  border-collapse: #409eff;
}
/* 推荐院校 */
.recommend_school {
  padding: 18px;
  float: left;
  margin-right: 80px;
  margin-top: 20px;
}
/* 学校图片 */
.school_img {
  width: 89px;
  height: 89px;
  margin-right: 20px;
}
.school_img img {
  width: 100%;
  height: 100%;
}
/* 学校名称 */
.school_name {
  font-weight: bold;
  font-size: 16px;
  color: #5b5e63;
}
.school_address {
  font-size: 14px;
  margin-top: 10px;
  float: left;
  margin-right: 3px;
}
.recommend_school:hover .school_name,
.recommend_school:hover {
  color: #409eff;
}
/* 报考选课要求 */
.choice_course {
  margin-top: 25px;
}
.check_school {
  color: #409eff;
}
/* 经典人物 */
.personal_msg_l,
.personal_msg_r {
  float: left;
}
</style>