<template>
  <div class="exp" v-if="list?.length">
    <div class="ml">工作经历 <span v-if="total > queryParams.pageSize">{{ '最多展示' + queryParams.pageSize + '条数据' }}</span></div>
    <el-timeline>
      <template v-for="(val, index) in list" :key="index">
        <template v-if="expandAll || index < foldNum">
          <el-timeline-item center placement="top" color="#0bbd87">
            <div class="timeline-item">
              <div class="timeline-item-time">
                <span>{{ val?.startTime ? timesTampChange(val.startTime, 'Y-M') : '未填写工作时间' }}</span>
                <span v-if="val?.startTime"> 至 {{ val.startTime ? val.endTime ? timesTampChange(val.endTime, 'Y-M') : '至今' : '' }}</span>
                <span v-if="val?.startTime"> ({{ val.startTime ? getTimeDifferenceInChinese(val.startTime, val.endTime) : '' }})</span>
              </div>
              <div class="timeline-item-content">
                <div class="timeline-item-name">{{ formatName(val.enterpriseName) || '' }}</div>
                <div class="timeline-item-name">{{ formatName(val.positionName) || '' }}</div>
              </div>
            </div>
          </el-timeline-item>
        </template>
      </template>
      <!-- 允许折叠情况下数据大于displayIndex 展示折叠按钮 -->
      <div v-if="list.length > foldNum && !defaultShowAll" class="showBtn color-primary" @click.stop="expandAll = Boolean(!expandAll)">
        <span>{{ expandAll ? '折叠' : '展开全部' }}</span>
        <!-- <div class="icons">
          <i :class="expandAll ? 'up' : 'down'"></i>
          <i class="el-icon-down"></i>
        </div> -->
      </div>
    </el-timeline>
  </div>
</template>

<script setup>
defineOptions({ name: 'PersonExpList'})
import { PersonInfoApi } from '@/api/menduner/system/person'
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter2 } from '@/utils/formatTime'
import { timesTampChange, getTimeDifferenceInChinese } from '@/utils/transform/date'
import { formatName } from '@/utils'

const emit = defineEmits(['echo'])

const props = defineProps({
  userId: [String, Number], // 通过userId调用接口查询工作经验列表
  data: Array, // 传入工作经验列表
  defaultShowAll: Boolean // 展示所有工作经验
})

const queryParams = reactive({
  pageNo: 1,
  pageSize: 100,
  userId: props.userId
})

const expandAll = ref(props.defaultShowAll) // 展开/折叠
const foldNum = ref(2) // 折叠时展示个数-1

const deal = (list) => {
  const arr = list.map(exp => {
    exp.startTimeStr = exp.startTime ? timesTampChange(exp.startTime, 'Y-M') : '未填写工作时间'
    exp.endTimeStr = exp.startTime ? exp.endTime ? timesTampChange(exp.endTime, 'Y-M') : '至今' : ''
    exp.year = exp.endTimeStr ? getTimeDifferenceInChinese(exp.startTime, exp.endTime) : ''
    // 未填写工作经验相关内容，不展示
    exp.show = (exp.startTimeStr !== '未填写工作时间') || Boolean(exp.enterpriseName) || Boolean(exp.positionName)
    return exp
  }).filter(i => i.show)
  return arr
}

const list = ref(props.data?.length ? deal(props.data) : [])
const total = ref(props.data?.length || 0)
const loading = ref(false)
const getExpList = async () => {
  if (!queryParams.userId) return

  loading.value = true
  try {
    const data = await PersonInfoApi.getPersonExpPage(queryParams)
    list.value = data.list?.length ? deal(data.list) : []
    emit('echo', list.value)
    
    total.value = data.total
  } finally {
    loading.value = false
  }
}

watch(() => props.userId, (newVal) => {
  if (newVal) {
    queryParams.userId = newVal
    getExpList()
  }
}, { immediate: true }, { deep: true })
</script>
<style lang="scss" scoped>
.exp {
  margin-top: 20px;
  color: #666;
  .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: 100px;
    }
    .timeline-item-content {
      flex: 1;
      display: flex;
      align-items: center;
      .timeline-item-name {
        width: 50%;
        padding-left: 12px;
      }
    }
  }
  .el-timeline-item {
    padding-bottom: 0;
  }
  .showBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #00b760;
    cursor: pointer;
    .icons {
      display: flex;
      flex-direction: column;
      margin-left: 5px;
      .icon {
        line-height: 4px;
      }
    }
  }
}
</style>
