<template>
  <div>
    <div class="mr-5 d-flex align-center" v-if="tab === 0">
      <div style="width: 200px;">
        <v-radio-group v-model="radio" inline style="height: 28px;" @update:modelValue="handleChangeSelected">
          <v-radio v-model="radio" label="已报名" value="0" hide-details density="compact" class="mr-3"></v-radio>
          <v-radio v-model="radio" label="已查看" value="1" hide-details density="compact"></v-radio>
        </v-radio-group>
      </div>
      <div class="reset-text cursor-pointer ml-3" @click="handleReset">重置</div>
    </div>
    <v-data-table
      class="mt-5"
      v-model="selected"
      :items="items"
      :headers="headers"
      hover
      show-select
      :disable-sort="true"
      height="60vh"
      item-value="id"
    >
      <template #bottom></template>
      <template v-slot:item.name="{ item }">
        <div class="d-flex align-center cursor-pointer" @click="handleToPersonDetail(item)">
          <v-badge
            bordered
            offset-y="6"
            :color="badgeColor(item)"
            :icon="badgeIcon(item)">
            <v-avatar size="40" :image="item.person.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
          </v-badge>
          <span class="defaultLink ml-3">{{ item?.person?.name }}</span>
        </div>
      </template>
      <template v-slot:item.actions="{ item }">
        <v-btn v-if="tab === 0 && item.url" color="primary" variant="text" @click="handlePreviewResume(item)">查看附件</v-btn>
        <v-btn v-if="tab === 1 || tab === 0" color="primary" variant="text" @click="handleEliminate(item)">不合适</v-btn>
        <v-btn v-if="tab === 2" color="primary" variant="text" @click="handleEnterByEnterprise(item)">入职</v-btn>
        <v-btn v-if="tab === 3" color="primary" variant="text" @click="handleSettlement(item)">结算</v-btn>
        <v-btn v-if="radio === '1'" color="primary" variant="text">邀请面试</v-btn>
      </template>
    </v-data-table>
  </div>
</template>

<script setup>
defineOptions({ name: 'table-page'})
import { ref, computed } from 'vue'
import { hireJobCvRelSettlement, hireJobCvRelLook } from '@/api/recruit/public/delivery'
import { joinEliminate, personEntryByEnterprise } from '@/api/recruit/enterprise/personnel'
import { previewFile } from '@/utils'
import { useI18n } from '@/hooks/web/useI18n'
import Snackbar from '@/plugins/snackbar'
import { useUserStore } from '@/store/user'

const { t } = useI18n()
const radio = ref()
const userStore = useUserStore()
const emit = defineEmits(['refresh', 'radio', 'reset'])
const props = defineProps({
  tab: Number,
  items: Array,
  tabList: Array
})
const badgeColor = computed(() => (item) => {
  return (item.person && item.person.sex) ? (item.person.sex === '1' ? '#1867c0' : 'error') : 'error'
})

const badgeIcon = computed(() => (item) => {
  return (item.person && item.person.sex) ? (item.person.sex === '1' ? 'mdi-gender-male' : 'mdi-gender-female') : 'mdi-gender-female'
})

const selected = ref([])
const headers = ref([
  { title: '姓名', value: 'name' },
  { title: '应聘职位', value: 'job.name', sortable: false },
  { title: '求职状态', key: 'person.jobStatusName', sortable: false },
  { title: '工作经验', key: 'person.expName', sortable: false },
  { title: '最高学历', key: 'person.eduName', sortable: false },
  { title: '岗位薪资', key: 'job', value: item => `${item.job.payFrom}-${item.job.payTo}/${item.job.payName}`, sortable: false },
  { title: '推荐人', key: 'recommendPerson', value: item => item?.recommendPerson?.name, sortable: false },
  { title: '进度', key: 'status', sortable: false, value: item => props.tabList.find(e => e.value === Number(item.status)).label },
  { title: '结果反馈', key: '', sortable: false },
  { title: '操作', value: 'actions' }
])

// 人才详情
const handleToPersonDetail = ({ userId, id }) => {
  if (!userId || !id) return
  window.open(`/recruit/enterprise/talentPool/details/${userId}?id=${id}`)
}

// 入职
const handleEnterByEnterprise = async (item) => {
  if (!item.id) return
  await personEntryByEnterprise(item.id)
  Snackbar.success(t('common.operationSuccessful'))
  emit('refresh')
}

// 不合适
const handleEliminate = async (item) => {
  if (!item.id || !item?.job?.id) return
  const query = {
    bizId: item.id,
    jobId: item.job.id,
    userId: item.userId,
    type: props.tab === 0 ? '0' : '1' // 投递简历0 已邀约1
  }
  await joinEliminate(query)
  Snackbar.success(t('common.operationSuccessful'))
  emit('refresh')
}

// 结算
const handleSettlement = async (item) => {
  if (!item.id) return
  await hireJobCvRelSettlement(item.id)
  Snackbar.success(t('common.operationSuccessful'))
  emit('refresh')
  // 更新账户信息
  setTimeout(async () => {
    await userStore.getEnterpriseUserAccountInfo()
  }, 2000)
}

// 查看简历
const handlePreviewResume = async ({ url, id }) => {
  if (!url || !id) return
  await hireJobCvRelLook(id)
  previewFile(url)
}

// 已报名、已查看
const handleChangeSelected = (e) => {
  emit('radio', e)
}

const handleReset = () => {
  radio.value = ''
  emit('reset')
}
</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;
}

.reset-text {
  font-size: 14px;
  color: var(--color-666);
  &:hover {
    color: var(--v-primary-base);
  }
}
</style>
