<!--
 * @Description: 企业详情
 * @Author: 空白格
 * @Date: 2022-08-15 14:54:50
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-25 16:26:15
 * @FilePath: \veterans_client_web\src\views\CooperativeEnterprise\EnterpriseDetails\EnterpriseDetailsIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main enterprise-details" v-loading="loading">
    <div class="enterprise-details-header">
      <div class="enterprise-details-header-box app-main-box">
        <div class="edhb-left">
          <div class="edhb-left-logo">
            <el-avatar
              shape="square"
              :size="73"
              :src="details.logoUrl"
              @error="errorHandler"
            >
              <el-avatar
                shape="square"
                :size="73"
                :src="require('@/assets/images/default-company.png')"
              ></el-avatar>
            </el-avatar>
          </div>
          <div class="edhb-left-info">
            <div class="edhb-left-info-name">
              {{ details.nickName || "-" }}
            </div>
          </div>
        </div>
        <div class="edhb-right">
          <div class="edhb-right-item">{{ details.companyName || "-" }}</div>
          <div class="edhb-right-item">{{ details.scope | filtersDict(companyScopeList) }}</div>
          <div class="edhb-right-item">{{ details.linkPhone || "-" }}</div>
          <div class="edhb-right-item position">
            {{ details.companyAddress || "-" }}
          </div>
        </div>
      </div>
    </div>
    <div class="app-main-box enterprise-details-main">
      <!-- 热招职位 -->
      <!-- <div class="enterprise-details-main-hot">
        <div class="edmh-header">
          <h4>热招职位</h4>
          <div class="edmh-header-view">查看全部职位></div>
        </div>
        <div class="edmh-list">
          <el-row :gutter="26" v-if="hotPositionList.length">
            <el-col
              :xs="24"
              :sm="24"
              :md="8"
              :lg="8"
              :xl="8"
              v-for="(item, index) in hotPositionList"
              :key="index"
            >
              <div class="edmh-list-item">
                <div class="edmh-list-item-left">
                  <div class="elil-item">{{ item.postName }}</div>
                  <div class="elil-item">
                    {{ item.areaName || "-" }} | 工作{{
                      item.workYear || "-"
                    }}年 |
                    {{ item.educationBg || "-" }}
                  </div>
                  <div class="elil-item">{{ item.companyName || "-" }}</div>
                </div>
                <div class="edmh-list-item-right">
                  <div class="elir-item">
                    {{ item.lowestSalary || "-" }}K-{{
                      item.highestSalary || "-"
                    }}K
                  </div>
                  <div class="elir-item">
                    {{ parseTime(item.createTime, "{y}-{m}-{d}") }}
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-empty v-else :image-size="80" description="无热招职位数据"></el-empty>
        </div>
      </div> -->
      <!-- 公司信息 -->
      <div class="app-main-box-content enterprise-details-main-info">
        <!-- 公司介绍 -->
        <div class="edmi-introduce">
          <h4>公司介绍</h4>
          <div class="edmi-introduce-content">
            {{ details.detatil || "-" }}
          </div>
        </div>
        <!-- 公司相册 -->
        <div class="edmi-album">
          <h4>公司相册</h4>
          <div
            class="edmi-album-list"
            v-if="
              details.environmentUrlList && details.environmentUrlList.length
            "
          >
            <el-carousel
              height="178px"
              :autoplay="false"
              arrow="never"
              indicator-position="none"
            >
              <el-carousel-item
                v-for="(item, Cindex) in details.environmentUrlList"
                :key="Cindex"
              >
                <el-row :gutter="18">
                  <el-col
                    :xs="24"
                    :sm="12"
                    :md="12"
                    :lg="6"
                    :xl="6"
                    v-for="(img, index) in item"
                    :key="index"
                  >
                    <el-image
                      :src="img"
                      class="image"
                      fit="contain"
                      :preview-src-list="item"
                    >
                      <div slot="placeholder" class="image-slot">
                        加载图片中<span class="dot">...</span>
                      </div>
                    </el-image>
                  </el-col>
                </el-row>
              </el-carousel-item>
            </el-carousel>
          </div>
          <el-empty v-else :image-size="80" description="无公司相册数据"></el-empty>
        </div>
        <!-- 公司职位 -->
        <div class="edmi-position">
          <h4>公司职位</h4>
          <div
            class="edmi-position-list"
            v-loading="positionObj.loading"
            v-if="positionObj.list.length"
          >
            <el-row :gutter="12">
              <el-col
                :xs="24"
                :sm="24"
                :md="24"
                :lg="12"
                :xl="12"
                v-for="(item, index) in positionObj.list"
                :key="index"
              >
                <div class="edmi-position-list-item" @click="jumpPage('enterprisePosition',{ positionId: item.id })">
                  <div class="logo">
                    <el-image
                      class="image"
                      :src="
                        item.companyLogoUrl ||
                        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="postinfo">
                    <div class="postname">{{ item.postName || "-" }}</div>
                    <div class="condition">
                      {{
                        `${item.areaName || "-"} | 工作${
                          item.workYear || "-"
                        }年 | ${getEducationLevel(item.educationBg)}`
                      }}
                    </div>
                    <div>{{ item.companyName || "-" }}</div>
                  </div>
                  <div class="wages">
                    <div class="wages-range">
                      {{ `${item.lowestSalary}K - ${item.highestSalary}K` }}
                    </div>
                    <div>{{ parseTime(item.createTime, "{y}-{m}-{d}") }}</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="pagination" v-if="positionObj.total">
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="positionObj.queryParams.pageSize"
                :total="positionObj.total"
                @current-change="currentChange"
              >
              </el-pagination>
            </div>
          </div>
          <el-empty v-else :image-size="80" description="无在招职业数据"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCompanyDetails,
  getCompanyPositon,
} from "@/api/CooperativeEnterprise";
import { parseTime } from "@/utils/utils";
import { getDictData } from "@/api/Dict";
export default {
  name: "EnterpriseDetailsIndex",
  data() {
    return {
      details: {},
      loading: false,
      parseTime: parseTime,
      hotPositionList: [],
      educationList: [],
      companyTradeList: [],
      companyScopeList: [],
      positionObj: {
        queryParams: {
          pageNum: 1,
          pageSize: 8,
          companyId: undefined,
        },
        loading: false,
        list: [],
        total: 0,
      },
    };
  },
  created() {
    this.getDict();
    const { companyId } = this.$route.query;
    if (companyId) {
      this.getCompanyDetails(companyId);
      this.positionObj.queryParams.companyId = companyId;
      this.getPositionList();
      document.documentElement.scrollTop = 0;
    }
  },
  methods: {
    /**
     * 获取教育字典
     * @date 2022-08-11
     * @returns {any}
     */
    getDict() {
      getDictData({ key: "degr_educ" }).then((res) => {
        this.educationList = res.data;
      });
      getDictData({ key: "company_trade" }).then((res) => {
        this.companyTradeList = res.data;
      });
      getDictData({ key: "company_scope" }).then((res) => {
        this.companyScopeList = res.data;
      });
    },
    /**
     * 获取企业详情
     * @date 2022-08-15
     * @param {any} companyId
     * @returns {any}
     */
    getCompanyDetails(companyId) {
      this.loading = true
      getCompanyDetails({ companyId }).then((res) => {
        this.details = res?.data;
        let arr = [],
          data = res?.data?.environmentUrlList;
        for (let i = 0; i < data.length; i += 4) {
          arr.push(data.slice(i, i + 4));
        }
        this.details.environmentUrlList = arr;
        this.loading = false
      });
    },
    /**
     * 加载logo错误触发
     * @date 2022-08-15
     * @returns {any}
     */
    errorHandler() {
      return true;
    },
    /**
     * 获取企业职位列表
     * @date 2022-08-15
     * @returns {any}
     */
    getPositionList() {
      this.positionObj.loading = true;
      getCompanyPositon(this.positionObj.queryParams).then((res) => {
        this.positionObj.list = res.rows;
        this.positionObj.total = Number(res.total);
        this.positionObj.loading = false;
      });
    },
    /**
     * 分页切换触发
     * @date 2022-08-15
     * @param {any} page
     * @returns {any}
     */
    currentChange(page) {
      this.positionObj.queryParams.pageNum = page;
      this.getPositionList();
    },
    /**
     * 获取教育等级名称
     * @date 2022-08-11
     * @param {any} val
     * @returns {any}
     */
    getEducationLevel(val) {
      let label = "-";
      this.educationList.forEach((item) => {
        if (Number(item.text) === Number(val)) {
          label = item.label;
        }
      });
      return label;
    },
    /**
     * 跳转到指定页面
     * @date 2022-08-11
     * @param {any} path
     * @returns {any}
     */
    jumpPage(path,param) {
      if (path) {
        this.$router.push({path:path,query:param});
      }
    },
  },
  filters: {
    filtersDict(val, list) {
      let label = '-'
      list.forEach(item => {
        if (Number(val) === Number(item.text)) {
          label = item.label
        }
      })
      return label
    }
  }
};
</script>

