<!--系统使用说明-->
<template>
    <el-row :gutter="20">
        <el-col :span="24">
            <div class="hot_school" v-if="state.hotSchoolList && state.hotSchoolList.length > 0">
                <div class="l_title clearfix">
                    <div class="left_title">热门院校</div>
                    <div class="right_tab clearfix">
                        <div class="hot_school_tab am_l set_hoverl" :class="{ 'active': 1 == state.hotTabActive }"
                            @click="switchHotTab(1)">河南本科院校
                        </div>
                        <div class="hot_school_tab am_l set_hoverl" :class="{ 'active': 2 == state.hotTabActive }"
                            @click="switchHotTab(2)">河南专科院校
                        </div>
                        <div class="hot_school_tab am_l set_hoverl" :class="{ 'active': 3 == state.hotTabActive }"
                            @click="switchHotTab(3)">省外本科院校
                        </div>
                        <div class="hot_school_tab am_l set_hoverl" :class="{ 'active': 4 == state.hotTabActive }"
                            @click="switchHotTab(4)">省外专科院校
                        </div>
                    </div>
                </div>
                <div class="hot_school_box clearfix">
                    <div class="left" style="background: rgb(255, 141, 66);">
                        <a :href="'/school/' + state.hotSchoolList[0].schoolCode" target="_blank">
                            <h3>{{ state.hotSchoolList[0].schoolName }}</h3>
                            <p class="tag">
                                <span v-for="item in state.hotSchoolList[0].tagsList">{{ item }}</span>
                            </p>
                            <div class="tuijian" v-if="state.hotSchoolList[0].schoolIcon">
                                <div class="school_tuijian">
                                    <div class="school_img"><img :src="state.hotSchoolList[0].schoolIcon" alt=""></div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="right">
                        <div v-for="(item, index) in state.hotSchoolList">
                            <div class="school_item" data-growing-container="" v-if="index > 0">
                                <a :href="'/school/' + item.schoolCode" target="_blank">
                                    <img :src="item.schoolIcon" alt="">
                                    <div class="school_msg">
                                        <h3>{{ item.schoolName }}</h3>
                                        <div class="clearfix check_btn">
                                            <span class="school_class">{{ item.institutionType + '类' }}</span>
                                            <span>查看院校<i></i></span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import ApiConstant from "@/utils/ApiConstant";
import axiosInstance from '@/utils/http'
//主数据对象
const state = reactive({
    hotSchoolList: [] as any,
    hotTabActive: 1,
})
const hotSchoolList = reactive({
    nowProvinceBenSchoolList: [],//本省，本科
    nowProvinceZhuanSchoolList: [],//本省，专科
    otherProvinceBenSchoolList: [],//外省，本科
    otherProvinceZhuanSchoolList: []//外省，专科
})

getHotSchoolList()

//获取热门院校
function getHotSchoolList() {
    axiosInstance({
        url: ApiConstant.School.hotSchoolList,
        method: 'get',
        params: {},
        showLoading: false,//是否显示加载图标
    }).then((response) => {
        return response.data
    }).then((data) => {
        //console.log(data)
        //有数据情况下
        hotSchoolList.nowProvinceBenSchoolList = data.result.nowProvinceBenSchoolList
        hotSchoolList.nowProvinceZhuanSchoolList = data.result.nowProvinceZhuanSchoolList
        hotSchoolList.otherProvinceBenSchoolList = data.result.otherProvinceBenSchoolList
        hotSchoolList.otherProvinceZhuanSchoolList = data.result.otherProvinceZhuanSchoolList
        if (state.hotTabActive == 1) {
            state.hotSchoolList = hotSchoolList.nowProvinceBenSchoolList
        }
    }).catch((error: any) => {
        console.log(error);
    }).finally(() => {
    });
}


