<!--
 * @Description: 合作企业
 * @Author: 空白格
 * @Date: 2022-08-11 16:00:30
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-12 09:12:32
 * @FilePath: \veterans_client_web\src\views\CooperativeEnterprise\CooperativeEnterpriseIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main cooperative-enterprise">
    <BannerBreadcrumb title="合作企业" />
    <div class="app-main-box cooperative-enterprise-content">
      <div class="app-main-box-content cooperative-enterprise-content-list" v-loading="loading">
        <el-tabs v-model="queryParams.trade" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in companyTradeList"
            :key="index"
            :label="item.label"
            :name="item.text"
          >
            <div class="company-list">
              <el-row :gutter="16">
                <el-col
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="12"
                  :xl="12"
                  v-for="(company, cIndex) in companyList"
                  :key="cIndex"
                >
                  <div class="company-list-item">
                    <div class="company-list-item-left">
                      <el-image
                        class="image"
                        :src="
                          company.logoUrl ||
                          require('@/assets/images/default-company.png')
                        "
                      >
                        <div slot="placeholder" class="image-slot">
                          加载中<span class="dot">...</span>
                        </div>
                        <div slot="error" class="image-slot">
                          <el-image
                            class="image"
                            :src="
                              require('@/assets/images/default-company.png')
                            "
                          ></el-image>
                        </div>
                      </el-image>
                    </div>
                    <div class="company-list-item-center">
                      <div class="name">{{ company.companyName }}</div>
                      <div>
                        {{ company.scope | filtersDict(companyScopeList) }} ·
                        {{ company.trade | filtersDict(companyTradeList) }}
                      </div>
                    </div>
                    <div class="company-list-item-right">
                      <i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="pagination" v-if="total">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="queryParams.pageSize"
            :total="total"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BannerBreadcrumb from "@/components/BannerBreadcrumb";
import { getDictData } from "@/api/Dict";
import { getCompanyList } from "@/api/CooperativeEnterprise";
export default {
  name: "CooperativeEnterpriseIndex",
  components: {
    BannerBreadcrumb,
  },
  data() {
    return {
      companyTradeList: [],
      companyScopeList: [],
      queryParams: {
        trade: "0",
        pageNum: 1,
        pageSize: 10,
        companyName: undefined,
      },
      companyList: [],
      total: 0,
      loading: false,
    };
  },
  created() {
    this.getDict();
    this.getList();
  },
  methods: {
    /**
     * 获取字典数据
     * @date 2022-08-11
     * @returns {any}
     */
    getDict() {
      getDictData({ key: "company_trade" }).then((res) => {
        this.companyTradeList = res.data;
        this.companyTradeList.unshift({ label: "全部", text: "0" });
      });
      getDictData({ key: "company_scope" }).then((res) => {
        this.companyScopeList = res.data;
      });
    },
    /**
     * tab切换触发
     * @date 2022-08-11
     * @param {any} tab
     * @returns {any}
     */
    handleClick(tab) {
      this.queryParams.trade = tab.name;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**
     * 获取企业列表
     * @date 2022-08-11
     * @returns {any}
     */
    getList() {
      this.loading = true;
      const queryParams = {
        ...this.queryParams,
      };
      queryParams.trade = queryParams.trade === "0" ? "" : queryParams.trade;
      getCompanyList(queryParams).then((res) => {
        this.companyList = res.data.rows;
        this.total = Number(res.data.total);
        this.loading = false;
      });
    },
    /**
     * 分页切换触发
     * @date 2022-08-11
     * @param {any} page
     * @returns {any}
     */
    currentChange(page) {
      this.queryParams.pageNum = page;
      this.getList();
    },
  },
  filters: {
    filtersDict(val, list) {
      let label = "-";
      list.forEach((element) => {
        if (Number(element.text) === Number(val)) {
          label = element.label;
        }
      });
      return label;
    },
  },
};
</script>

<style lang="scss" scoped>
.cooperative-enterprise {
  &-content {
    &-list {
      padding-bottom: 100px;
      :deep(.el-tabs__item) {
        font-size: 20px;
        font-weight: 500;
        color: #000000;
      }
      :deep(.el-tabs__item:hover) {
        color: #163da5;
      }
      :deep(.el-tabs__item.is-active) {
        color: #163da5;
      }
      :deep(.el-tabs__active-bar) {
        background-color: #163da5;
      }
      .company-list {
        padding: 5px;
        &-item {
          display: flex;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          padding: 16px;
          margin-bottom: 20px;
          cursor: pointer;
          &-left {
            width: 61px;
            height: 61px;
            margin-right: 15px;
            border: solid 1px #e2e2e2;
            border-radius: 4px;
            .image {
              width: 100%;
              height: 100%;
              border-radius: 4px;
            }
          }
          &-center {
            width: calc(100% - 95px);
            color: #919191;
            font-size: 14px;
            font-family: SourceHanSansCN;
            .name {
              color: #1a1a1a;
              font-size: 20px;
              font-family: SourceHanSansCN;
              margin-bottom: 5px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
            }
          }
          &-right {
            display: flex;
            align-items: center;
            color: #9c9c9c;
            font-size: 18px;
          }
        }
      }
      .pagination {
        text-align: center;
        :deep(.el-pager .active) {
          background-color: #ff3939;
        }
        :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
          background-color: #ff3939;
        }
      }
    }
  }
}
</style>
