<template>
    <el-dialog :title="title" v-model="dialogFormVisible">
    <el-form :model="form">
        <el-form-item label="任务名称" :label-width="formLabelWidth">
        <el-input v-model="form.job_name" autocomplete="off" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="选择队列" :label-width="formLabelWidth">
        <el-select v-model="form.selectedQueue" placeholder="请选择任务的新队列">
            <template v-for="queue in props.queue_data">
                <el-option :label="queue.title" :value="queue.id"></el-option>
            </template>

        </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer">
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
    </div>
</el-dialog>

</template>


<script setup lang="ts">


import { readonly, ref } from 'vue'
import {  putQueueJob } from '@/api/AgentApi'
import type { JobData } from '@/api/AgentApi'
const dialogFormVisible = ref(false)
const formLabelWidth= ref('120px')
const form = ref({
  job_id: 0,
  job_category: '',
  job_name: '',
  queue_category: '',
  queue_name: '',
  selectedQueue: '',
})
const props = defineProps({
    title: { type: String, required: true , default: '工作'},
    queue_data: { type: Object, required: true, default: {id:"0",  queue_category:"", queue_name:""}}
})
const emit = defineEmits(['update:modelValue','success','cancel'])
const showDialog = (data:JobData, visible:boolean = true) => {
    console.log("OCRDialog showDialog")
    dialogFormVisible.value = visible
    if (data == null) {
      return
    }
    form.value.job_name = data.job_name;
    form.value.job_category = data.job_category;
    form.value.job_id = data.id;
}
const handleConfirm = () => {
    console.log('submit', form.value)
    props.queue_data.forEach(element => {
        if (element.id == form.value.selectedQueue) {
            form.value.queue_category = element.category;
            form.value.queue_name = element.name; 
        }
    });


    var params = { job_id: form.value.job_id, queue_category: form.value.queue_category, queue_name: form.value.queue_name }
    
    putQueueJob(params).then((res:any) => {
        emit('success', res.records[0])
    })
}
defineExpose({ showDialog })
</script>