<template>
  <c-table :option="option">
    <template #menuLeft="{ record }">
      <!-- 传递 record.id 给 handleClick 方法 -->
      <button class="delivery-button" @click="handleClick(record.id)">简历</button>
    </template>
  </c-table>
  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel" fullscreen>
    <template #title> 简历审核 </template>
    <a-table :data-source="resumes" :columns="columns" bordered>
      <template #status="{ record }">
        <a-select v-model="record.status" :disabled="!record.isAuditing" placeholder="请选择状态">
          <a-option value="待审核">待审核</a-option>
          <a-option value="审核通过">审核通过</a-option>
          <a-option value="审核未通过">审核未通过</a-option>
        </a-select>
      </template>
      <template #action="{ record }">
        <a-button @click="handleAudit(record)">
          {{ record.isAuditing ? '保存审核结果' : '审核' }}
        </a-button>
      </template>
    </a-table>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import option from './option'
// 引入封装的接口方法
import { getResumesByPositionId } from '@/api/upms/position'

// 控制模态框显示隐藏的逻辑
const visible = ref(false)

// 初始写死的简历数据
const resumes = ref([])

// 表格列配置
const columns = [
  {
    title: '姓名',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '简历来源',
    dataIndex: 'status',
    key: 'status',
    slots: { customRender: 'status' }
  },
  {
    title: '附件',
    key: 'action',
    slots: { customRender: 'action' }
  },
  {
    title: '审核状态'
  },
  {
    title: '操作'
  }
]

// 查询岗位下的简历，接收 id 作为参数
const getResumeById = async (id: string) => {
  try {
    console.log('接收到的岗位id', id)
    const response = await getResumesByPositionId(id)
    console.log('岗位下的简历查询结果:', response)
    // 检查 response 是否为数组
    if (Array.isArray(response)) {
      resumes.value = response.map((item) => ({
        ...item,
        isAuditing: false,
        status: item.status || '待审核' // 确保有状态字段，默认待审核
      }))
    }
  } catch (error) {
    console.error('岗位下的简历查询失败:', error)
  }
}

// 接收 id 作为参数
const handleClick = async (id: string) => {
  visible.value = true
  // 调用 getResumeById 方法并传递 id
  await getResumeById(id)
}

const handleOk = () => {
  visible.value = false
}

const handleCancel = () => {
  visible.value = false
}

// 审核按钮点击事件
const handleAudit = (record) => {
  if (record.isAuditing) {
    console.log(`简历 ${record.id} 已审核，状态为：${record.status}`)

    record.isAuditing = false
  } else {
    record.isAuditing = true
  }
}
</script>

<style lang="scss">
.arco-modal-fullscreen {
  top: 20%;
  width: 60%;
  height: 60%;
}
</style>
