<template>
  <div>
    <div class="career-container">
      <div class="career-wrapper">
        <div>
          <div class="top-image" v-if="curType == 0">
            <img src="@/assets/images/img_zhiyuan_banner.png" />
          </div>
          <course-tab-page v-if="curType == 7 || curType == 0" />
        </div>
        <div class="career-others">
          <div class="career-others-left"></div>
          <div class="career-others-right"></div>
        </div>
      </div>
    </div>
    <div class="index_container">
      <div class="left_content">
        <!-- 测评 -->
        <div class="ceping">
          <div>
            <div class="tit" style="color: #47c6a2">
              专业兴趣测评（HOLLAND）
            </div>
            <div class="desc">
              霍兰德职业兴趣测评（Self-Directed
              Search）是由美国职业指导专家霍兰德（John
              Holland）根据他本人大量的职业咨询经验及其职业类型理论编制的测评工具。霍兰德认为，个人职业兴趣特性与职业之间应有一种内在的对应关系。根据兴趣的不同，人格可分为研究型（I）、艺术型（A）、社会型（S）、企业型（E）、传统型（C）、现实型（R）六个维度，每个人的性格都是这六个维度的不同程度组合。
            </div>
            <div class="desc_bottom">
              职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。
            </div>
            <div>
              <el-button type="primary" round @click="goCareer('HOLLAND')"
                >进入评测</el-button
              >
              <el-button
                type="primary"
                plain
                round
                @click="goReportList('HOLLAND')"
                >查看记录</el-button
              >
            </div>
          </div>
          <div>
            <div class="tit" style="color: #1a74d3">
              专业兴趣测评（HOLLAND）
            </div>
            <div class="desc">
              MBTI已成为最权威的性格测评工具，它已经被翻译成近20种世界主要语言，每年使用者多达200多万，其中不乏世界500强的大型企业。MBTI是一种迫选型、自我报告式的性格测试，用以衡量和描述人们在获取信息、做出决策、对待生活等方面的心理活动规律和性格类型。它以瑞士心理学家Carl
              G.Jung（荣格）的性格理论为基础，由美国的心理学家Katherine Cook
              Briggs 和她的女儿Isabel Briggs Myers共同研究开发。
            </div>
            <div class="desc_bottom">
              职业性格测评，定位于高中生的职业性格特征，从与职业和专业选择密切相关的4类性格特征入手，全面深入地了解个人的职业性格优势和偏好，并提供应用测评结果指导生涯规划以及大学专业选择的建议。
            </div>
            <div>
              <el-button
                style="background: #1a74d3; color: white"
                round
                @click="goCareer('BMTI')"
                >进入评测</el-button
              >
              <el-button
                style="border: 1px solid #1a74d3; color: #1a74d3"
                @click="goReportList('MBTI')"
                plain
                round
                >查看记录</el-button
              >
            </div>
          </div>
        </div>
        <!-- 三大库 -->
        <div class="three_library" style="margin-bottom: 40px">
          <div class="three_library_top">
            <img src="@/assets/images/career/icon_sandaku.png" alt="" />
            <span style="margin-left: 8px">三大库</span>
          </div>
          <div style="display: flex; justify-content: space-between">
            <img
              @click="toDetail('/career/plan/UniversitiesColleges')"
              src="@/assets/images/career/img_UNIVERSITIES.png"
              alt="院校库"
            />
            <img
              src="@/assets/images/career/img_major.png"
              @click="toDetail('/career/plan/ProfessLib')"
              alt="专业库"
            />
            <img
              src="@/assets/images/career/img_zhiyeku.png"
              @click="toDetail('/career/vocation/index')"
              alt="职业库"
            />
          </div>
          <!--  选科查询  -->
          <div style="margin-top: 22px; margin-bottom: 35px">
            <img
              @click="toDetail('/career/subject/index')"
              src="@/assets/images/career/xuanke.png"
              alt="选科查询"
            />
          </div>
          <!--  模拟志愿 -->
          <div style="display: flex; justify-content: space-between">
            <div style="margin-right: 16px; position: relative">
              <img
                src="@/assets/images/career/img_monizhiyuan.png"
                alt="模拟志愿"
              />
              <el-button
                type="primary"
                style="position: absolute; left: 35px; bottom: 20px"
                size="mini"
                round
                @click="toDetail('/career/SimulatedVolunteer')"
                >进入评测</el-button
              >
            </div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-content: space-between;
                flex-wrap: wrap;
              "
            >
              <img
                @click="toDetail('/career/batch')"
                style="height: 135px"
                src="@/assets/images/career/img_picikongzhi.png"
                alt="批次控制线"
              />
              <img
                style="height: 135px"
                @click="toDetail('/career/yfyd')"
                src="@/assets/images/career/img_yifenyiduan.png"
                alt="一分一段"
              />
              <img
                style="height: 135px"
                src="@/assets/images/career/img_toudangxian.png"
                @click="toDetail('/career/ShiftLine')"
                alt="投档线"
              />
              <img
                style="height: 135px"
                src="@/assets/images/career/img_gaokaomingci.png"
                @click="toDetail('/career/gkmc/index')"
                alt="高考名词"
              />
            </div>
          </div>
        </div>
        <!-- tabs -->
        <div>
          <div style="margin-bottom: 16px; display: flex; align-items: center">
            高考资讯
            <span style="color: #8a8a8a; font-size: 12px; margin: 0 8px"
              >最新、最全的高考资讯</span
            >
            <!-- <span class="more">更多>></span> -->
          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              v-for="(item, index) in newsList"
              :key="index"
              :label="item.label"
              :name="item.label"
            >
              <div class="news">
                <a
                  class="news_item"
                  v-for="(item, index) in newsDataList"
                  :key="index"
                  @click="toNews(item.id,)"
                >
                  {{ item.createTime.split(" ")[0] }}{{ item.title }}
                </a>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="right_top">
        <!-- 热门院校榜单 -->
        <div class="university_top">
          <div class="tit">
            <img src="@/assets/images/career/icon_hot.png" alt="热门院校榜单" />
            <span>热门院校榜单</span>
          </div>
          <div class="top_data">
            <div
              class="item"
              v-for="(item, index) in universitiesTopList"
              :key="item.id"
            >
              <div>
                <span class="index" :class="{ top_active: index < 3 }">{{
                  index + 1
                }}</span
                ><a @click="toUniversity(item.univerid)">{{ item.name }}</a>
              </div>

              <div class="count">
                <img
                  style="margin-right: 4px"
                  src="@/assets/images/career/icon_star.png"
                  alt=""
                />
                <span>{{ item.favorities }}人</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 热门专业榜单 -->
        <div class="marjor_top">
          <div class="tit">
            <img
              src="@/assets/images/career/icon_hot2.png"
              alt="热门专业榜单"
            />
            <span>热门专业榜单</span>
          </div>
          <div class="top_data">
            <div
              class="item"
              v-for="(item, index) in marjorTopList"
              :key="item.id"
            >
              <div>
                <span class="index" :class="{ top_active: index < 3 }">{{
                  index + 1
                }}</span
                ><a @click="goMarjorDetail(item.id)">{{ item.name }}</a>
              </div>

              <div class="count">
                <img
                  style="margin-right: 4px"
                  src="@/assets/images/career/icon_star.png"
                  alt=""
                />
                <span>{{ item.favorities }}人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import courseTabPage from "../components/courseTabPage.vue";
