<template>
  <!-- “双一流”建设学科名单 -->
  <div class="key_discipline">
    <div class="discipline_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 class="last_brand">“双一流”建设学科名单</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 图片 -->
      <div class="discipline_img double_img">
        <h1>“双一流”建设学科名单</h1>
      </div>
      <!-- 内容 -->
      <div class="discipline_content clearfix">
        <!-- 项目简介 -->
        <div class="double_intro">
          <div class="project_profile flex_diection align_left layout">
            <h2>项目简介</h2>
          </div>
          <!-- 简介 -->
          <div class="project_intro">
            <div class="project_msg double_msg">{{msg}}</div>
            <!-- 注释 -->
            <div
              class="project_tips"
              :class="{tips_indent:index != 0}"
              v-for="(item,index) in tips "
              :key="index"
            >{{item}}</div>
            <!-- 地区 -->
            <div class="select_area layout flex_row align_left">
              <div class="select_label">地区：</div>
              <el-select v-model="value" placeholder="请选择" @change="showCity" filterable>
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <!--  -->
        </div>
        <!-- 筛选结果 -->
        <div class="screen_results clearfix">
          <div class="result_title">筛选结果</div>
          <!-- 地区学校 -->
          <div class="clearfix double_school_name">
            <div v-for="item in schoolList" :key="item.id">
              <div
                class="double_single_school"
                v-show="secondItem.city_id == isChange"
                v-for="secondItem in item.school"
                :class="{double_single_choiced:isChoicedSchool == secondItem.id}"
                :key="secondItem.id"
                @click="areaSchool(secondItem)"
              >{{secondItem.school_name}}</div>
            </div>
          </div>
          <!-- 学校学科名单 -->
          <div class="school_subject">
            <div class="list_title">{{schoolName}}——“双一流”建设学科名单</div>
            <div class="name_list clearfix">
              <ul class="list_l">
                <li v-show="index%2 == 0" v-for="(item,index) in nameList" :key="index">{{item}}</li>
              </ul>
              <ul class="list_r">
                <li v-show="index%2 == 1" v-for="(item,index) in nameList" :key="index">{{item}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  data() {
    return {
      isMore: true,
      msg:
        "根据国务院《统筹推进世界一流大学和一流学科建设总体方案》以及教育部等三部委《统筹推进世界一流大学和一流学科建设实施办法（暂行）》，经专家委员会遴选认定，教育部、财政 部、国家发展改革委研究并报国务院批准，公布了世界一流大学和一流学科（简称“双一流”）建设高校及建设学科名单。以下为“双一流”建设学科名单：",
      //   注释
      tips: [
        "注：1.不加（自定）标示的学科，是根据“双一流”建设专家委员会确定的标准而认定的学科；",
        "2.加（自定）标示的学科，是根据“双一流”建设专家委员会建议由高校自主确定的学科；",
        "3.高校建设方案中的自主建设学科按照专家委员会的咨询建议修改后由高校自行公布。"
      ],
      options: [],
      value: "北京市",
      schoolList: [],
      isChange: 1,
      nameList: [],
      schoolName:"北京大学",
      isChoicedSchool:""
    };
  },
  methods: {
    // 专业首页
    toMajorIndex(){
      this.$router.push({path:"/Major"})
    },
    // 选择的城市
    showCity(value) {
      console.log(value)
      this.isChange = value;
      for(let obj of this.schoolList){
        if(this.isChange == obj.id){
          this.isChoicedSchool = obj.school[0].id;
          this.schoolName = obj.school[0].school_name;
          this.nameList = obj.school[0].mingdan;
        }
      }
    },
    // 地区学校
    areaSchool(item) {
      this.isChoicedSchool = item.id;
      this.nameList = item.mingdan;
      this.schoolName = item.school_name;
    },
    //   双一流建设学科名单
    getShuang() {
      let url = "/api/major/getShuang/";
      post(url).then(res => {
        let arr = [];
        for (let obj of res) {
          let o = {};
          o["id"] = obj.id;
          o["name"] = obj.name;
          arr.push(o);
        }
        this.options = arr;
        this.schoolList = res;
        this.nameList = res[0].school[0].mingdan;
        this.isChoicedSchool = res[0].school[0].id;
      });
    }
  },
  mounted() {
    this.getShuang();
  }
};
</script>
<style>
/*  */
.el-select-dropdown__item:nth-child(1){
  background-color: #F5F7FA;
}
</style>
<style scoped>
@import "../../../../style/discipline.css";
/* 简介 */
.double_intro {
  margin-bottom: 30px;
}
.double_msg {
  margin-bottom: 18px;
}
/* 注释 */
.project_tips {
  color: #409eff;
  text-align: left;
  font-size: 14px;
  margin-bottom: 10px;
}
.tips_indent {
  text-indent: 2em;
}
/* 地区选择 */
.select_area {
  margin-top: 32px;
  line-height:30px;
}
.select_label {
  font-size: 16px;
  color: #8c9198;
}
/* 筛选结果 */
.result_title {
  font-weight: bold;
  color: #34485e;
  font-size: 16px;
  text-align: left;
}
/* 学校名称 */
.double_school_name {
  padding: 10px 20px;
  border: 1px solid #eee;
  margin-top: 20px;
  border-radius: 3px;
}
.double_single_school {
  float: left;
  font-size: 14px;
  color: #8c9198;
  padding: 6px 20px;
}
.double_single_school:hover {
  background-color: #409eff;
  color: #fff;
  border-radius: 3px;
}
.double_single_choiced{
  background-color: #409eff;
  color: #fff;
  border-radius: 3px;
}
/* 学校学科名单 */
.school_subject {
  margin-top: 30px;
  border: 1px solid #eee;
  border-radius: 3px;
}
/* 名单标题 */
.list_title {
  line-height: 87px;
  font-weight: bold;
  font-size: 20px;
  color: #34485e;
}
/* 名单 */
.name_list {
  width: 723px;
  margin: 0 auto;
  border: 1px solid #eee;
  margin-bottom: 30px;
}
.list_l{
  width:50%;
  border-right:1px solid #eee;
  float: left;
}
.list_l li,
.list_r li{
  font-size:14px;
  color:#34485E;
  line-height: 19px;
  margin:14px 0;
}
.list_r{
  float: right;
  width:49%;
}
</style>