<template>
  <div>
    <h2>我的收藏</h2>
    <el-table :data="favorites" v-loading="loading" border>
      <el-table-column prop="job.title" label="职位" />
      <el-table-column prop="job.organization_name" label="公司" />
      <el-table-column prop="job.location" label="地点" />
      <el-table-column prop="job.salary" label="薪资" />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="router.push({ name: 'JobDetail', params: { id: row.job.id } })">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-empty v-if="favorites.length === 0 && !loading" description="暂无收藏职位" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getMyFavorites } from '@/api/jobs'

const router = useRouter()
const favorites = ref([])
const loading = ref(false)

onMounted(async () => {
  loading.value = true
  try {
    const { data } = await getMyFavorites()
    favorites.value = data.results ?? data
  } catch (e) {
    console.error('Failed to fetch favorites:', e)
  } finally {
    loading.value = false
  }
})
</script>
