<!--  -->
<template>
  <el-card class="box" v-if="info">
    <div class="infoBox">
      <el-image v-if="info?.avatar" class="h-60px w-60px avatar" :src="info?.avatar" fit="contain" hide-on-click-modal :preview-src-list="[info?.avatar]"/>
      <div class="infos">
        <div
          class="name"
          :class="{'male': info?.sex === '1', 'female': info?.sex === '2'}"
        >
         <span>{{ info?.name + (info.type === '1' ? ' (在校学生)' : ' (职场人士)') }}</span>
        </div>
        <div class="other">
          <div v-if="info?.sex">{{ info?.sex === '1' ? '男' : info?.sex === '2' ? '女' : '' }}<span class="ml">|</span></div>
          <template v-if="info?.jobStatus">
            <dict-tag showText :type="DICT_TYPE.MENDUNER_JOB_SEEK_STATUS" :value="info?.jobStatus" />
            <span class="mr">|</span>
          </template>
          <template v-if="info?.expType">
            <dict-tag showText :type="DICT_TYPE.MENDUNER_EXP_TYPE" :value="info?.expType" />
            <span class="mr">|</span>
          </template>
          <template v-if="info?.eduType">
            <dict-tag showText :type="DICT_TYPE.MENDUNER_EDUCATION_TYPE" :value="info?.eduType" />
            <!-- <span>|</span> -->
          </template>
          <div class="firstWorkTime">首次工作时间：{{ info.firstWorkTime ? timesTampChange(info.firstWorkTime, 'Y-M-D') : '未填写' }}</div>
        </div>
      </div>
    </div>
    <!-- 工作经验 -->
    <!-- <expExtend :data="info?.workExpList" /> -->
    <expExtend :user-id="info?.userId" @echo="expEcho" />
    <div class="button">
      <el-button type="success" plain @click="personClick">{{ props.detailButTxt || '加入人才地图' }}</el-button>
    </div>
  </el-card>
</template>
<script setup>
defineOptions({ name: 'PersonCard'})
import { DICT_TYPE } from '@/utils/dict'
import expExtend from '@/views/menduner/system/person/details/components/expExtend.vue'
import { timesTampChange, getTimeDifferenceInChinese } from '@/utils/transform/date'
import { formatName } from '@/utils'
const emit = defineEmits(['detail'])

const props = defineProps({
  data: Object,
  detailButTxt: String,
})

const info = ref(props?.data)

let expData = []
const expEcho = (data) => {
  expData = data
}

const personClick = () => {
 emit('detail', info.value, expData)
}

</script>
<style lang="scss" scoped>
.box {
  position: relative;
}
.infoBox {
  display: flex;
  color: #666;
  .infos {
    margin-left: 10pxs;
  }
  .avatar {
    margin-right: 20px;
    border-radius: 50%;
  }
  .name {
    font-size: 16px;
    margin-bottom: 5px;
    // color: #00b760;
  }
  .male {
    color: #1867c0;
  }
  .female {
    color: #ff5252;
  }
  .other {
    display: flex;
    .ml { margin-left: 10px; }
    .mr { margin-right: 10px; }
    .mx { margin: 0 10px; }
    div {
      margin-right: 10px;
    }
    .firstWorkTime { margin-left: 30px; }
  }
}
.button {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>
