<!--  -->
<template>
  <div>
    <div class="contant" v-if="info.staffNo">
      <span class="contant-label">工号：</span>
      <span class="contant-name">{{info.staffNo}}</span>
    </div>
    <div class="contant" v-if="info.position">
      <span class="contant-label">职位：</span>
      <span class="contant-name">{{info.position }}</span>
    </div>
    <div class="contant" v-if="info.specialty">
      <span class="contant-label">专业：</span>
      <span class="contant-name">{{info.specialty}}</span>
    </div>
    <div class="contant" v-if="info.entryTime">
      <span class="contant-label">入职时间：</span>
      <span class="contant-name">{{info.entryTime}}</span>
    </div>

    <div class="contant" v-if="info.staffStatus">
      <span class="contant-label">人员状态：</span>
      <span class="contant-name">{{info.staffStatus==1?"离职":"在职"}}</span>
    </div>

    <div class="contant" v-if="info.resignationTime && info.staffStatus==1">
      <span class="contant-label">离职时间：</span>
      <span class="contant-name">{{info.resignationTime}}</span>
    </div>

    <div class="contant" v-if="info.resignationReasons && info.staffStatus==1">
      <span class="contant-label">离职原因：</span>
      <span class="contant-name">{{info.resignationReasons}}</span>
    </div>

    <div class="contant" v-if="info.signingCompany">
      <span class="contant-label">劳动合同签订公司：</span>
      <span class="contant-name">{{info.signingCompany}}</span>
    </div>

    <div class="contant" v-if="info.jobBeginTime">
      <span class="contant-label">岗位最初从业时间：</span>
      <span class="contant-name">{{info.jobBeginTime}}</span>
    </div>

    <div class="contant" v-if="info.companySeniority">
      <span class="contant-label">司龄:</span>
      <span class="contant-name">{{info.companySeniority}}</span>
    </div>

    <div class="contant" v-if="info.workExperience">
      <span class="contant-label">工作经历:</span>
      <span class="contant-name" v-html="info.workExperience" style="white-space: pre-wrap;"></span>
    </div>

    <div class="contant">
      <span class="contant-label">简历附件:</span>
      <a
        v-if="info.resumeUrl"
        class="contant-name"
        :href="info.resumeUrl"
        target="_blank"
        rel="noopener noreferrer"
      >预览</a>
      <span v-else class="contant-name">暂无</span>
    </div>

    <div class="contant" v-if="info.projectExperiences">
      <span class="contant-label">项目经历:</span>
      <span class="contant-name">
        <!-- info.projectExperiences" -->
        <div class="contant-name-contant" v-for="(i,index) in info.projectExperiences" :key="index">
          <div class="contant-name-contant-item">
            <span class="contant-name-contant-item-left">项目名称：</span>
            <span class="contant-name-contant-item-right">{{i.projectName}}</span>
          </div>
          <div class="contant-name-contant-item">
            <span class="contant-name-contant-item-left">时间：</span>
            <span
              class="contant-name-contant-item-right"
            >{{i.projectBeginTime || "未知"}}~{{i.projectEndTime || "未知"}}</span>
          </div>
          <div class="contant-name-contant-item" v-if="i.projectContent">
            <span class="contant-name-contant-item-left">工作内容：</span>
            <span class="contant-name-contant-item-right">{{i.projectContent}}</span>
          </div>
        </div>
      </span>
    </div>

    <div class="contant" v-if="info.workTransfers">
      <span class="contant-label">工作调转记录:</span>
      <!-- <span class="contant-name" v-html="info.workTransfers"></span> -->
      <span class="contant-name">
        <div class="contant-name-contant" style="padding-top:20px;">
          <el-timeline>
            <el-timeline-item
              type="primary"
              :key="index"
              v-for="(i,index) in info.workTransfers"
              :timestamp="i.transferTime"
              placement="top"
            >
              <div v-if="i.transferType" class="timeline-name">{{i.transferType}}</div>
              <p>{{i.transferRecord}}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => { }
    }
  },
  filters: {
    getSex (type) {
      let info = ''
      switch (type) {
        case 0:
          info = '未知'
          break
        case 1:
          info = '男'
          break
        case 2:
          info = '女'
          break

        default:
          break
      }
      return info
    }
  },
  data () {
    return {

    }
  },
  computed: {},
  beforeMount () { },
  mounted () { },
  methods: {},
  watch: {}

}
</script>
<style lang='scss' scoped>
.timeline-name {
  position: absolute;
  top: -8px;
  left: 140px;
  background: #3e8ef7;
  color: #fff;
  padding: 6px 8px;
  font-size: 18px;
  transform: scale(0.5);
  border-radius: 8px;
}
.el-timeline {
  margin: 0 0 0 -40px;
}
.contant {
  margin: 16px auto;
  display: flex;
  width: 80%;
  &-label {
    width: 160px;
    padding: 0 10px;
  }
  &-name {
    flex: 1;
    &-contant {
      background: rgba(242, 242, 242, 0.509804);
      border-radius: 3px;
      box-sizing: border-box;
      padding: 6px 10px;
      margin: 0 0 10px 0;
      &-item {
        display: flex;
        &-left {
          width: 80px;
        }
      }
    }
  }
}
</style>