<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>报考要求</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="require_msg clearfix">
              <div>高中选考科目：{{subjectName}}</div>
              <div>大学专业：{{majorName}}</div>
              <div>省份：{{cityName}}</div>
              <div>学年：{{year}}</div>
            </div>
            <div class="require_tips">*本平台数据经过二次统计整理，可能存在个别误差，请最终以学校及教育厅公布数据为准。</div>
            <!-- 下拉选框 -->
            <div class="layout flex_row school_select">
              <el-select
                class="left_select"
                v-model="province"
                placeholder="请选择"
                @change="showProvince"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.id"
                  :label="item.city_name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select v-model="city" placeholder="请选择" @change="showCity">
                <el-option
                  v-for="item in cityList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <!-- 院校 -->
            <div class="school_msg clearfix" id="search">
              <div
                class="school_single"
                v-for="item in schooList"
                :key="item.id"
                @click="toUniversity(item.school_id)"
              >
                <!-- 院校信息 -->
                <div class="school_single_msg clearfix">
                  <!-- 院校图片 -->
                  <div class="school_single_img">
                    <img :src="item.images" alt />
                  </div>
                  <!-- 信息 -->
                  <div class="school_det_msg layout flex_diection align_left">
                    <!-- 院校名称 -->
                    <div class="school_single_name">{{item.name}}</div>
                    <!-- 所在地 -->
                    <div class="school_single_address layout flex_row align_center">
                      <img src="@/assets/img/43.png" alt />
                      {{item.city}}
                    </div>
                    <!-- 报考信息 -->
                    <div class="school_single_address layout flex_row align_center">
                      <div class="title_left">专业类：</div>
                      <div class="content_right">{{item.major_name}}</div>
                    </div>
                    <div class="school_single_address layout flex_row align_center">
                      <div class="title_left">层次：</div>
                      <div class="content_right">{{item.category}}</div>
                    </div>
                    <div class="school_single_address layout flex_row align_center">
                      <div class="title_left">选考要求：</div>
                      <div class="content_right">{{item.subject}}</div>
                    </div>
                    <div class="school_single_address clearfix">
                      <div class="title_left major_left">包含专业：</div>
                      <div class="content_right major_right">{{item.profession}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="no_data" v-show="schooList.length == 0">暂时没有相关数据...</div>
          </div>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :page-count="total"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
        <!-- 右侧热门专业 院校-->
        <div class="major_link_r clearfix">
          <!-- 热门专业 -->
          <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_hot_major clearfix" v-show="hotSchoolList.length>0">
            <!-- 上层标题 -->
            <div class="hot_major_top layout align_center">
              <h2 class="white_h2">热门院校</h2>
            </div>
            <!-- 下层内容 -->
            <div class="hot_major_bot clearfix">
              <div
                class="hot_school layout flex_row align_center"
                v-for="item in hotSchoolList"
                :key="item.id"
                @click="toUniversity(item.id)"
              >
                <!-- 左侧图片 -->
                <div class="hot_school_pic">
                  <img :src="item.logo" alt />
                </div>
                <div class="hot_school_info">
                  <div class="hot_school_name">{{item.name}}</div>
                  <div class="hot_school_address">所在地：{{item.city}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
import echarts from "echarts";
export default {
  data() {
    return {
      total: 0,
      id: "",
      botList: [],
      province: "",
      provinceList: [],
      city: "",
      cityList: [],
      value1: "",
      hotSchoolList: [],
      subjectName: "",
      majorName: "",
      majorId: "",
      provinceId: "",
      subjectId: "",
      schoolProvinceId: "",
      cityId: "",
      page: 1,
      schooList: [],
      cityName: "",
      year: ""
    };
  },
  methods: {
    // 专业首页
    toMajorIndex(){
      this.$router.push({path:"/Major"})
    },
    // 专业详情
    hotMajor(item) {
      this.$router.push({ path: "/HotMajor", query: { id: item.id } });
    },
    // 院校详情
    toUniversity(id) {
      this.$router.push({ path: "/UniversityIntroduc", query: { id: id } });
    },
    // 分页
    handleCurrentChange(val) {
      this.page = val;
      this.getSchoolListByMajors();
      document.getElementById("search").scrollIntoView();
    },
    // 省
    showProvince(val) {
      this.schoolProvinceId = val;
      this.page = 1 ;
      this.city = "";
      for (let obj of this.provinceList) {
          if (val == obj.id) {
            this.cityList = obj.city;
          }
        }
      this.getSchoolListByMajors();
    },
    // 市
    showCity(val) {
      this.cityId = val;
      this.page = 1 ;
      this.getSchoolListByMajors();
    },
    // 专业报考选课院校清单
    getSchoolListByMajors() {
      let url = "/api/major/getSchoolListByMajors/";
      let params = {
        majors_id: this.majorId,
        subject_id: this.subjectId,
        province_id: this.provinceId,
        school_province_id: this.schoolProvinceId,
        city_id: this.cityId,
        page: this.page
      };
      post(url, params).then(res => {
        this.schooList = res.school_list;
        // 总页数
        this.total = res.total_page;
      });
    },
    // 热门专业
    getHotList() {
      let url = "/api/major/getHotList/";
      post(url).then(res => {
        this.botList = res.hot_list;
      });
    },
    // 热门院校列表
    getHotSchoolList() {
      let url = "/api/major/getHotSchoolList/";
      post(url).then(res => {
        this.hotSchoolList = res.hot_list;
      });
    },

    // 专业报考选课院校区域筛选数据
    getSearchList() {
      let url = "/api/major/getSearchList/";
      post(url).then(res => {
        this.provinceList = res.province_list;
      });
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    this.subjectName = this.$route.query.subjectName;
    this.majorName = this.$route.query.majorName;
    this.cityName = this.$route.query.cityName;
    this.year = this.$route.query.year;
    this.majorId = this.$route.query.majors_id;
    this.provinceId = this.$route.query.province_id;
    this.subjectId = this.$route.query.subject_id;
    this.getHotList();
    this.getHotSchoolList();
    this.getSearchList();
    this.getSchoolListByMajors();
  }
};
</script>
<style scoped>
@import "../../../../style/majorDetail.css";

.left_select {
  margin-right: 120px;
}

.major_l_box {
  padding: 22px 22px 0 22px;
  background-color: #fff;
  text-align: left;
  margin-bottom: 22px;
}

.require_msg {
  font-size: 20px;
  font-weight: bold;
  color: #34485e;
  margin-bottom: 16px;
}

.require_msg div {
  float: left;
  margin-right: 56px;
}

/* 提示 */
.require_tips {
  color: #f44a5e;
  font-size: 12px;
  margin-bottom: 28px;
}

/* 下拉选框 */
.school_select {
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

/* 无数据 */
.no_data {
  font-size: 14px;
  margin: 20px 0;
}

/* 院校 */
.school_single {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.school_single_img,
.school_det_msg {
  float: left;
}

.school_single_img {
  margin-right: 20px;
}

.school_det_msg {
  width: 570px;
}

/* 图片 */
.school_single_img {
  width: 180px;
  height: 162px;
}

.school_single_img img {
  width: 100%;
  height: 100%;
}

/* 院校名称 */
.school_single_name {
  font-weight: bold;
  color: #5b5e63;
  font-size: 16px;
}
.school_single:hover .school_single_name {
  color: #409eff;
}

/* 所在地 */
.school_single_address {
  margin-top: 10px;
}

.title_left {
  width: 98px;
}
/* 包含专业 */
.major_left,
.major_right {
  float: left;
}
.major_right {
  width: 470px;
}
/* 热门院校 */
.hot_school {
  border-bottom: 1px solid #eee;
}

/* 图片 */
.hot_school_pic {
  width: 89px;
  height: 89px;
  margin: 18px 20px 27px;
}

.hot_school_pic img {
  width: 100%;
  height: 100%;
}

.hot_school_info {
  text-align: left;
}

.hot_school_name {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 16px;
  color: #5b5e63;
}
.hot_school:hover,
.hot_school:hover .hot_school_name {
  color: #409eff;
}
</style>