<template>
  <div id="detail">
    <detail-layout>
      <template #title>
        <back-bar to="/jobs/school/index" title="学生生源"></back-bar>
      </template>
      <template #main>
        <el-row class="main">
          <el-col :span="24" class="mainName">
            <el-col :span="2">
              <el-image style="width: 80px; height: 80px" :src="url"></el-image>
            </el-col>
            <el-col :span="20" class="mainNameTit">
              <h3>湖南大学</h3>
              <el-col :span="24" class="mainNameTitTag">
                <el-tag type="info">一本</el-tag>
                <el-tag type="info">211</el-tag>
                <el-tag type="info">985</el-tag>
              </el-col>
              <el-col :span="24" class="mainNameTitSpan">
                <span>学院26所</span>
                <span>专业134个</span>
                <span>生源12034人</span>
              </el-col>
            </el-col>
            <el-col :span="2" class="mainNameBtn"><el-button type="success" @click="join(`id`)">入驻</el-button></el-col>
          </el-col>
          <el-col :span="24" class="mainTit">
            <el-col :span="24" class="mainTitTop">
              <el-col :span="12">
                <strong>所在省市:</strong>
                湖南 长沙
              </el-col>
              <el-col :span="12">
                <strong>部门:</strong>
                招生与就业指导处
              </el-col>
              <el-col :span="12">
                <strong>地址:</strong>
                招生与就业指导处
              </el-col>
              <el-col :span="12">
                <strong>电话:</strong>
                0731-88822737 88822317
              </el-col>
              <el-col :span="12">
                <strong>邮箱:</strong>
                scc@hnu.edu.cn
              </el-col>
            </el-col>
            <el-col :span="24" class="mainTitTxt">
              <p>
                湖南大学（Hunan University）坐落坐落在<a target="_blank" href="" class="words">中国历史文化名城</a
                >——湖南省长沙市，历史悠久、声誉斐然，是直属教育部的“<a target="_blank" href="" class="words">211工程</a>”、“<a
                  target="_blank"
                  href=""
                  class="words"
                  >985工程</a
                >”的高校<span class="num__label">[1]</span
                ><a class="words_label" name="ref_[1]_5646"></a>&nbsp;&nbsp;。2014年8月，湖南大学入选2014年度“2011计划”及国家“2011计划”核心协同高校。<span
                  class="num__label"
                  >[2-3]</span
                ><a class="words_label" name="ref_[2-3]_5646"></a>&nbsp;
              </p>
              <p>
                湖南大学享有“千年学府，百年名校<span style="font-weight: 700;">”</span>之美誉。起源于中国古代<a target="_blank" href="" class="words"
                  >四大书院</a
                >之一的<a target="_blank" href="" class="words">岳麓书院</a
                >，1903年书院改制为湖南高等学堂，1926年正式定名湖南大学。中华人民共和国成立后，中央人民政府任命<a target="_blank" href="" class="words">李达</a
                >为湖南大学校长，<a target="_blank" href="" class="words">毛泽东</a>主席亲笔题写校名。1953年全国院系调整，湖南大学先后更名为中南土木建筑学院和<a
                  target="_blank"
                  href=""
                  class="words"
                  >湖南工学院</a
                >，1959年恢复湖南大学原称。1963年起隶属国家机械工业部，1978年列为全国重点大学，1998年调整为教育部直属高校。2000年，湖南大学与原隶属<a
                  target="_blank"
                  href=""
                  class="words"
                  >中国人民银行</a
                >的<a target="_blank" href="" class="words">湖南财经学院</a>合并组建成新的湖南大学，仍然直属教育部。<span class="num__label">[4]</span
                ><a class="words_label" name="ref_[4]_5646"></a>&nbsp;
              </p>
              <p>
                根据<a target="_blank" href="" class="words">荷兰莱顿大学</a><a target="_blank" href="" class="words">CTWS</a>发布全球500家大学排行，湖大排在 55
                位，居中国高校第2名。<span class="num__label">[5-6]</span><a class="words_label" name="ref_[5-6]_5646"></a>&nbsp;&nbsp;据《<a
                  target="_blank"
                  href=""
                  class="words"
                  >泰晤士报</a
                >高等教育》最新公布，湖南大学位列亚洲大学排行榜第81名（位居国内第16名），同时湖南大学进入泰晤士报世界大学排名前500位（国内共20所大学）<span
                  class="num__label"
                  >[7]</span
                ><a class="words_label" name="ref_[7]_5646"></a>&nbsp;&nbsp;。<span class="num__label">[8]</span
                ><a class="words_label" name="ref_[8]_5646"></a>&nbsp;
              </p>
              <p>
                新中国成立以来，湖大的建设和发展得到了党和国家领导人的亲切关怀和充分肯定，
                <a target="_blank" href="" class="words">刘少奇</a>、 <a target="_blank" href="" class="words">华国锋 </a>、
                <a target="_blank" href="" class="words">胡耀邦</a>、 <a target="_blank" href="" class="words">江泽民</a>、
                <a target="_blank" href="" class="words"> 胡锦涛 </a>、 <a target="_blank" href="" class="words">李鹏</a>、
                <a target="_blank" href="" class="words">朱镕基</a>、 <a target="_blank" href="" class="words">温家宝</a>、<a
                  target="_blank"
                  href=""
                  class="words"
                  >李克强</a
                ><span class="num__label">[9]</span>
                <a class="words_label" name="ref_[9]_5646"></a>&nbsp;&nbsp;等领导同志先后来到学校视察，留下了“湘楚人才的摇篮”、“
                <a target="_blank" href="" class="words">惟楚有才</a>，今斯更盛”、“千年学府，百年名校”等赞誉。<span class="num__label">[6]</span>
                <a class="words_label" name="ref_[6]_5646"></a>&nbsp;
              </p>
            </el-col>
            <el-col :span="24" class="mainBtn">
              <el-tabs type="border-card">
                <el-tab-pane label="专业生源">
                  <el-col :span="24" class="mainBtnMaj">
                    <el-col :span="24" class="mainBtnMajTit">
                      <p>中国语言文学学院</p>
                    </el-col>
                    <el-col :span="24" class="mainBtnMajTxt">
                      <ul>
                        <li v-for="(tag, index) in tags" :key="index" :type="tag.type">
                          <el-col :span="22" class="major">
                            <span class="text-mark">{{ tag.major }}</span>
                            {{ tag.school }}
                          </el-col>
                          <el-col :span="2" class="number">{{ tag.num }}</el-col>
                        </li>
                      </ul>
                    </el-col>
                  </el-col>
                  <el-col :span="24" class="mainBtnMaj">
                    <el-col :span="24" class="mainBtnMajTit">
                      <p>法学院</p>
                    </el-col>
                    <el-col :span="24" class="mainBtnMajTxt">
                      <ul>
                        <li v-for="(tag, index) in tags1" :key="index" :type="tag.type">
                          <el-col :span="22" class="major">
                            <span class="text-mark">{{ tag.major }}</span>
                            {{ tag.school }}
                          </el-col>
                          <el-col :span="2" class="number">{{ tag.num }}</el-col>
                        </li>
                      </ul>
                    </el-col>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="特色专业">
                  <el-col :span="24" class="mainBtnCha">
                    <el-col :span="24" class="mainBtnChaTit">
                      <h2>专业特点</h2>
                      <el-col :span="24" style="margin:10px 0;">
                        <h3>土木工程</h3>
                        <p>
                          <span style="color: rgb(0, 0, 0);">
                            学科的发展历史十分悠久，迄今已经有百余年的历史，可追溯到清朝光绪二十九年
                            (1903年)，是国家一级重点学科和国家级特色专业。湖南大学的土木学科全国闻名，尤其在交
                            通土木建筑方面，与清华、同济、西南交大等学校分庭抗礼，雄踞一方。其下属学科“结构工
                            程”曾在2002年被评为国家一级重点学科，其桥梁工程和供热、供燃气、通风及空调工程等也被评为
                            湖南省重点学科。由学科带头人湖南大学土木工程学院院长肖岩教授发起的“中美结构工程合作研
                            讨会”，得到了中美两国的共同资助，使学院在国际化发展道路上又前进了一大步!
                          </span>
                        </p>
                      </el-col>
                      <el-col :span="24" style="margin:10px 0;">
                        <h3>化学工程</h3>
                        <p>
                          <span style="color: rgb(0, 0, 0);">
                            化学化工也是湖南大学十分具有优势的学科，在2002年教育部学科排名中，湖南大学的化学学科排名14位，2003年，化学学院的化工科排名第11位，其中“分析化学”还是国家级重点学科，学科实力十分雄厚，已形成了理工结合，化学生物、材料学科交叉，化学化工理工融合，传统学科与前沿学科交互渗透的良好局面。现设有化学、化学工程与工艺、应用化学、生物技术4个本科专业，而且化学专业还是国家第三批特色专业。
                          </span>
                        </p>
                      </el-col>
                      <el-col :span="24" style="margin:10px 0;">
                        <h3>车辆工程</h3>
                        <p>
                          <span style="color: rgb(0, 0, 0);">
                            车辆工程是国家级特色学科，车辆工程学科还是国家立项的“211工程”、“985工程”重点建设学科、湖南省重点学科。该专业在汽车设计与制造工程领域具有鲜明的特色，在汽车碰撞仿真及安全性设计技术、汽车车身现代设计技术等方面具有国内领先水平。在学生培养方式方面，学校还根据现代机械工业的发展趋势，制定了“机械自动控制信息技术”的复合人才培养模式。
                          </span>
                        </p>
                      </el-col>
                    </el-col>
                    <el-col :span="24" class="mainBtnChaTit">
                      <h2>全国专业排名</h2>
                      <h3 style="font-size:14px;color:#333;">
                        由教育部学位与研究生教育发展中心组织的全国一级学科评估结果公布<sup style="color:blue;">[23]</sup>。
                      </h3>
                      <el-col :span="24">
                        <el-col :span="4">
                          <el-table :data="tableData" style="width: 100%;">
                            <el-table-column prop="name" label="学科名称" width="100"> </el-table-column>
                            <el-table-column prop="num" label="排名" width="50"> </el-table-column>
                          </el-table>
                        </el-col>
                        <el-col :span="4">
                          <el-table :data="tableData1" style="width: 100%">
                            <el-table-column prop="name" label="学科名称" width="100"> </el-table-column>
                            <el-table-column prop="num" label="排名" width="50"> </el-table-column>
                          </el-table>
                        </el-col>
                      </el-col>
                    </el-col>
                  </el-col>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-col>
        </el-row>
      </template>
    </detail-layout>
  </div>
