<template>
  <el-dialog
    v-model="dialogVisible"
    title="批量操作"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form :model="form" label-width="100px">
     <!--  <el-form-item label="操作类型">
        <el-select v-model="form.operationType" placeholder="请选择操作类型" style="width: 100%">
          <el-option label="修改状态" value="status"></el-option>
          <el-option label="添加标签" value="tags"></el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item v-if="form.operationType === 'status'" label="状态">
        <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
          <el-option label="待处理" :value="0"></el-option>
          <el-option label="已通知面试" :value="1"></el-option>
          <el-option label="已面试" :value="2"></el-option>
          <el-option label="已录用" :value="3"></el-option>
          <el-option label="已拒绝" :value="4"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="form.operationType === 'tags'" label="标签">
        <el-select
          v-model="form.tags"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请选择或创建标签"
          style="width: 100%"
        >
          <el-option
            v-for="tag in tagOptions"
            :key="tag.value"
            :label="tag.label"
            :value="tag.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { updateBatchStatus } from '../api';
import { Session } from '/@/utils/storage';

const props = defineProps({
  crudExpose: {
    type: Object,
    required: true
  }
});

const dialogVisible = ref(false);
const loading = ref(false);
const selectedItems = ref([]);

const form = reactive({
  operationType: 'status',
  status: undefined,
  tags: []
});

// 标签选项，可以根据实际需求从API获取
const tagOptions = ref([
  { value: '优质候选人', label: '优质候选人' },
  { value: '有经验', label: '有经验' },
  { value: '应届毕业生', label: '应届毕业生' },
  { value: '技能熟练', label: '技能熟练' }
]);

// 打开对话框
const open = (selection: any) => {
  if (!selection || selection.length === 0) {
    ElMessage.warning('请至少选择一条记录');
    return;
  }
  
  selectedItems.value = selection;
  dialogVisible.value = true;
  
  // 重置表单
  form.operationType = 'status';
  form.status = undefined;
  form.tags = [];
};

// 提交处理
const handleSubmit = async () => {
  
  if (form.operationType === 'tags' && (!form.tags || form.tags.length === 0)) {
    ElMessage.warning('请至少选择一个标签');
    return;
  }
  
  try {
    loading.value = true;
    const application_ids = selectedItems.value.map((item: any) => item.id);
    
    if (form.operationType === 'status') {
      await updateBatchStatus({
        application_ids,
        new_status: form.status,
        tenant_id:Session.get('tenant_id')
      });
      ElMessage.success('批量更新状态成功');
    } /* else if (form.operationType === 'tags') {
      await updateBatchTags({
        ids,
        tags: form.tags
      });
      ElMessage.success('批量更新标签成功');
    } */
    
    // 关闭对话框
    dialogVisible.value = false;
    
    // 刷新列表
    props.crudExpose.doRefresh();
  } catch (error) {
    console.error('批量操作失败:', error);
    ElMessage.error('操作失败，请重试');
  } finally {
    loading.value = false;
  }
};

// 暴露方法给父组件
defineExpose({
  open
});
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
