<!-- 面试日程 -->
<template>
  <div style="height: 100%; overflow: hidden;background-color: var(--default-bgc);">
    <div class="white-bgc px-3 py-5" style="font-size: 16px; display: flex; justify-content: space-between; border-bottom: 1px solid #e3e3e3;">
      <div>面试日程</div>
      <div v-if="props.dataList.length" class="defaultLink" @click="handleMore">查看全部</div>
    </div>
    <!-- 滚动区域 -->
     <div v-if="props.dataList.length" class="" style="height: calc(100% - 86px); overflow-y: auto;">
      <div v-for="val in props.dataList" :key="'schedule' + val">
        <div class="color-666 px-8 py-3" style="">{{ timesTampChange(val?.time, 'M月D日') || '--' }}</div>
        <div class="white-bgc pa-6">
          <div class="mb-3 d-flex justify-space-between">
            <div style="font-weight: bold;">{{ val?.enterprise?.anotherName || '--' }}</div>
            <div
              class="fz-15"
              :style="{ 'color': val?.status.toString() === '0' ?
                'var(--v-primary-base)': val?.status.toString() === '1' ?
                'var(--v-primary-base)': val?.status.toString() === '2' ?
                'var(--v-primary-base)': val?.status.toString() === '3' ?
                'var(--v-primary-base)': val?.status.toString() === '4' ?
                'var(--v-primary-base)': val?.status.toString() === '5' ?
                'var(--v-error-base)': val?.status.toString() === '98' ?
                'var(--v-error-base)': val?.status.toString() === '99' ? 'var(--v-error-base)' : ''
              }"
            >
              {{ getText(val?.status+'', statusList) || '--' }}
            </div>
          </div>
          <div class="fz-14 mb-2">
            <span>时间：</span>
            <span class="c-base">{{ timesTampChange(val?.time, 'h:m') || '--' }}</span>
          </div>
          <div class="fz-14 mb-2">
            <span>职位：</span>
            <span class="c-base">{{ val?.job?.name || '--' }}</span>
          </div>
          <div class="fz-14 mb-2">
            <span>薪资：</span>
            <span class="c-base">{{ val?.job?.payFrom || '--' }}-{{ val?.job?.payTo || '--' }}/{{ val?.job?.payName || '--' }}</span>
          </div>
          <div class="img-box">
            <v-avatar size="small" :image="getUserAvatar(val.contact.avatar, val.contact.sex)"></v-avatar>
            <span class="name">
              <span class="mx-3">{{ val.contact.name }}</span>
              <span class="septal-line"></span>
              <span class="gray">{{ val.contact.postNameCn }}</span>
            </span>
          </div>
        </div>
      </div>
      <div class="text-center color-666 my-8" style="cursor: pointer;" @click="handleMore">{{ $t('common.more') }}</div>
     </div>
     <Empty v-else :elevation="false"></Empty>
  </div>
</template>

<script setup>
import { getDict } from '@/hooks/web/useDictionaries'
import { getText } from '@/utils/getText'
import { timesTampChange } from '@/utils/date'
import { ref } from 'vue'
import { getUserAvatar } from '@/utils/avatar'
defineOptions({name: 'PersonalCenter-interviewSchedule'})
const emit = defineEmits(['handleMore'])
const props = defineProps({
  dataList: {
    type: Array,
    default: () => []
  }
})


// 状态字典
const statusList = ref()
const getStatusList = async () => {
  const { data } = await getDict('menduner_interview_invite_status')
  statusList.value = data
}
getStatusList()

const handleMore = () => {
  emit('handleMore')
}

</script>
<style lang="scss" scoped>
.fz-13 { font-size: 13px; }
.fz-14 { font-size: 14px; }
.fz-15 { font-size: 15px; }
.c-base { color: var(--v-primary-base); }
.img-box {
  height: 48px;
  padding: 12px 0;
  .name {
    color: var(--color-222);
    font-weight: 400;
    font-size: 13px;
    .gray {
      color: var(--color-666);
    }
  }
}
::-webkit-scrollbar {
  width: 4px;
  height: 10px;
  display: none;
}
::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
  // 滚动条-颜色
  background: #c3c3c379;
}
::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
  // 滚动条-底色
  background: #e5e5e58f;
}
</style>
