<template>
  <div>
    <v-divider></v-divider>
      <v-tabs class="mb-3" v-model="query.status" align-tabs="start" color="primary" bg-color="#fff" @update:model-value="handleUpdate">
        <v-tab v-for="val in tabList" :key="val.value" :value="val.value">{{ val.label }}</v-tab>
      </v-tabs>
      <div v-if="items.length">
        <ItemPage :items="items" @refresh="getData" :tab="query.status"></ItemPage>
        <CtPagination
          v-if="total > 0"
          :total="total"
          :page="query.pageNo"
          :limit="query.pageSize"
          @handleChange="handleChangePage"
        ></CtPagination>
      </div>
      <Empty v-else class="mt-3"></Empty>
  </div>
</template>

<script setup>
// 面试
defineOptions({ name: 'interview-index'})
import { ref } from 'vue'
import { getUserInterviewInvitePage } from '@/api/recruit/personal/personalCenter'
import { dealDictObjData } from '@/utils/position'
import { getDict } from '@/hooks/web/useDictionaries'
import ItemPage from './item.vue'

const query = ref({
  pageNo: 1,
  pageSize: 10,
  status: '0'
})
const total = ref(0)
const items = ref([])
const tabList = ref([])

const getTabList = async () => {
  const { data } = await getDict('menduner_interview_invite_status')
  tabList.value = data
}
getTabList()

const getData = async () => {
  const { list, total: number } = await getUserInterviewInvitePage(query.value)
  items.value = list.map(e => {
    e.job = { ...e.job, ...dealDictObjData({}, e.job) }
    e.enterprise = { ...e.enterprise, ...dealDictObjData({}, e.enterprise)}
    e.active = false
    return e
  })
  total.value = number
}
getData()

const handleUpdate = () => {
  query.value.pageNo = 1
  getData()
}

const handleChangePage = (e) => {
  query.value.pageNo = e
  getData()
}

</script>

<style scoped lang="scss">

</style>
