<template>
  <div>
    <div v-for="(k, i) in dataList" :key="i" class="exp mx-n2" @mouseenter="k.active = true" @mouseleave="k.active = false">
      <div class="d-flex align-center justify-space-between">
        <div>
          <span style="font-size: 16px">{{ k.name }}</span>
          <span class="label-title ml-5">
            <span>{{ timesTampChange(k.startTime, 'Y-M') }}</span>
            <span class="mx-1">至</span>
            <span>{{ timesTampChange(k.endTime, 'Y-M') }}</span>
          </span>
        </div>
      </div>
      <div>
        <span class="label-title">项目描述：</span>
        <span class="label-title">{{ k.content }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'enterprise-talentPool-details-projectExperience'})
import { timesTampChange } from '@/utils/date'
import { ref } from 'vue'

const props = defineProps({
  data: Array
})

const dataList = ref([])
if (props.data?.length) dataList.value = props.data

</script>
<style lang="scss" scoped>
.exp {
  font-size: 15px;
  // cursor: pointer;
  border-radius: 6px;
  padding: 2px 10px 8px;
  // &:hover {
  //   background-color: var(--color-f8);
  // }
}
</style>
