<template>
  <v-data-table
    class="mt-3"
    v-model="selected"
    :items="items"
    :headers="headers"
    hover
    height="60vh"
    item-value="id"
  >
    <template #bottom></template>
    <template v-slot:item.name="{ item }">
      <div class="d-flex align-center cursor-pointer" >
        <v-avatar size="40" :image="item?.sendPerson?.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
        <span class="ml-2" style="color: #000000DE;">{{ item?.sendPerson?.name }}</span>
      </div>
    </template>
  </v-data-table>
</template>

<script setup>
defineOptions({ name: 'myPublicRecruitment-table-page'})
import { ref } from 'vue'
import { timesTampChange } from '@/utils/date'

defineProps({
  tab: String,
  items: Array
})

const selected = ref([])
const headers = [
  { title: '牛人', value: 'sendPerson.name', key: 'name', sortable: false },
  { title: '应聘公司', key: 'enterprise.anotherName', sortable: false },
  { title: '应聘职位', key: 'job', value: item => item?.job?.name, sortable: false },
  { title: '岗位薪资', key: 'salary', value: item => `${item?.job?.payFrom}-${item?.job?.payTo}`, sortable: false },
  { title: '推荐时间', key: 'createTime', value: item => timesTampChange(item.createTime), sortable: false },
]

</script>

<style scoped lang="scss">
:deep(.v-table > .v-table__wrapper > table > thead) {
  background-color: #f7f8fa !important;
}
:deep(.v-selection-control__input) {
  // color: var(--v-primary-base) !important;
  color: #767778;
}
</style>
