<template>
  <div class="admin-cms-page">
    <section class="admin-page-hero"><div><span class="admin-eyebrow">RECRUIT</span><h2>招聘管理</h2><p>管理加入我们页面展示的职位、要求、负责人和上下架状态。</p></div><button class="primary-button admin-primary-action" type="button" @click="openForm()">新增职位</button></section>
    <AdminTablePage eyebrow="JOBS" title="职位列表" description="职位保存后可被加入我们页面读取展示。" :columns="columns" :rows="rows" :loading="loading" :status-options="statusOptions" @refresh="load" @edit="openForm" />
    <section class="admin-edit-panel"><div><span class="admin-eyebrow">EDITOR</span><h3>{{ form.id ? '编辑职位' : '新增职位' }}</h3></div><form @submit.prevent="save">
      <label><span>职位名称</span><input v-model="form.title" class="form-input" /></label><label><span>部门</span><input v-model="form.department" class="form-input" /></label><label><span>职位类型</span><input v-model="form.job_type" class="form-input" /></label><label><span>城市</span><input v-model="form.city" class="form-input" /></label><label><span>薪资</span><input v-model="form.salary" class="form-input" /></label><label><span>经验</span><input v-model="form.experience" class="form-input" /></label>
      <label class="full"><span>职位描述</span><textarea v-model="form.description" class="form-input" rows="3"></textarea></label><label class="full"><span>岗位要求（一行一个）</span><textarea v-model="requirementsText" class="form-input" rows="5"></textarea></label>
      <label><span>负责人</span><input v-model="form.manager" class="form-input" /></label><label><span>负责人职位</span><input v-model="form.manager_title" class="form-input" /></label><label><span>邮箱</span><input v-model="form.email" class="form-input" type="email" /></label><label><span>电话</span><input v-model="form.phone" class="form-input" type="tel" /></label><label><span>状态</span><select v-model.number="form.status" class="form-input"><option :value="1">上架</option><option :value="0">下架</option></select></label><label><span>重点招聘</span><select v-model="form.featured" class="form-input"><option :value="true">是</option><option :value="false">否</option></select></label>
      <button class="primary-button" type="submit">保存职位</button>
    </form></section>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import AdminTablePage from './AdminTablePage.vue'
import { getAdminRecruitJobs, saveAdminRecruitJob } from '@/api/request/site'
const columns = [{ key: 'title', label: '职位名称' }, { key: 'department', label: '部门' }, { key: 'job_type', label: '类型', type: 'tag' }, { key: 'city', label: '城市' }, { key: 'salary', label: '薪资' }, { key: 'featured', label: '重点', type: 'bool' }, { key: 'status', label: '状态', type: 'tag', map: { 1: '上架', 0: '下架' } }]
const statusOptions = [{ label: '上架', value: '1' }, { label: '下架', value: '0' }]
const rows = ref([]), loading = ref(false), requirementsText = ref('')
const form = reactive({ id: 0, title: '', department: '', job_type: '全职', city: '杭州', salary: '', experience: '', description: '', requirements: [], manager: '', manager_title: '', email: '', phone: '', featured: false, status: 1, sort: 0 })
const openForm = (row = {}) => { Object.assign(form, { id: 0, title: '', department: '', job_type: '全职', city: '杭州', salary: '', experience: '', description: '', requirements: [], manager: '', manager_title: '', email: '', phone: '', featured: false, status: 1, sort: 0 }, row); requirementsText.value = (form.requirements || []).join('\n') }
const load = async () => { loading.value = true; rows.value = await getAdminRecruitJobs().catch(() => []); loading.value = false }
const save = async () => { form.requirements = requirementsText.value.split('\n').map(item => item.trim()).filter(Boolean); const saved = await saveAdminRecruitJob({ ...form }); openForm(saved); await load() }
onMounted(load)
</script>
