<template>
  <el-dialog :modelValue="show" title="" width="50%" :before-close="handleClose">
    <el-form label-width="110px" label-position="left">
      <div class="position-info">
        <div class="position-info-title">
          <img src="@/assets/img/position.png" width="24" height="24" />
          <span>职位基本信息</span>
        </div>
        <div style="margin-left: 42px">
          <el-form-item label="公司：">
            <span>{{ positionItem?.FirmName }}</span>
          </el-form-item>
          <el-form-item label="招聘类型："
            ><span>{{
              positionItem?.FRECRUITMENTTYPE === 'A' ? '社招' : '校招'
            }}</span></el-form-item
          >
          <el-form-item label="职位名称："
            ><span>{{ positionItem?.JobName }}</span></el-form-item
          >
          <el-form-item label="职位描述：">
            <pre style="white-space: pre-wrap">{{ positionItem?.FJOBDESCRIPTION_Tag }}</pre>
          </el-form-item>
          <el-form-item label="职位类型："
            ><span>{{ positionItem?.FJOBTYPE }}</span></el-form-item
          >
        </div>
        <div class="position-info-title" style="margin: 30px 0 5px">
          <img src="@/assets/img/position1.png" width="24" height="24" />
          <span>职位基本信息</span>
        </div>
        <div style="margin-left: 42px">
          <div class="flx-align-center">
            <el-form-item label="经验和学历："
              ><span>{{ positionItem?.FEXPERIENCE }}</span
              ><span
                style="
                  display: inline-block;
                  width: 4px;
                  height: 4px;
                  background: #cccccc;
                  border-radius: 50%;
                  margin: 0 4px;
                "
              ></span>
              <span>{{ positionItem?.FEDUCATIONALBACKGROUND }}</span></el-form-item
            >
          </div>
          <div class="flx-align-center">
            <el-form-item label="薪资范围："
              ><span>
                {{ positionItem?.FMINIMUMWAGE }}-{{ positionItem?.FMAXIMUMSALARY }}&nbsp;&nbsp;{{
                  positionItem?.FMONTHLYSALARY?.replace('月', '薪')
                }}</span
              ></el-form-item
            >
          </div>

          <el-form-item label="工作地点：">{{ positionItem?.FWORKPLACE }}</el-form-item>
          <el-form-item label="职位关键词：" class="tag-label"
            ><el-tag
              v-for="(item, index) in positionItem?.FJOBKEYWORDS"
              :key="index"
              style="margin: 0 12px 12px 0"
              >{{ item }}</el-tag
            ></el-form-item
          >
        </div>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
defineProps({
  show: {
    type: Boolean,
    default: false
  },
  positionItem: {
    type: Object,
    default: () => {}
  } as any
})

const emits = defineEmits(['update:show'])

const handleClose = () => {
  emits('update:show', false)
}
</script>

<style lang="scss" scoped>
.el-form {
  padding-left: 60px;
  padding-right: 20px;
}
.position-info {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 400;
  color: #222222;
}

.position-info-title {
  font-size: 18px;
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  span {
    margin-left: 16px;
  }
}
.tag-label {
  :deep(.el-form-item__label) {
    margin-bottom: 12px;
  }
}
</style>
