<template>
  <div class="job-list-page">
    <el-card class="search-bar">
      <el-form :model="filters" inline>
        <el-form-item><el-input v-model="filters.search" placeholder="职位名称/关键词" clearable @change="fetchJobs" /></el-form-item>
        <el-form-item><el-input v-model="filters.location" placeholder="城市" clearable @change="fetchJobs" /></el-form-item>
        <el-form-item><el-input v-model="filters.category" placeholder="职位类别" clearable @change="fetchJobs" /></el-form-item>
        <el-form-item><el-button type="primary" @click="fetchJobs">搜索</el-button></el-form-item>
      </el-form>
    </el-card>

    <div v-loading="loading" class="job-results">
      <div class="result-count">共 {{ total }} 个职位</div>
      <JobCard v-for="job in jobs" :key="job.id" :job="job" />
      <el-pagination
        v-if="total > pageSize"
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        v-model:current-page="page"
        @current-change="fetchJobs"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import JobCard from '@/components/JobCard.vue'
import { getJobs } from '@/api/jobs'

const jobs = ref([])
const total = ref(0)
const loading = ref(false)
const page = ref(1)
const pageSize = 20
const filters = reactive({ search: '', location: '', category: '' })

async function fetchJobs() {
  loading.value = true
  const { data } = await getJobs({ ...filters, page: page.value })
  jobs.value = data.results
  total.value = data.count
  loading.value = false
}

onMounted(fetchJobs)
</script>
<style scoped>
.job-list-page { max-width: 900px; margin: 0 auto; }
.search-bar { margin-bottom: 20px; }
.result-count { color: #666; margin-bottom: 12px; }
</style>
