<template>
  <div class="container">
    <div class="details-header">
      <div class="content">
        <div>
          <div class="details-header-top">
            <div>装卸</div>
            <div class="salary-range">{{ detailData?.salaryRange }}</div>
          </div>
          <div class="details-header-center">
            {{ detailData?.cityName }}/{{
              detailData?.workingLife ? detailData?.workingLife : '经验不限'
            }}/{{ detailData?.academicRequirement ? detailData?.academicRequirement : '学历不限' }}
          </div>
          <div class="details-header-bottom">
            <img src="https://rms.junrunrenli.com/static/img/money02.df9ff2d6.png" class="icon" />
            推荐金额
            <div>{{ detailData?.rewards }}元</div>
          </div>
        </div>
        <div class="submit">
          <el-button @click="show = !show">立即投递</el-button>
          <div v-if="show" class="popupbox">
            <img src="https://rms.junrunrenli.com/static/img/popup02.691d38c2.png" />
          </div>
        </div>
      </div>
    </div>
    <div class="details-content">
      <div class="content">
        <div class="title">职位描述：</div>
        <div class="text">
          {{ detailData?.positionDescribe }}
        </div>
        <div class="title">工作地点</div>
        <div class="text">
          <img :src="locationIcon" class="address" />
          {{ detailData?.workingplaceAddress }}
        </div>
        <div class="title">公司信息</div>
        <div class="text">
          <img :src="companyIcon" class="comp" />
          {{ detailData?.customerName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { companyIcon, locationIcon } from '@/utils/index'
import { useJobDetailStore } from '@/stores/modules/jobDetails'

const globalStore = useJobDetailStore()
const detailData = computed(() => globalStore.getJobDtail)

const show = ref(false)
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  .details-header {
    background-color: #f5f5f5;
    width: 100%;
    height: 238px;
    display: flex;
    justify-content: center;

    .content {
      padding-top: 40px;
      width: 1316px;
      display: flex;
      justify-content: space-between;
      .details-header-top {
        display: flex;
        font-size: 18px;
        color: #242424;
        margin-bottom: 25px;
        align-items: flex-end;
        .salary-range {
          font-size: 16px;
          color: #f3911d;
          margin-left: 20px;
        }
      }
      .details-header-center {
        color: #666;
        font-size: 15px;
        display: inline-block;
        margin-bottom: 25px;
      }
      .details-header-bottom {
        font-size: 16px;
        display: flex;
        align-items: flex-end;
        .icon {
          width: 18px;
          height: 18px;
          margin-right: 10px;
        }
        div {
          margin-left: 10px;
          color: #f3911d;
        }
      }
      .submit {
        position: relative;
        .el-button {
          width: 140px;
          height: 48px;
          line-height: 48px;
          background-color: #f3911d;
          border-radius: 4px;
          color: #fff;
          padding: 0;
          font-size: 20px;
        }
        .popupbox {
          position: absolute;
          z-index: 20;
          right: -5px;
          top: 50px;
          img {
            height: 171px;
            width: 170px;
          }
        }
      }
    }
  }
  .details-content {
    width: 100%;
    background-color: #ffffff;
    padding-top: 40px;
    display: flex;
    justify-content: center;
    .content {
      width: 1316px;
      .title {
        font-size: 18px;
        margin-bottom: 16px;
        color: #242424;
        font-weight: 700;
      }
      .text {
        font-size: 13px;
        color: #666;
        margin-bottom: 30px;
        vertical-align: middle;
        display: flex;
        align-items: center;
        .address {
          width: 18px;
          height: 20px;
          display: inline-block;
          margin-right: 10px;
          vertical-align: middle;
          padding-bottom: 2px;
        }
        .comp {
          width: 50px;
          height: 50px;
          margin-right: 20px;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
