<template>
  <!-- 大学查询 -->
  <div class="major_search clearfix">
    <div class="major_box clearfix">
      <!-- 搜索框 -->
      <div class="search_input clearfix layout flex_row align_center">
        <input type="text" placeholder="学校查询" v-model="universityName" />
        <div class="search_tips" @click="universitySearch()">搜索</div>
      </div>
      <!-- 热门大学 -->
      <div class="hot_major clearfix ">
        <div class="hot_major_title">热门大学：</div>
        <!-- 大学名称 -->
        <div
          class="hot_major_name"
          v-for="item in hotList"
          :key="item.id"
          @click="hotMajor(item)"
        >{{item.name}}</div>
      </div>

      <!-- 搜索结果 -->
      <div class="university_search_result">
        <!-- 结果标题 -->
        <div class="university_result_title layout align_center flex_row">
          <!-- 图标 -->
          <div class="result_icon">
            <img src="@/assets/img/23.png" alt />
          </div>
          <div class="result_tip">搜索结果</div>
          <div>
            共
            <i class="university_num">{{totalNum}}</i>所院校
          </div>
        </div>
        <!-- 搜索的院校 -->
        <div
          class="searched_university layout flex_diection"
          v-show="resultList.length"
          v-for="item in resultList"
          :key="item.id"
        >
          <div class="layout flex_row justify">
            <!-- 院校 -->
            <div class="layout flex_row university_search_msg" @click="toUniversity(item)">
              <!-- 院校logo -->
              <div class="university_logo clearfix">
                <img :src="item.images" alt />
              </div>
              <!-- 院校信息 -->
              <div class="university_det_msg layout flex_diection justify align_left">
                <div class="university_name layout align_center flex_row">
                  <i class="university_hover_color">{{item.name}}</i>
                  <i class="nine" v-show="item.is_985 == 1">985</i>
                  <i class="two" v-show="item.is_211 == 1">211</i>
                </div>
                <div>
                  中国校友会排名:
                  <img src="@/assets/img/54.png" alt v-show="item.rank==1" />
                  <img src="@/assets/img/55.png" alt v-show="item.rank==2" />
                  <img src="@/assets/img/53.png" alt v-show="item.rank==3" />
                  <i v-show="item.rank>3">{{item.rank}}</i>
                  <i v-show="item.rank==0">-</i>
                </div>
                <div>学校类别：{{item.type_name?item.type_name:'-'}}</div>
                <div>隶属单位：{{item.belong?item.belong:'-'}}</div>
                <div class="clearfix layout flex_row">
                  <div>专业优势：</div>
                  <div class="search_advantage">{{item.profession?item.profession:'-'}}</div>
                </div>
              </div>
            </div>

            <!-- 收藏 -->
            <div
              class="university_collection"
              :class="{university_collectioned:item.is_favorite == 1 }"
              @click="joinCollect(item)"
            >{{item.is_favorite == 0?"收藏":"已收藏"}}</div>
          </div>
          <!-- 学校联系方式 -->
          <div class="university_contact layout flex_row align_center">
            <div>
              <img src="@/assets/img/43.png" alt class="university_contact_icon" />
              学校地址：{{item.address?item.address:'-'}}
            </div>
            <div class="university_phone">
              <img src="@/assets/img/42.png" alt class="university_contact_icon" />
              联系方式：{{item.phone?item.phone:'-'}}
            </div>
            <div>
              <img src="@/assets/img/41.png" alt class="university_contact_icon" />
              电子邮箱：{{item.email?item.email:'-'}}
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :page-count="total"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  data() {
    return {
      // 分页
      total: 0,
      totalNum: "",
      resultList: [],
      page: 1,
      universityName: "",
      // 热门院校
      hotList: [],
      //   关键字
      keyword: ""
    };
  },
  methods: {
    // 收藏/取消收藏
    joinCollect(item) {
      let url = "/api/common/favorite";
      let params = {
        object_id: item.id,
        type: 1
      };
      post(url, params).then(res => {
        item.is_favorite = !item.is_favorite;
      });
    },
    // 分页
    handleCurrentChange(val) {
      this.page = val;
      this.getSchoolList();
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    // 大学详情
    toUniversity(item) {
      this.$router.push({
        path: "/UniversityIntroduc",
        query: { id: item.id }
      });
    },
    hotMajor(item){
      this.$router.push({
        path: "/UniversityIntroduc",
        query: { id: item.id }
      });
    },
    // 搜索
    universitySearch() {
      this.keyword = this.universityName;
      this.getSchoolList();
    },
    // 大学院校列表
    getSchoolList() {
      let url = "/api/school/getSchoolList/";
      let params = {
        keyword: this.keyword,
        page: this.page
      };
      post(url, params).then(res => {
        this.resultList = res.school_list;
        // 总页数
        this.total = res.total_page;
        // 总数
        this.totalNum = res.school_count;
      });
    },

    // 热门学校列表
    getHotList() {
      let url = "/api/school/getHotList/";
      post(url).then(res => {
        this.hotList = res.hot_list;
      });
    }
  },
  mounted() {
    this.keyword = this.$route.query.keyWord;
    this.universityName = this.$route.query.keyWord;
    this.getHotList();
    this.getSchoolList();
  }
};
</script>
<style scoped>
@import "../../../../style/schoolFirstPage.css";
.major_search {
  font-size: 14px;
  color: #8c9198;
}
.hot_major {
  margin-bottom: 32px;
}
.university_hover_color:hover {
  color: #409eff;
}
</style>