<template>
  <!-- 待投递列表下拉弹窗 -->
  <div class="agent-main__task-dropdown" @click.stop>
    <!-- Tab 切换 -->
    <div class="agent-main__task-tabs">
      <span
        class="agent-main__task-tab"
        :class="{ 'agent-main__task-tab--active': activeTab === 1 }"
        @click="switchTab(1)"
      >进行中（{{ pendingList.length }}）</span>
      <span
        class="agent-main__task-tab"
        :class="{ 'agent-main__task-tab--active': activeTab === 2 }"
        @click="switchTab(2)"
      >已完成（{{ completedList.length }}）</span>
    </div>
    <!-- 列表内容 -->
    <div class="agent-main__task-list">
      <template v-if="activeTab === 1">
        <div v-if="pendingList.length === 0" class="agent-main__task-empty">暂无进行中的岗位</div>
        <div v-for="job in pendingList" :key="job.id" class="agent-main__task-item">
          <div class="agent-main__task-item-left">
            <span class="agent-main__task-item-name">{{ (job.companyShortName || job.companyName) + '—' + job.title }}</span>
            <span class="agent-main__task-item-tag">自动投递</span>
          </div>
          <div class="agent-main__task-item-right">
            <span class="agent-main__task-item-status">未开始</span>
            <span class="agent-main__task-item-remove" @click="removeJob(job)">×</span>
          </div>
        </div>
      </template>
      <template v-else>
        <div v-if="loading" class="agent-main__task-empty">加载中...</div>
        <div v-else-if="completedList.length === 0" class="agent-main__task-empty">暂无已完成的岗位</div>
        <div v-for="job in completedList" :key="job.id" class="agent-main__task-item">
          <div class="agent-main__task-item-left">
            <span class="agent-main__task-item-name">{{ (job.companyShortName || job.companyName) + '—' + job.title }}</span>
            <span class="agent-main__task-item-tag">自动投递</span>
          </div>
          <div class="agent-main__task-item-right">
            <span class="agent-main__task-item-status agent-main__task-item-status--done">已完成</span>
          </div>
        </div>
      </template>
    </div>
    <!-- 查看全部 -->
    <div class="agent-main__task-view-all" @click="emit('viewAll')">查看全部</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { fetchAgentTaskList } from '@/api/jobs'
import { cancelApplyJob } from '@/api/agent'
import type { JobListItem } from '@/api/jobs'

// ==================== Props ====================

const props = defineProps<{
  /** 进行中列表（由父组件传入，保持同步） */
  pendingList: JobListItem[]
}>()

// ==================== 事件 ====================

const emit = defineEmits<{
  /** 移除岗位后通知父组件刷新列表 */
  (e: 'removed', jobId: string): void
  /** 查看全部 */
  (e: 'viewAll'): void
}>()

// ==================== 状态 ====================

/** 当前激活的 Tab（1=进行中 2=已完成） */
const activeTab = ref(1)

/** 已完成列表数据 */
const completedList = ref<JobListItem[]>([])

/** 加载状态 */
const loading = ref(false)

// ==================== 生命周期 ====================

onMounted(() => {
  // 打开时同时加载已完成列表
  loadCompletedList()
})

// ==================== 方法 ====================

/** 切换 Tab */
function switchTab(tab: number) {
  activeTab.value = tab
  if (tab === 2) {
    loadCompletedList()
  }
}

/** 加载已完成任务列表（tab=2） */
async function loadCompletedList() {
  loading.value = true
  try {
    const res = await fetchAgentTaskList({ pageNum: 1, pageSize: 100, tab: 2 })
    if (res.code === '0' && res.data) {
      completedList.value = res.data.list || []
    }
  } catch {
    console.error('[AgentTaskListDropdown] 加载已完成列表失败')
  } finally {
    loading.value = false
  }
}

/** 移除岗位 — 调用 cancelApplyJob 接口并通知父组件 */
async function removeJob(job: JobListItem) {
  try {
    await cancelApplyJob(Number(job.id))
    emit('removed', job.id)
    ElMessage.success('已移除')
  } catch {
    ElMessage.error('移除失败')
  }
}
</script>
