<template>
  <div class="!h-65vh overflow-y-auto">
    <slot name="header"></slot>
    <el-descriptions title="基础信息" :column="2" border>
      <el-descriptions-item min-width="120" label="姓名（中）">{{ data?.name_zh || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="姓名（英）">{{ data?.name_en || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="职位/头衔（中）">{{ data?.title_zh || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="职位/头衔（英）">{{ data?.title_en || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="生日">{{ data?.birthday || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="籍贯">{{ data?.native_place || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="年龄">{{ data?.age || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="性别">{{ data?.gender || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="手机号码">{{ data?.phone || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="固定电话">{{ data?.mobile || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="电子邮箱">{{ data?.email || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="中文地址">{{ data?.address_zh || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="英文地址">{{ data?.address_en || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="邮政编码">{{ data?.postal_code_zh || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="工作地">{{ data?.residence || '' }}</el-descriptions-item>
      <!-- <el-descriptions-item min-width="120" label="邮政编码（英）">{{ data?.postal_code_en || '--' }}</el-descriptions-item> -->
    </el-descriptions>

    <!-- <el-descriptions title="联系方式" class="mt-20px" :column="2" border>
      <el-descriptions-item min-width="120" label="手机号码">{{ data?.phone || '--' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="固定电话">{{ data?.mobile || '--' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="电子邮箱">{{ data?.email || '--' }}</el-descriptions-item>
    </el-descriptions> -->

    <el-descriptions title="酒店/公司信息" class="mt-20px" :column="2" border>
      <el-descriptions-item min-width="120" label="酒店/公司名称(中)">{{ data?.hotel_zh || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="酒店/公司名称(英)">{{ data?.hotel_en || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="隶属关系（中）">{{ data?.affiliation_zh || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="隶属关系（英）">{{ data?.affiliation_en || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="品牌名称（中）">{{ data?.brand_zh || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="品牌名称（英）">{{ data?.brand_en || '' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="品牌组合">{{ data?.brand_group || '' }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions v-if="data?.career_path && data.career_path.length > 0" title="职业轨迹" class="mt-20px" border />
    <el-timeline v-if="data?.career_path && data.career_path.length > 0" class="pl-20px">
      <el-timeline-item center placement="top" color="#0bbd87" v-for="(val, index) in data.career_path" :key="index">
        <div class="timeline-item">
          <div class="timeline-item-time">{{ val.date || '未填写任职时间' }}</div>
          <div class="timeline-item-content">
            <div class="timeline-item-name">{{ val.hotel_zh || '未填写酒店名称' }}</div>
            <div class="timeline-item-name">{{ val.title_zh || '未填写职位名称' }}</div>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>

    <!-- <el-descriptions title="地址信息" class="mt-20px" :column="2" border>
      <el-descriptions-item min-width="120" label="中文地址">{{ data?.address_zh || '--' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="英文地址">{{ data?.address_en || '--' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="邮政编码（中）">{{ data?.postal_code_zh || '--' }}</el-descriptions-item>
      <el-descriptions-item min-width="120" label="邮政编码（英）">{{ data?.postal_code_en || '--' }}</el-descriptions-item>
    </el-descriptions> -->
    <!-- <el-descriptions title="人才标签" class="mt-20px" :column="2" border />
    <el-tag v-for="k in talentTags" :key="k.talent" type="success" class="mr-10px my-10px">{{ k.tag }}</el-tag> -->
    <slot name="thumbnail"></slot>
  </div>
</template>

<script setup>
defineOptions({ name: 'TalentMapStoreMergeInfo' })
defineProps({
  data: {
    type: Object,
    default: () => {}
  }
})
</script>

<style scoped lang="scss">
.timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--color-666);
  font-size: 13px;
  .timeline-item-time {
    width: 20%;
    min-width: 200px;
  }
  .timeline-item-content {
    flex: 1;
    display: flex;
    align-items: center;
    .timeline-item-name {
      width: 50%;
      padding-left: 12px;
    }
  }
}
.el-timeline-item {
  padding-bottom: 0;
}
</style>