<!--
 * @Description: 招聘就业
 * @Author: 空白格
 * @Date: 2022-08-11 13:25:43
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-12 09:10:10
 * @FilePath: \veterans_client_web\src\views\RecruitmentEmployment\RecruitmentEmploymentIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main recruitment-employment">
    <BannerBreadcrumb title="招聘就业" />
    <div class="app-main-box recruitment-employment-content">
      <!-- 企业推荐 -->
      <div class="app-main-box-content enterprise-recommendation">
        <div class="enterprise-recommendation-title">
          <div class="title">企业推荐</div>
          <div class="more" @click="jumpPage">更多</div>
        </div>
        <div class="enterprise-recommendation-list">
          <el-carousel
            class="enterprise-recommendation-carousel"
            :autoplay="false"
            arrow="never"
          >
            <el-carousel-item
              class="enterprise-recommendation-list-item"
              v-for="(item, index) in companyList"
              :key="index"
            >
              <div class="company-list">
                <el-row :gutter="20">
                  <el-col
                    :xs="24"
                    :sm="12"
                    :md="12"
                    :lg="6"
                    :xl="6"
                    v-for="(company, cIndex) in item"
                    :key="cIndex"
                  >
                    <div class="company-list-item">
                      <div class="logo">
                        <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="details">
                        <div class="details-name">
                          {{ company.companyName }}
                        </div>
                        <div class="details-post">
                          岗位<span>{{ company.postCount }}</span
                          >个
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!-- 最新招聘 -->
      <div class="app-main-box-content latest-recruitment" v-loading="loading">
        <div class="latest-recruitment-title">
          <div class="title">最新招聘</div>
        </div>
        <div class="latest-recruitment-list">
          <el-row :gutter="16">
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="12"
              :xl="12"
              v-for="(item, index) in postList"
              :key="index"
            >
              <div class="latest-recruitment-list-item">
                <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="total">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="queryParams.pageSize"
              :total="total"
              @current-change="currentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BannerBreadcrumb from "@/components/BannerBreadcrumb";
import {
  getRecommendCompanyData,
  getLatestRecruitmentData,
} from "@/api/RecruitmentEmployment";
import { getDictData } from "@/api/Dict";
import { parseTime } from "@/utils/utils";
export default {
  name: "RecruitmentEmploymentIndex",
  components: {
    BannerBreadcrumb,
  },
  data() {
    return {
      companyList: [],
      queryParams: {
        newest: 1,
        pageNum: 1,
        pageSize: 10,
        postName: undefined,
      },
      postList: [],
      educationList: [],
      parseTime: parseTime,
      total: 0,
      loading: false,
    };
  },
  created() {
    this.getDict();
    this.getRecommendCompanyList();
    this.getLatestRecruitmentList();
  },
  methods: {
    /**
     * 获取教育字典
     * @date 2022-08-11
     * @returns {any}
     */
    getDict() {
      getDictData({ key: "degr_educ" }).then((res) => {
        this.educationList = res.data;
      });
    },
    /**
     * 获取推荐企业
     * @date 2022-08-11
     * @returns {any}
     */
    getRecommendCompanyList() {
      getRecommendCompanyData().then((res) => {
        let arr = [],
          data = res.data;
        for (let i = 0; i < data.length; i += 4) {
          arr.push(data.slice(i, i + 4));
        }
        this.companyList = arr;
      });
    },
    /**
     * 获取最新岗位
     * @date 2022-08-11
     * @returns {any}
     */
    getLatestRecruitmentList() {
      this.loading = true;
      getLatestRecruitmentData(this.queryParams).then((res) => {
        this.postList = res.rows;
        this.total = Number(res.total);
        this.loading = false;
      });
    },
    /**
     * 分页切换
     * @date 2022-08-11
     * @param {any} page
     * @returns {any}
     */
    currentChange(page) {
      this.queryParams.pageNum = page;
      this.getLatestRecruitmentList();
    },
    /**
     * 获取教育等级名称
     * @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;
    },
    jumpPage() {
      this.$router.push('/cooperativeenterprise')
    }
  },
};
</script>

<style lang="scss" scoped>
.recruitment-employment {
  &-content {
    padding-bottom: 100px;
    .enterprise-recommendation {
      margin-top: 22px;
      &-title {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        color: #727272;
        font-size: 14px;
        margin-bottom: 20px;
        .title {
          font-size: 26px;
          color: #1a1a1a;
          font-family: SourceHanSansCN;
        }
        .more {
          cursor: pointer;
        }
      }
      &-list {
        :deep(.el-carousel__button) {
          // 指示器按钮
          width: 9px;
          height: 9px;
          border: none;
          border-radius: 50%;
          background-color: #c2c2c2;
        }
        :deep(.is-active .el-carousel__button) {
          // 指示器激活按钮
          width: 17px;
          background-color: #ff0101;
          border-radius: 5px;
        }
        .company-list {
          padding: 4px;
          &-item {
            padding: 16px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            border-radius: 3px;
            display: flex;
            cursor: pointer;
            margin-bottom: 20px;
            .logo {
              width: 61px;
              height: 61px;
              border: solid 1px #e2e2e2;
              border-radius: 4px;
              margin-right: 15px;
              .image {
                width: 100%;
                height: 100%;
                border-radius: 4px;
              }
            }
            .details {
              line-height: 20px;
              font-size: 14px;
              color: #919191;
              width: calc(100% - 77px);
              &-name {
                width: 100%;
                color: #1a1a1a;
                font-size: 20px;
                margin-bottom: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
              }
              span {
                color: #ff6300;
              }
            }
          }
        }
      }
    }
    .latest-recruitment {
      margin-top: 22px;
      &-title {
        margin-bottom: 20px;
        .title {
          font-size: 26px;
          color: #1a1a1a;
          font-family: SourceHanSansCN;
        }
      }
      &-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;
        :deep(.el-pager .active) {
          background-color: #ff3939;
        }
        :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
          background-color: #ff3939;
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .enterprise-recommendation-carousel :deep(.el-carousel__container) {
    height: 500px;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .enterprise-recommendation-carousel :deep(.el-carousel__container) {
    height: 280px;
  }
}
@media screen and (min-width: 1200px) {
  .enterprise-recommendation-carousel :deep(.el-carousel__container) {
    height: 150px;
  }
}
</style>
