<template>
    <el-dialog v-model="info.show" title="选择推理任务" :close-on-press-escape="false" :close-on-click-modal="false"
        align-center append-to-body width="960px" modal-class="choice-task-dlg">
        <div style="margin-bottom: 10px;text-align: right;">
            <el-input v-model="queryParams.task_name" style="width:160px;margin-right:10px;" />
            <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
            <el-button @click="resetQuery">
                <i-ep-refresh />
                重置</el-button>
        </div>
        <el-table v-loading="info.loading" :data="info.tableData" stripe @row-click="doRowClick" max-height="400px">
            <el-table-column align="center" width="55" label="选择">
                <template #default="scope">
                    <el-checkbox v-if="info.mult" v-model="scope.row.checked" :label="scope.row.task_id + ''" 
                        :disabled="info.disTaskId==scope.row.task_id"
                    @change="handleChange(scope.row)"/>
                    <el-radio  v-else v-model="info.selData" :label="scope.row.task_id + ''" :disabled="info.disTaskId==scope.row.task_id"
                        @change="handleChange(scope.row)"/>
                </template>
            </el-table-column>
            <el-table-column label="任务名称" align="left" prop="task_name" />
            <el-table-column label="模型名称" align="left" prop="model_name" />
            <el-table-column label="模型子类型" align="left" prop="modl_sub_type" />
            <el-table-column label="连接名称" align="left" prop="connection_name" />
            <el-table-column label="推理数据集名称" align="left" prop="dataset_name"  />
            <el-table-column label="图片数量" align="left" prop="image_count"  />
            <el-table-column label="设备名称" align="left" prop="device_name"  />
            <el-table-column label="完成时间" align="left" prop="finish_time"  />
        </el-table>
        <pagination v-if="info.total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="loadData" />

        <template #footer>
            <div style="text-align: center">
                <el-button type="primary" @click="doOk">确定</el-button>
                <el-button @click="doCancel">取消</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup>
import TaskApi from '@/api/task'

let info = reactive({
    loading: false,
    show: false,
    data: null,
    total: 0,
    selData: "",
    tableData: [],
    showItem: null,
    showJsonDlg: false,
    disTaskId:'',
    mult:false
});
let queryParams = reactive({
    task_name: '',
    pageNum: 1,
    pageSize: 10,
});
const emit = defineEmits(["success"]);
const doRowClick = (row) => {
    if(row.task_id!=info.disTaskId){
        if(info.mult){
            row.checked=!row.checked;
        }else{
            info.selData = row.task_id + "";
        }
    }
}


const doOk = () => {
    if(!info.mult){
        if (info.selData) {
            let items = info.tableData.filter(d => d.task_id == info.selData);
            if (items.length > 0) {
                emit("success", items);
                info.show = false;
                return;
            }
        }
        ElMessage.error("请选择任务!");
    }else{
        let tmps=info.tableData.filter(d=>d.checked);
        if(tmps.length>0){
            emit("success",tmps);
            info.show=false;
        }else{
            ElMessage.error("请选择任务!");
        }
    }
}
const doCancel = () => {
    info.show = false;
}
const showDialog = (opt) => {    
    info.show = true;
    info.data = opt;
    info.selData = opt.taskId||'';
    info.disTaskId=opt.disTaskId;
    info.mult=opt.mult;
    resetQuery();
}
function resetQuery() {
    queryParams.task_name = "";
    queryParams.pageNum = 1;
    loadData();
}
function handleQuery() {
    queryParams.pageNum = 1;
    loadData();
}
const loadData = () => {
    info.loading = true;
    TaskApi.tasks(queryParams).then(d => {
        info.loading = false;
        info.total = d.data.data.total || 0;
        info.tableData = (d.data.data.task_list || []).map(it=>{
            it.checked=false;
            return it;
        });
    })
}
defineExpose({
    showDialog
})
</script>
<style lang="scss">
.choice-task-dlg{
    .el-radio__label,.el-checkbox__label{
        display: none;
    }
}
</style>