//切换 热门学院
function switchHotTab(index: number) {
    state.hotTabActive = index
    //切换数据
    if (index == 1) {
        state.hotSchoolList = hotSchoolList.nowProvinceBenSchoolList
    } else if (index == 2) {
        state.hotSchoolList = hotSchoolList.nowProvinceZhuanSchoolList
    } else if (index == 3) {
        state.hotSchoolList = hotSchoolList.otherProvinceBenSchoolList
    } else if (index == 4) {
        state.hotSchoolList = hotSchoolList.otherProvinceZhuanSchoolList
    }
}
</script>
<style scoped lang="scss">
//热门院校
.hot_school {
  margin-bottom: 40px;
  /*padding: 0 20px;*/
  .l_title {
    height: 44px;
    line-height: 44px;
    border-bottom: 2px solid var(--el-color-primary);
    width: 100%;

    .left_title {
      font-size: 20px;
      color: #000;
      position: relative;
      padding-left: 12px;
      width: 330px;
      float: left;
      font-weight: 700;

      .right_tab {
        margin-left: 10px;
        float: left;
        width: 820px;
      }
    }

    .right_tab .hot_school_tab.active {
      color: var(--el-color-primary);
    }


    .right_tab .hot_school_tab {
      float: left;
      font-size: 18px;
      color: #000;
      margin-right: 32px;
      cursor: pointer;
      font-weight: 700;
    }

    .right_tab .hot_school_tab:hover {
      color: var(--el-color-primary);
    }

    .am_l {
      transition: all .4s;
    }

    .change_group {
      float: right;
      color: #f60;
      font-size: 14px;
      text-align: right;
      cursor: pointer;
      width: 68px;
      height: 44px;
      position: relative;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }

  .hot_school_box {
    .left {
      float: left;
      width: 330px;
      height: 332px;
      background: #ffeaea;
      text-align: center;
      padding-top: 28px;
      cursor: pointer;

      h3 {
        font-size: 24px;
        color: #fff;
        margin-bottom: 20px;
        overflow: hidden;
        /*text-overflow: ellipsis;*/
        white-space: nowrap;
        transition: all .4s;
        padding: 0 10px;
        font-weight: 700;
      }

      .tag {
        margin-bottom: 54px;

        span {
          display: inline-block;
          padding: 4px 5px;
          margin-right: 10px;
          border-radius: 4px;
          border: 1px solid hsla(0, 0%, 100%, .4);
          color: #fff;
        }

        span:last-child {
          margin: 0;
        }
      }

      .tuijian {
        width: 195px;
        height: 159px;
        position: relative;
        margin: 0 auto;

        .school_tuijian {
          width: 170px;
          height: 187px;
          background: #fff;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
        }
      }

      .school_img {
        height: 100%;
        position: relative;

        img {
          width: 128px;
          height: 128px;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
        }
      }
    }

    .right {
      float: right;
      width: 820px;
      height: 350px;
      margin: 10px 0 0 10px;

      .school_item:hover {
        top: -2px;
        box-shadow: 0 10px 20px rgb(0 0 0 / 10%);
      }

      .school_item:hover .school_msg h3 {
        color: var(--el-color-primary);
      }

      .school_item {
        cursor: pointer;
        float: left;
        height: 110px;
        width: 263px;
        overflow: hidden;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
        transition: all .2s linear;
        top: 0;
        box-shadow: 0 0 15px #e6e6e6;
        background-color: white;

        img {
          width: 65px;
          height: 65px;
          position: absolute;
          left: 15px;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          border: 0;
          vertical-align: top;
        }

        .school_msg {
          margin-left: 100px;
          margin-top: 21px;
          padding-right: 16px;

          h3 {
            color: #000;
            font-size: 16px;
            margin-bottom: 23px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: all .4s;
            font-weight: 700;
          }

          .check_btn {
            .school_class {
              display: inline-block;
              padding: 0 6px;
              border: 1px solid #eee;
            }

            span {
              float: left;
              font-size: 12px;
              color: #999;
            }

            span + span {
              margin-right: 12px;
              float: right;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            span + span i {
              display: inline-block;
              width: 5px;
              height: 9px;
              background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAYAAABit09LAAAAoklEQVQoU43SsQ0CMQwFUPsaZqOlp4wLdDRQMAUVXBEzABWiSwkbMEX2+OgiOOlIHOL6+cuyPlPj8OhU9UpEDxG5WHsJeu9vRLTquq53zg0lnGAIYRFjvANYWjjBFjzBf3gGaziDFi7CAl6b8PPfAcCGiA4mVNUTgJ6ZzyKyLcJfNKZnsIQyaKEZrKEJquoRwO57uFkK7/2LmZ8isq/WrKW7b6OXhYE4bznBAAAAAElFTkSuQmCC);
              background-size: cover;
              margin: 0 0 0 5px;
            }
          }
        }
      }
    }
  }
}
</style>