<!--
 * @Description: 院校合作部分
 * @Author: 空白格
 * @Date: 2022-08-17 15:11:17
 * @LastEditors: 空白格
 * @LastEditTime: 2022-12-12 13:55:45
 * @FilePath: \veterans_client_web\src\views\Home\components\InstitutionalCooperation.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="institutional-cooperation">
    <div class="institutional-cooperation-box">
      <div class="institutional-cooperation-title">院校合作</div>
      <div class="institutional-cooperation-list">
        <el-row :gutter="30" v-if="schoolList.length">
          <el-col
            :xs="24"
            :sm="12"
            :md="8"
            :lg="8"
            :xl="4"
            v-for="(item, index) in schoolList"
            :key="index"
          >
            <div
              class="institutional-cooperation-list-item"
              @click="jumpPage('/collegesdetails', { schoolId: item.id })"
            >
              <el-image :src="item.schoolLogoUrl" class="image">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <div class="name">{{ item.schoolName || "-" }}</div>
            </div>
          </el-col>
          <el-col :span="24" align="center" v-if="isLookMore">
            <!-- <el-button class="look-more" @click="jumpPage('/cooperativecolleges')"
            >查看更多</el-button
          > -->
            <el-button class="look-more" @click="lookMore">查看更多</el-button>
          </el-col>
        </el-row>
        <el-empty description="院校合作数据为空" v-else></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { getSchoolList } from "@/api/CooperativeColleges";
export default {
  name: "InstitutionalCooperation",
  data() {
    return {
      schoolList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 12,
      },
      total: 0,
      isLookMore: false,
    };
  },
  created() {
    this.getSchoolList();
  },
  methods: {
    /**
     * 获取学校列表
     * @date 2022-08-17
     * @returns {any}
     */
    getSchoolList() {
      getSchoolList(this.queryParams).then((res) => {
        if (this.queryParams.pageNum === 1) {
          this.schoolList = res?.rows ?? [];
        } else {
          this.schoolList = this.schoolList.concat(res?.rows ?? []);
        }
        this.total = Number(res?.total ?? 0);
        let curPage = this.queryParams.pageNum * this.queryParams.pageSize;
        if (curPage < this.total) {
          this.isLookMore = true;
        } else {
          this.isLookMore = false;
        }
      });
    },
    /**
     * 跳转指定页面
     * @date 2022-08-22
     * @param {any} path
     * @param {any} query
     * @returns {any}
     */
    jumpPage(path, query) {
      this.$router.push({
        path,
        query,
      });
    },
    /**
     * 查看更多
     * @date 2022-08-22
     * @returns {any}
     */
    lookMore() {
      let curPage = this.queryParams.pageNum * this.queryParams.pageSize;
      if (curPage < this.total) {
        this.queryParams.pageNum = this.queryParams.pageNum += 1;
        this.getSchoolList();
      } else {
        this.isLookMore = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.institutional-cooperation {
  background: #f4f4f4;
  &-box {
    width: 70%;
    margin: 0 auto;
    min-width: 600px;
    padding: 30px 0;
  }
  &-title {
    font-size: 26px;
    color: #163da5;
    text-align: center;
    margin-bottom: 32px;
  }
  &-list {
    &-item {
      width: 100%;
      padding: 15px 0;
      background-color: #fff;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
      border-radius: 3px;
      margin-bottom: 12px;
      text-align: center;
      cursor: pointer;
      .image {
        width: 55px;
        height: 55px;
        .image-slot {
          font-size: 28px;
        }
      }
      .name {
        color: #000;
        font-size: 14px;
        width: 90%;
        margin: 0 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
    }
  }
  .look-more {
    background: #cffaee;
    color: #68bda5;
    font-size: 16px;
    border: solid 1px #cffaee;
    font-family: SourceHanSansCN;
    margin-top: 20px;
  }
}
</style>