import * as career from "@/api/webApi/career-news";
export default {
  components: { courseTabPage },
  data() {
    return {
      curType: 0,
      activeName: "",
      newsList: [],
      newsDataList: [],
      universitiesTopList: [],
      marjorTopList: [],
    };
  },
  watch: {
    $route: function (res) {
      this.switchType(res.query);
    },
  },
  created() {
    this.getTypes();
    career
      .universitiesTop({
        pageNum: 1,
        pageSize: 10,
      })
      .then((res) => {
        this.universitiesTopList = res.rows;
        console.log(res);
      });
    career
      .marjorsTop({
        pageNum: 1,
        pageSize: 10,
      })
      .then((res) => {
        this.marjorTopList = res.rows;
        console.log(res);
      });
  },
  methods: {
    goMarjorDetail(id) {
      this.$router.push({
        path: "/career/plan/ProfessLibDetail",
        query: {
          majorId: id,
        },
      });
    },
    toUniversity(id) {
      this.$router.push({ name: "UniversityDetail", params: { id: id } });
    },
    toNews(id) {
      this.$router.push({path:"/career/info/index",query:{name:this.activeName}});
    },
    handleClick(e) {
      console.log(e.name);
      this.getList();
    },
    getTypes() {
      career.types().then((res) => {
        this.activeName = res.rows[0].label;
        this.newsList = res.rows;
        this.getList();
        console.log("career news res", res);
      });
    },
    getList() {
      career
        .list({
          pageNum: 1,
          pageSize: 10,
          tag: "hot",
          type: this.activeName,
        })
        .then((res) => {
          this.newsDataList = res.rows;
          console.log(res);
        });
    },
    toDetail(path) {
      console.log(path);
      this.$router.push(path);
    },
    goCareer(type) {
      if (type === "HOLLAND") {
        this.$router.push({
          name: "CareerEvaDetail",
          params: { type: "HOLLAND" },
        });
      } else if (type === "BMTI") {
        this.$router.push({
          name: "CareerEvaDetail",
          params: { type: "BMTI" },
        });
      }
    },
    goReportList(type) {
      if (type === "HOLLAND") {
        this.$router.push({ name: "CareerHollandReportList" });
      } else if (type === "MBTI") {
        this.$router.push({ name: "CareerMbtiReportList" });
      }
    },
    switchType(data) {
      this.curType = parseInt(data.id) || 0;
      switch (this.curType) {
        case 2:
          break;
        case 3:
          break;
        case 4:
          break;
        case 5:
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#app .hideSidebarNone .main-container {
  margin-left: 0px;
  background: #f7f7f7 !important;
}
.career-container {
  background-color: #ffffff;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.index_container {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  background: #f7f7f7;
}
.index_container .left_content {
  width: 884px;
}
.right_top {
  flex: 1;
  margin-left: 16px;
  background: #f7f7f7;
}
.right_top .tit {
  display: flex;
  align-content: center;
  font-size: 18px;
  font-weight: 500;
  color: #343434;
  line-height: 25px;
  padding-bottom: 16px;
  border-bottom: 2px solid #6a6a6a;
}
.career-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.top-image {
  height: 360px;
  margin-bottom: 20px;
  background: #ccc;
}
.top-image img {
  width: 100%;
  height: 100%;
}
.ceping {
  display: flex;
  margin-bottom: 35px;
}
.ceping > div {
  margin-right: 16px;
  background: #ffffff;
  padding: 24px 20px 16px 30px;
}
.ceping > div:last-child {
  margin-right: 0;
}
.ceping .tit {
  font-size: 16px;
  margin-bottom: 16px;
}
.ceping .desc {
  font-size: 10px;
  margin-bottom: 16px;
  font-weight: 400;
  color: #8b8b8b;
  line-height: 14px;
}
.ceping .desc_bottom {
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #343434;
  line-height: 14px;
  margin-bottom: 30px;
}
.three_library img {
  cursor: pointer;
}
.three_library_top {
  display: flex;
  margin-bottom: 16px;
  align-items: center;
  color: #47c6a2;
}
.top_data {
  padding: 32px 27px;
  margin-bottom: 100px;
}
.item {
  display: flex;
  align-items: center;
  color: #343434;
  font-size: 14px;
  justify-content: space-between;
  margin-bottom: 24px;
}
.item:last-child {
  margin-bottom: 0;
}
.item .index {
  width: 15px;
  display: inline-block;
  margin-right: 16px;
  height: 15px;
  font-size: 10px;
  color: #7b7b7b;
  background: #d8d8d8;
  border-radius: 50%;
  line-height: 15px;
  text-align: center;
}
.item .count {
  font-size: 12px;
  display: flex;
  align-items: center;
  font-weight: 400;
  color: #8b8b8b;
}
.more {
  background: #a6a6a6;
  border-radius: 16px;
  opacity: 0.16;
  padding: 2px 14px;
}
.news {
  display: flex;
  flex-wrap: wrap;
}
.news .news_item {
  flex: 0 0 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 50px;
  margin-bottom: 24px;
}
.news .news_item:hover {
  color: #47c6a2;
}
a:hover {
  color: #47c6a2;
}
.item .top_active {
  background: #1a74d3;
  color: white;
}
</style>
