<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"
          @keyup.enter="universitySearch()"
        />
        <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="toUniversity(item)"
        >{{item.name}}</div>
      </div>
      <!-- 院校地区 -->
      <div class="university_address clearfix">
        <div class="university_title">院校地区</div>
        <div class="clearfix university_provinces">
          <div
            :class="{university_province_hover:isAddress == item.id}"
            class="university_province"
            v-for="item in addressList"
            :key="item.id"
            @click="changeAdd(item)"
          >{{item.city_name}}</div>
        </div>
      </div>
      <!-- 学校类别 -->
      <div class="university_address clearfix">
        <div class="university_title">学校类别</div>
        <div class="clearfix university_provinces">
          <div
            :class="{university_province_hover:isType == item.id}"
            class="university_province"
            v-for="item in typeList"
            :key="item.id"
            @click="changeType(item)"
          >{{item.type_name}}</div>
        </div>
      </div>
      <!-- 办学性质 -->
      <div class="university_address clearfix">
        <div class="university_title">办学性质</div>
        <div class="clearfix university_provinces">
          <div
            :class="{university_province_hover:isNatrue == item.id}"
            class="university_province"
            v-for="item in natrueList"
            :key="item.id"
            @click="changeNatrue(item)"
          >{{item.nature_name}}</div>
        </div>
      </div>
      <!-- 学历层次 -->
      <div class="university_address clearfix">
        <div class="university_title">学历层次</div>
        <div class="clearfix university_provinces">
          <div
            :class="{university_province_hover:isRecord == item.id}"
            class="university_province"
            v-for="item in recordList"
            :key="item.id"
            @click="changeRecord(item)"
          >{{item.record_name}}</div>
        </div>
      </div>
      <!-- 特别属性 -->
      <div class="university_address clearfix">
        <div class="university_title">特别属性</div>
        <div class="clearfix university_provinces">
          <div
            :class="{university_province_hover:isSort == item.id}"
            class="university_province"
            v-for="item in sortList"
            :key="item.id"
            @click="changeSort(item)"
          >{{item.sort_name}}</div>
        </div>
      </div>
      <!-- 分数查询 -->
      <div class="university_address clearfix">
        <div class="clearfix">
          <div class="university_title">分数查询</div>
          <div class="clearfix university_provinces school_select">
            <div class="search_select layout flex_row align_center">
              <div class="search_title">招生地区:</div>
              <el-select v-model="city" @change="getCityId">
                <el-option
                  v-for="item in addressList"
                  :key="item.city_name"
                  :label="item.city_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="search_select layout flex_row align_center">
              <div class="search_title">查询年份:</div>
              <el-select v-model="year">
                <el-option
                  v-for="(item,index) in yearList"
                  :key="index"
                  :label="item.year"
                  :value="item.year"
                ></el-option>
              </el-select>
            </div>
            <div class="search_select layout flex_row align_center">
              <div class="search_title">类别:</div>
              <el-select v-model="type" @change="getType">
                <el-option
                  v-for="item in branchList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="search_select layout flex_row align_center">
              <div class="search_title">批次:</div>
              <el-select v-model="batch" placeholder="不限">
                <el-option
                  v-for="item in batchList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="search_select layout flex_row align_center">
              <div class="search_title">高考总分:</div>
              <input type="text" v-model="score" />
              <div class="university_tips">
                <i v-show="!score">请填写高考总分</i>（*筛选出录取记录分数低于所填分数的学校）
              </div>
            </div>
          </div>
        </div>
        <!-- 已选成绩 -->
        <div class="choiced_selection" v-show="isSelect">
          {{province}} / {{year}} / 高考总分{{score}} / {{stand}}
          <i
            class="delete_symbol"
            @click="showSelect"
          >×</i>
        </div>
        <!-- 分数查询按钮 -->
        <div class="choice_btn layout align_center justify_center">
          <!-- 按最低分查 -->
          <div class="choice_btn_l" @click="miniScore()">{{miniCon}}</div>
          <!-- 按平均分查 -->
          <div class="choice_btn_r" @click="average()">{{averageCon}}</div>
        </div>
      </div>
      <!-- 搜索结果 -->
      <div class="university_search_result" id="search">
        <!-- 结果标题 -->
        <div class="university_result_title layout align_left 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_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">
                  <div class="advantage_title">专业优势：</div>
                  <div class="advantage">{{item.profession?item.profession:'-'}}</div>
                </div>
              </div>
            </div>
            <!-- 录取情况 -->
            <div
              class="university_det_msg university_enroll layout flex_diection justify align_left"
              v-show="item.batch"
            >
              <div class="university_name">{{year}} {{province}} {{typeName}} 录取情况</div>
              <div>批次：{{item.batch}}</div>
              <div>平均分：{{item.average}}</div>
              <div>最低分：{{item.min}}</div>
            </div>
            <!-- 收藏 -->
            <div
              class="university_collection"
              :class="{university_collectioned:item.is_favorite  }"
              @click="joinCollect(item)"
            >{{item.is_favorite ?"已收藏":"收藏"}}</div>
          </div>
          <!-- 学校联系方式 -->
          <div class="university_contact layout flex_row align_center" v-show="isSelect">
            <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-page = "page"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  data() {
    return {
      // 搜索院校名称
      universityName: "",
      // 分页
      total: 0,
      totalNum: "",
      isSelect: false,
      major_name: "",
      isChoice: 0,
      isUnder: true,
      // 热门学校列表
      hotList: [],
      // 地区
      addressList: [],
      addressList: [],
      isAddress: "",
      // 学校类别
      typeList: [],
      isType: "",
      // 办学性质
      natrueList: [],
      isNatrue: "",
      // 学历层次
      recordList: [],
      isRecord: "",
      // 特别属性
      sortList: [],
      isSort: "",
      city: 3,
      province: "天津市",
      provinceId: "3",
      year: "2018",
      type: 1,
      typeName: "理科",
      batch: "",
      stand: "",
      // 分数
      score: "",
      searchId: "",
      // 平均分
      averageCon: "按平均分查询",
      // 最低分
      miniCon: "按最低分查询",
      // 查询年份
      yearList: [],
      // 类别
      branchList: [],
      // 批次
      batchList: [],
      resultList: [],
      page: 1
    };
  },
  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.getElementById("search").scrollIntoView();
    },
    // 院校地区
    changeAdd(item) {
      this.isAddress = item.id;
      this.page = 1;
      this.getSchoolList();
    },
    // 学校类别
    changeType(item) {
      this.isType = item.id;
      this.page = 1;
      this.getSchoolList();
    },
    // 办学性质
    changeNatrue(item) {
      this.isNatrue = item.id;
      this.page = 1;
      this.getSchoolList();
    },
    // 学历层次
    changeRecord(item) {
      this.isRecord = item.id;
      this.page = 1;
      this.getSchoolList();
    },
    // 特别属性
    changeSort(item) {
      this.isSort = item.id;
      this.page = 1;
      this.getSchoolList();
    },
    // 分数查询
    // 招生地区
    getCityId(id) {
      let obj = {};
      obj = this.addressList.find(item => {
        return item.id === id;
      });
      this.province = obj.city_name;
      this.provinceId = obj.id;
    },
    // 类别
    getType(id) {
      let obj = {};
      obj = this.branchList.find(item => {
        return item.id === id;
      });
      this.typeName = obj.name;
    },
    // 最低分
    miniScore() {
      this.stand = this.miniCon;
      if (this.score) {
        this.searchId = 1;
        this.isSelect = true;
        this.page = 1;
        this.getSchoolList();
      }
    },
    // 平均分
    average() {
      this.stand = this.averageCon;
      if (this.score) {
        this.searchId = 2;
        this.isSelect = true;
        this.page = 1;
        this.getSchoolList();
      }
    },
    // 大学院校列表
    getSchoolList() {
      let url = "/api/school/getSchoolList/";
      let params = {
        city_id: this.isAddress,
        school_type_id: this.isType,
        nature_id: this.isNatrue,
        school_record_id: this.isRecord,
        sort_id: this.isSort,
        province_id: this.provinceId,
        year: this.year,
        branch: this.type,
        batch: this.batch,
        score: this.score,
        search_sort: this.searchId,
        page: this.page
      };
      post(url, params).then(res => {
        this.resultList = res.school_list;
        // 总页数
        this.total = res.total_page;
        // 总数
        this.totalNum = res.school_count;
      });
    },
    // 分数选择 ×号
    showSelect() {
      this.isSelect = false;
      this.getSchoolList();
    },
    // 大学详情
    toUniversity(item) {
      this.$router.push({
        path: "/UniversityIntroduc",
        query: { id: item.id }
      });
    },
    // 搜索
    universitySearch() {
      this.$router.push({
        path: "/UniversitySearch",
        query: { keyWord: this.universityName }
      });
    },
    // 筛选条件数据
    getSchoolSearch() {
      let url = "/api/school/getSchoolSearch/";
      post(url).then(res => {
        // 地区
        this.addressList = res.city;
        this.addressList.unshift({id:"",city_name:"不限"});
        // 学校类别
        this.typeList = res.type;
        this.typeList.unshift({id:"",type_name:"不限"});
        // 办学性质
        this.natrueList = res.natrue;
        this.natrueList.unshift({id:"",nature_name:"不限"});
        // 学历层次
        this.recordList = res.record;
        this.recordList.unshift({id:"",record_name:"不限"});
        // 特别属性
        this.sortList = res.sort;
        this.sortList.unshift({id:"",sort_name:"不限"});
        // 年份
        this.yearList = res.year;
        // 类别
        this.branchList = res.branch;
        // 批次
        this.batchList = res.batch;
        let obj = {};
        obj["id"] = "";
        obj["name"] = "不限";
        this.batchList.unshift(obj);
      });
    },
    // 热门学校列表
    getHotList() {
      let url = "/api/school/getHotList/";
      post(url).then(res => {
        this.hotList = res.hot_list;
      });
    }
  },
  mounted() {
    this.getHotList();
    this.getSchoolSearch();
    this.getSchoolList();
  }
};
</script>
<style scoped>
@import "../../../../style/schoolFirstPage.css";
.major_search {
  font-size: 14px;
  color: #8c9198;
}
.hot_major {
  margin-bottom: 32px;
}
/* 院校地址 */
.university_address {
  padding: 22px;
  background-color: #fff;
  margin-top: 20px;
}
.university_title {
  font-weight: bold;
  color: #34485e;
  font-size: 16px;
  line-height: 30px;
  margin-right: 36px;
  float: left;
}
/* 省份 */
.university_provinces {
  float: right;
  width: 1056px;
}
.university_province {
  width: 92px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 3px;
  float: left;
  margin-right: 4px;
}
.university_province_hover {
  color: #fff;
  background-color: #409eff;
}
/* 招生查询 */
.search_select {
  float: left;
  margin-right: 72px;
  margin-bottom: 19px;
}
.search_title {
  margin-right: 20px;
}
.university_tips {
  color: #f44a5e;
  font-size: 12px;
  margin-left: 7px;
}
/* 已选成绩 */
.choiced_selection {
  margin-left: 100px;
  text-align: left;
  color: #409eff;
  width: 369px;
  height: 30px;
  line-height: 30px;
  background-color: #f2f5fa;
  padding-left: 17px;
}
/* ×号 */
.delete_symbol {
  float: right;
  margin-right: 9px;
  font-size: 6px;
  color: #8c9198;
}
/* 分数查询按钮 */
.choice_btn {
  width: 100%;
  margin: 0 auto;
  margin-top: 30px;
}
.choice_btn_l,
.choice_btn_r {
  width: 185px;
  height: 40px;
  background-color: #409eff;
  text-align: center;
  line-height: 40px;
  color: #fff;
  border-radius: 3px;
}
.choice_btn_l {
  margin-right: 180px;
}
.university_hover_color:hover {
  color: #409eff;
}
</style>