<template>
  <div>
    <h2>我的投递</h2>
    <el-table :data="applications" v-loading="loading" border>
      <el-table-column prop="job_title" label="职位" />
      <el-table-column prop="company_name" label="公司" />
      <el-table-column prop="applied_at" label="投递时间" :formatter="(r,c,v) => v?.slice(0,10)" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-empty v-if="applications.length === 0 && !loading" description="暂无投递记录" />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getMyApplications } from '@/api/applications'

const applications = ref([])
const loading = ref(false)

const STATUS_MAP = { pending:'待查看', viewed:'已查看', interviewing:'面试中', hired:'已录用', rejected:'已拒绝' }
const STATUS_TYPE = { pending:'info', viewed:'primary', interviewing:'warning', hired:'success', rejected:'danger' }
const statusLabel = s => STATUS_MAP[s] || s
const statusType = s => STATUS_TYPE[s] || 'info'

onMounted(async () => {
  loading.value = true
  const { data } = await getMyApplications()
  applications.value = data.results
  loading.value = false
})
</script>
