{% extends "../layout.html" %}

{% block title %}{{ columnInfo.name if columnInfo else '岗位管理' }}{% endblock %}

{% block content %}
<div id="jobApp">
  <el-card shadow="never">
    <template #header>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="font-medium">{{ columnInfo.name if columnInfo else '岗位管理' }}</span>
          <el-tag size="small">岗位管理</el-tag>
        </div>
        <el-button type="primary" @click="openDialog()">+ 发布岗位</el-button>
      </div>
    </template>

    <!-- 筛选栏 -->
    <div class="flex items-center gap-4 mb-4">
      <el-input v-model="query.keyword" placeholder="岗位名称..." style="width:180px;" clearable @keyup.enter="loadList"></el-input>
      <el-select v-model="query.status" placeholder="状态" style="width:110px;" clearable>
        <el-option label="招聘中" :value="1"></el-option>
        <el-option label="已关闭" :value="0"></el-option>
      </el-select>
      <el-button type="primary" @click="loadList">搜索</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="list" v-loading="loading" border>
      <el-table-column prop="name" label="岗位名称" min-width="140"></el-table-column>
      <el-table-column prop="department" label="部门" width="120"></el-table-column>
      <el-table-column prop="location" label="工作地点" width="100"></el-table-column>
      <el-table-column prop="count" label="人数" width="80" align="center"></el-table-column>
      <el-table-column prop="salary" label="薪资" width="120"></el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="row.status ? 'success' : 'info'" size="small">${ row.status ? '招聘中' : '已关闭' }</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="发布日期" width="120">
        <template #default="{ row }">
          ${ row.create_time?.slice(0, 10) }
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="openDialog(row)">编辑</el-button>
          <el-button type="danger" link size="small" @click="deleteItem(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="flex justify-end mt-4" v-if="total > pageSize">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:current-page="page" @current-change="loadList"></el-pagination>
    </div>
  </el-card>

  <!-- 新增/编辑弹窗 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="620px" destroy-on-close draggable top="5vh">
    <div class="dialog-scroll-body">
      <el-form :model="form" label-width="90px">
        <el-form-item label="岗位名称" required>
          <el-input v-model="form.name" placeholder="请输入岗位名称"></el-input>
        </el-form-item>
        <div class="flex gap-4">
          <el-form-item label="所属部门" required class="flex-1">
            <el-input v-model="form.department" placeholder="如：项目部"></el-input>
          </el-form-item>
          <el-form-item label="工作地点" required class="flex-1">
            <el-input v-model="form.location" placeholder="如：北京"></el-input>
          </el-form-item>
        </div>
        <div class="flex gap-4">
          <el-form-item label="招聘人数" class="flex-1">
            <el-input-number v-model="form.count" :min="1" style="width:100%;"></el-input-number>
          </el-form-item>
          <el-form-item label="薪资范围" class="flex-1">
            <el-input v-model="form.salary" placeholder="如：8K-12K / 面议"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="岗位职责" required>
          <el-input v-model="form.duty" type="textarea" :rows="4" placeholder="请输入岗位职责描述"></el-input>
        </el-form-item>
        <el-form-item label="任职要求" required>
          <el-input v-model="form.requirement" type="textarea" :rows="4" placeholder="请输入任职要求"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" active-text="招聘中" inactive-text="已关闭"></el-switch>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveItem" :loading="saving">保存</el-button>
    </template>
  </el-dialog>
</div>

<style>
.dialog-scroll-body { max-height: 65vh; overflow-y: auto; overflow-x: hidden; }
</style>
{% endblock %}

{% block js %}
<script>
const col = '{{ col }}';
const { createApp, ref, reactive, onMounted } = Vue;

const app = createApp({
  delimiters: ['${', '}'],
  setup() {
    const loading = ref(false);
    const list = ref([]);
    const total = ref(0);
    const page = ref(1);
    const pageSize = ref(20);
    const query = reactive({ keyword: '', status: '' });

    const dialogVisible = ref(false);
    const dialogTitle = ref('发布岗位');
    const saving = ref(false);

    const defaultForm = { id: null, name: '', department: '', location: '', count: 1, duty: '', requirement: '', salary: '', status: 1 };
    const form = reactive({ ...defaultForm });

    async function loadList() {
      loading.value = true;
      try {
        const params = new URLSearchParams({ col, page: page.value, pageSize: pageSize.value, ...query });
        const res = await fetch('/admin/content/job/list?' + params).then(r => r.json());
        if (res.code === 0) {
          list.value = res.data.data || [];
          total.value = res.data.count || 0;
        }
      } finally { loading.value = false; }
    }

    function resetQuery() {
      query.keyword = '';
      query.status = '';
      page.value = 1;
      loadList();
    }

    function openDialog(item) {
      if (item) {
        dialogTitle.value = '编辑岗位';
        Object.assign(form, {
          id: item.id, name: item.name, department: item.department || '',
          location: item.location || '', count: item.count || 1,
          duty: item.duty || '', requirement: item.requirement || '',
          salary: item.salary || '', status: item.status
        });
      } else {
        dialogTitle.value = '发布岗位';
        Object.assign(form, { ...defaultForm });
      }
      dialogVisible.value = true;
    }

    async function saveItem() {
      if (!form.name.trim()) { ElementPlus.ElMessage.warning('请输入岗位名称'); return; }
      if (!form.department.trim()) { ElementPlus.ElMessage.warning('请输入所属部门'); return; }
      if (!form.location.trim()) { ElementPlus.ElMessage.warning('请输入工作地点'); return; }
      if (!form.duty.trim()) { ElementPlus.ElMessage.warning('请输入岗位职责'); return; }
      if (!form.requirement.trim()) { ElementPlus.ElMessage.warning('请输入任职要求'); return; }

      saving.value = true;
      try {
        const url = form.id ? '/admin/content/job/edit' : '/admin/content/job/add';
        const body = { ...form, col };
        const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('保存成功');
          dialogVisible.value = false;
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '保存失败');
        }
      } finally { saving.value = false; }
    }

    async function deleteItem(item) {
      try {
        await ElementPlus.ElMessageBox.confirm('确定删除岗位"' + item.name + '"？', '提示', { type: 'warning' });
        const res = await fetch('/admin/content/job/delete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: item.id }) }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('删除成功');
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '删除失败');
        }
      } catch {}
    }

    onMounted(() => loadList());

    return {
      loading, list, total, page, pageSize, query,
      dialogVisible, dialogTitle, saving, form,
      loadList, resetQuery, openDialog, saveItem, deleteItem
    };
  }
});

app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
app.mount('#jobApp');
</script>
{% endblock %}