<style lang="scss" scoped>
.enterprise-details {
  &-header {
    background-color: #43565f;
    &-box {
      margin: 0 auto;
      padding: 36px 0;
      display: flex;
      justify-content: space-between;
      .edhb-left {
        display: flex;
        &-logo {
          margin-right: 13px;
        }
        &-info {
          &-name {
            font-size: 28px;
            color: #fff;
            font-family: SourceHanSansCN;
          }
        }
      }
      .edhb-right {
        &-item {
          color: rgba($color: #fff, $alpha: 0.7);
          font-size: 14px;
          text-align: right;
          margin-bottom: 8px;
        }
        .position {
          position: relative;
          &::before {
            content: "";
            display: inline-block;
            width: 13px;
            height: 17px;
            background: url("./../../../assets/images/dingwei.svg") no-repeat
              center center;
            background-size: cover;
            vertical-align: bottom;
            margin-right: 5px;
          }
        }
      }
    }
  }
  &-main {
    &-hot {
      margin-bottom: 20px;
      .edmh-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 18px;

        &-view {
          color: #858585;
          font-size: 14px;
          cursor: pointer;
        }
      }
      h4 {
        color: #1a1a1a;
        font-size: 20px;
      }
      .edmh-list {
        &-item {
          background-color: #fff;
          padding: 18px 20px;
          border-radius: 6px;
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
          &-left {
            .elil-item {
              color: #919191;
              font-size: 14px;
              margin-bottom: 10px;
              &:first-child {
                color: #1a1a1a;
                font-size: 20px;
              }
              &:last-child {
                font-size: 13px;
              }
            }
          }
          &-right {
            text-align: right;
            display: flex;
            flex-direction: column;
            .elir-item {
              font-size: 13px;
              color: #919191;
              &:first-child {
                flex: 1;
                color: #ee5a0f;
                font-size: 18px;
              }
            }
          }
        }
      }
    }
    &-info {
      padding-bottom: 100px;
      .edmi-introduce {
        margin-top: 10px;
        margin-bottom: 24px;
        h4 {
          font-size: 20px;
          color: #1a1a1a;
          font-family: SourceHanSansCN;
          margin-bottom: 10px;
        }
        &-content {
          line-height: 30px;
          font-size: 14px;
          color: #6c6c6c;
        }
      }
      .edmi-album {
        margin-bottom: 24px;
        h4 {
          font-size: 20px;
          color: #1a1a1a;
          font-family: SourceHanSansCN;
          margin-bottom: 24px;
        }
        &-list {
          .image {
            width: 100%;
            height: 178px;
          }
        }
      }
      .edmi-position {
        h4 {
          font-size: 20px;
          color: #1a1a1a;
          font-family: SourceHanSansCN;
          margin-bottom: 20px;
        }
        &-list {
          &-item {
            display: flex;
            padding: 14px 16px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            cursor: pointer;
            .logo {
              width: 61px;
              height: 61px;
              border: solid 1px #e2e2e2;
              border-radius: 4px;
              margin-right: 15px;
              .image {
                width: 100%;
                height: 100%;
                border-radius: 4px;
                border: solid 1px #e2e2e2;
              }
            }
            .postinfo {
              flex: 1;
              font-size: 13px;
              color: #919191;
              .postname {
                color: #1a1a1a;
                font-size: 20px;
                font-family: SourceHanSansCN;
                margin-bottom: 2px;
              }
              .condition {
                font-size: 14px;
                margin-bottom: 2px;
              }
            }
            .wages {
              display: flex;
              flex-direction: column;
              font-size: 13px;
              color: #919191;
              &-range {
                flex: 1;
                text-align: right;
                font-family: SourceHanSansCN;
                color: #ee5a0f;
                font-size: 18px;
              }
            }
          }
        }
        .pagination {
          text-align: center;
          margin-top: 20px;
          :deep(.el-pager .active) {
            background-color: #ff3939;
          }
          :deep(.el-pagination.is-background
              .el-pager
              li:not(.disabled).active) {
            background-color: #ff3939;
          }
        }
      }
    }
  }
}
</style>
