<!--
 * @Description: 
 * @Author: gcz
 * @Date: 2022-08-23 15:06:48
 * @LastEditors: gcz
 * @LastEditTime: 2022-08-25 18:00:22
 * @FilePath: \veterans_client_web\src\views\CooperativeEnterprise\EnterprisePosition\EnterprisePositionIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by gcz, All Rights Reserved. 
-->
<template>
  <div class="app-main">
    <section class="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">
              <view v-if="jobDetails.postStatus == 0">职位已下架</view>
              <div class="edhb-left-info-name">{{ jobDetails.postName || "-" }}</div>
              <div class="edhb-left-info-salary">{{ jobDetails.lowestSalary }}K-{{ jobDetails.highestSalary }}K</div>
              <div class="edhb-left-info-target">经验{{ jobDetails.workYear }}年 / {{ getEducationLevel(jobDetails.educationBg) }} / {{ jobDetails.cityName }}</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>
    </section>
    <div class="app-main-box">
      <div class="app-main-box-content">
        <section class="job-details">
            <div class="title">职位描述</div>
            <div class="description ql-editor" v-html="jobDetails.description"></div>
            <div class="content-bottom">
              <div class="submit" @click="submit">提交简历</div>
            </div>
        </section>
      </div>
    </div>
    <TipPopup v-if="showTipPopup" text="提交成功，等待审核" />
  </div>
</template>

<script>
import { getCompanyDetails,getJobDetails,applyJob } from "@/api/CooperativeEnterprise";
import { parseTime } from "@/utils/utils";
import { getDictData } from "@/api/Dict";
import { mapState } from "vuex";
import TipPopup from "@/components/TipPopup";
export default {
  name: "EnterprisePositionIndex",
  components: {
    TipPopup
  },
  data() {
    return {
      showTipPopup:false,
      positionId:'',
      loading: false,
      details: [], //公司详情
      companyScopeList: [],
      educationList:[],
      jobDetails:[],
    };
  },
  created() {
    this.positionId = this.$route.query.positionId;
    if (this.positionId) {
      this.getJobDetails(this.positionId);
    }
    this.getDict();
  },
  filters: {
    filtersDict(val, list) {
      let label = "-";
      list.forEach((item) => {
        if (Number(val) === Number(item.text)) {
          label = item.label;
        }
      });
      return label;
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  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-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;
    },
    getJobDetails(positionId){
        getJobDetails({positionId}).then(res=>{
            this.jobDetails = res?.data;
            if(this.jobDetails.companyId){
                this.getCompanyDetails(this.jobDetails.companyId);
            }
        })

    },
    /**
     * 获取企业详情
     * @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;
    },
    submit(){
      let auditStatus = this.userInfo?.auditStatus;
      switch (Number(auditStatus)){
        case 0:
          this.$message.warning('您的认证正在审核中,该功能需要认证后才能使用!')
          break;
        case 1:
          this.$message.warning('您的认证未通过,,该功能需要认证后才能使用!')
          break;
        case 2:
          this.applyJob()
          break;
        case 3:
          this.$message.warning('您的认证已被撤销,该功能需要认证后才能使用!')
          break;
        case 9:
          this.$message.warning('您还未进行认证,该功能需要认证后才能使用!')
          break;
      }   
    },
    applyJob(){
      this.$confirm("您确认申请该职位吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(()=>{
        applyJob({postId:this.positionId}).then(res=>{
          if(res.code==200){
            this.showTipPopup = true
          }
        })
      })
      
    }
  },
};
</script>

<style lang='scss' scoped>
// "vue-quill-editor": "^3.0.6"
// import "quill/dist/quill.core.css";
// import "quill/dist/quill.snow.css";
// import "quill/dist/quill.bubble.css";
.app-main-box-content{
  min-height: calc( 100vh - 73px - 180px - 100px - 40px - 23px );
  position: relative;
}
.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;
            margin-bottom: 3px;
          }
          &-salary{
            color: #EF651F;
            font-weight: Bold;
            font-size: 20px;
            letter-spacing: 1.24px;
          }
          &-target{
            color: #fff;
            font-weight: 400;
            font-size: 14px;
            letter-spacing: 1.24px;
          }
        }
      }
      .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;
          }
        }
      }
    }
  }
}
.job-details{
    color: rgb(81, 88, 109);
  .title{
    font-weight: 400;
    font-size: 20px;
    color: #1A1A1A;
    letter-spacing: 1.34px;
    margin-bottom: 15px;
  }
  .content-bottom{
    position: static;
    height: 50px;
    line-height: 50px;
    margin: 30px auto 38px;
    .submit{
      position: absolute;
      left: 50%;
      margin-left: -100px;
      bottom: 38px;
      width: 200px;
      background: #709078;
      font-weight: 400;
      font-size: 20px;
      color: #FFFFFF;
      letter-spacing: 1.08px;
      text-align: center;
      cursor: pointer;;
    }
  }
}

.job-details {
  .big-title {
    font-size: 22px;
    font-weight: 500;
    color: #1c1c1c;
    line-height: 30px;
    letter-spacing: 1px;
    margin-bottom: 53px;
  }
  .block {
    margin-bottom: 20px;
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #1c1c1c;
      line-height: 25px;
      margin-bottom: 6px;
    }
    ul {
      li {
        font-size: 14px;
        font-weight: 400;
        color: #464646;
        line-height: 30px;
      }
    }
  }
}
.description {
  :deep(p){
    margin-bottom: 10px;
  }
  :deep(ul) {
    li {
      font-size: 14px;
      font-weight: 400;
      color: #464646;
      line-height: 30px;
    }
  }
}
</style>