<!--
 * @Description: 企业合作
 * @Author: 空白格
 * @Date: 2022-08-17 16:16:38
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-22 15:17:08
 * @FilePath: \veterans_client_web\src\views\Home\components\EnterpriseCooperation.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="companyList.length">
          <el-col
            :xs="24"
            :sm="12"
            :md="8"
            :lg="8"
            :xl="4"
            v-for="(item, index) in companyList"
            :key="index"
          >
            <div
              class="institutional-cooperation-list-item"
              @click="
                jumpPage('/enterprisedetails', {
                  companyId: item.id,
                })
              "
            >
              <el-image :src="item.logoUrl" 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.companyName || "-" }}</div>
            </div>
          </el-col>
          <el-col :span="24" align="center" v-if="isLookMore">
            <!-- <el-button
            class="look-more"
            @click="jumpPage('/cooperativeenterprise')"
            >查看更多</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 { getCompanyList } from "@/api/CooperativeEnterprise";
export default {
  name: "EnterpriseCooperation",
  data() {
    return {
      companyList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 12,
      },
      total: 0,
      isLookMore: false,
    };
  },
  created() {
    this.getCompanyList();
  },
  methods: {
    /**
     * 获取企业列表
     * @date 2022-08-17
     * @returns {any}
     */
    getCompanyList() {
      getCompanyList(this.queryParams).then((res) => {
        if (this.queryParams.pageNum === 1) {
          this.companyList = res?.data?.rows ?? [];
        } else {
          this.companyList = this.companyList.concat(res?.data?.rows ?? []);
        }
        this.total = Number(res?.data?.total);
        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.getCompanyList();
      } else {
        this.isLookMore = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.institutional-cooperation {
  background: #f7f7f7;
  &-box {
    width: 70%;
    margin: 0 auto;
    min-width: 600px;
    padding: 47px 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>
