<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: any) => {
        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>