</template>

<script>
import backBar from '@/components/back-bar.vue';
import detailLayout from '@/layout/detail-layout.vue';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'detail',
  props: {},
  components: {
    backBar,
    detailLayout,
  },
  data: () => ({
    url: require('@/assets/schoolLogo3.png'),
    tags: [
      { major: '硕士研究生', school: '中国语言文学', num: '81人' },
      { major: '硕士研究生', school: '中国语言文学', num: '81人' },
      { major: '硕士研究生', school: '中国语言文学', num: '81人' },
      { major: '硕士研究生', school: '中国语言文学', num: '81人' },
    ],
    tags1: [
      { major: '硕士研究生', school: '法学', num: '81人' },
      { major: '硕士研究生', school: '法学', num: '81人' },
      { major: '硕士研究生', school: '法学', num: '81人' },
      { major: '硕士研究生', school: '法学', num: '81人' },
    ],
    tableData: [
      {
        name: '土木工程',
        num: '12',
      },
      {
        name: '土木工程',
        num: '12',
      },
      {
        name: '土木工程',
        num: '12',
      },
      {
        name: '土木工程',
        num: '12',
      },
    ],
    tableData1: [
      {
        name: '土木工程',
        num: '12',
      },
      {
        name: '土木工程',
        num: '12',
      },
      {
        name: '土木工程',
        num: '12',
      },
      {
        name: '土木工程',
        num: '12',
      },
    ],
  }),
  created() {},
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['corpSchInfo', 'joinSch']),
    async join(id) {
      let result = await this.joinSch({ schid: id, corpid: this.user.corpid });
      if (`${result.errcode}` === '0') {
        this.$message.success('申请成功,请等待校方审核');
      } else {
        this.$message.error('申请失败,请重新尝试');
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tabs__content {
  padding: 0;
}
.mainBtnMajTit {
  border-bottom: 1px solid #cccccc;
}
.mainBtnMajTit p {
  font-size: 14px;
  color: #333333;
  padding: 10px 0px;
  display: inline-block;
  border-bottom: 2px solid forestgreen;
}
.mainBtnMajTxt {
  padding: 0 30px;
}
.mainBtnMajTxt ul li {
  border-bottom: 1px dashed #ddd;
  overflow: hidden;
  text-align: right;
  padding: 5px 0;
}
.mainBtnMajTxt ul li .el-col {
  height: 30px;
  line-height: 30px;
}
.major {
  text-align: left;
  font-size: 14px;
  color: #333;
}
.number {
  font-size: 14px;
  text-align: center;
  color: #999;
}

.mainBtnChaTit h2 {
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: rgb(30, 155, 232);
  font-size: 16px;
  line-height: 32px;
  color: rgb(102, 102, 102);
  padding: 5px 10px;
  margin: 30px 0px;
  font-weight: 500;
}
.mainBtnChaTit h3 {
  font-size: 16px;
  color: #000;
  font-weight: 500;
}
.mainBtnChaTit p {
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: rgb(51, 51, 51);
  line-height: 21px;
  text-align: justify;
  white-space: normal;
  text-indent: 30px;
}
/deep/.el-table th {
  padding: 0;
}
/deep/.el-table td {
  padding: 0;
}
/deep/.el-tabs--border-card {
  border: none;
  box-shadow: none;
  -webkit-box-shadow: none;
}
/deep/.el-tabs--border-card > .el-tabs__header {
  border-bottom: none;
  border: 1px solid #e4e7ed;
}
p {
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
.main {
  background-color: #fff;
  border: none;
  padding: 30px 0;
}
.mainName {
  height: 90px;
  border-bottom: 1px solid #ccc;
}
.mainNameTit {
  padding: 0 10px;
}
.mainNameTit h3 {
  font-size: 16px;
  display: inline-block;
  height: 16px;
  line-height: 16px;
  color: #333;
  font-weight: 500;
}
.mainNameTitTag {
  height: 40px;
  padding: 8px 0;
}
.mainNameTitTag .el-tag {
  color: #fff;
  height: 24px;
  line-height: 24px;
  background: #ccc;
  margin: 0 5px 0 0;
}
.mainNameTitSpan {
  height: 22px;
  line-height: 22px;
}
.mainNameTitSpan span {
  font-size: 14px;
  color: #999;
  margin: 0 10px 0 0;
}
.mainNameBtn {
  height: 90px;
  line-height: 90px;
}
.mainTitTop {
  padding: 10px 0;
}
.mainTitTop .el-col {
  height: 30px;
  line-height: 30px;
  color: #333;
  font-size: 14px;
}
.mainTitTxt {
  font-size: 14px;
  color: #333333;
  margin: 0 0 10px 0;
}
.mainTitTxt p {
  padding: 10px 0;
}
.words {
  color: rgb(19, 110, 194);
  text-decoration: none;
}
.num__label {
  position: relative;
  top: -0.5em;
  line-height: 0;
  font-size: 12px;
  vertical-align: baseline;
  cursor: pointer;
  margin-left: 2px;
  color: rgb(51, 102, 204);
  padding: 0px 2px;
}
.words_label {
  color: rgb(19, 110, 194);
  position: relative;
  top: -50px;
  font-size: 0px;
  line-height: 0;
}
</style>
