<template>
  <div>
    <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
      <v-tab v-for="(val, i) in list" :key="i" :value="i">{{ val.title }}</v-tab>
    </v-tabs>
    <div :class="['left-bottom', {'mt-3': list[tab].path !== interview && list[tab].path !== interested}]">
      <component :is="list[tab].path"></component>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'person-center-job-feedback' })
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import delivery from './components/delivery.vue'
import interview from './components/interview/index.vue'
import interested from './components/interested.vue'
import seenMe from './components/seenMe.vue'

const { t } = useI18n()
const list = [
  { title: t('position.delivered'), path: delivery },
  { title: t('position.interview'), path: interview },
  { title: t('position.interested'), path: interested },
  { title: t('position.haveSeenMe'), path: seenMe }
]

const tab = ref(0)
</script>

<style scoped lang="scss">

</style>
