<template>
    <el-card style="margin-top:12px;position: relative;" class="simulation-add-add-step4">            
            <template #header>
            <span>数据集列表</span>
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" style="flex-grow: 1;text-align: right;position: absolute;top:4px;right:0px;">
            <el-form-item label="" prop="keywords">
            <el-input v-model="queryParams.keywords" placeholder="请输入数据集名称" clearable style="width: 250px" />
            </el-form-item>        
            <el-form-item>
            <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>           
            </el-form-item>
        </el-form>
            </template>
            <el-table v-loading="loading" :data="tableData" stripe @row-click="doRowClick">
            <el-table-column align="center" width="55" label="选择">
                <template #default="scope">
                    <el-radio v-model="datasSelection" :label="scope.row.id + ''"
                        @change="handleChange(scope.row)">&nbsp;</el-radio>
                </template>
            </el-table-column>
            <el-table-column label="数据集名称" align="left" prop="datasName" />
            <el-table-column label="版本" align="left" prop="ver" width="80"/>
            <el-table-column label="数据集说明" align="left" prop="desc"  />

            <el-table-column label="适用任务类型" align="left" prop="planType" />
            <el-table-column label="图片数量" align="left" prop="imgCount" width="120" />            
            <el-table-column label="图片格式" width="120" align="left" prop="imgFmt" />
            <el-table-column label="创建时间"  align="left" prop="createTime" />           

        </el-table>
        <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>
</template>

<script setup>
const datasSelection = ref("")//单选id
const loading=ref(false)
const queryFormRef=ref()
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  keywords:''
});


const total=ref(100)
/** 查询 */
function handleQuery(a) {
  queryParams.pageSize=a.limit;  
  ElMessage.success("查询成功");
}


const handleChange = (row) => {
    datasSelection.value = row.id + "";
}
const doRowClick=(row,col,sel)=>{
    datasSelection.value=row.id+"";
}
let tableData=reactive([
    {id:"1",datasName:"人员检测数据集1",ver:'V1',desc:'一些数据集说明',planType:'图像检测',imgCount:435566,imgFmt:'RGB24',createTime:'2024-06-09 18:32:13'},
    {id:"2",datasName:"人员检测数据集2",ver:'V1',desc:'一些数据集说明',planType:'图像检测',imgCount:435566,imgFmt:'RGB24',createTime:'2024-06-09 18:32:13'},
    {id:"3",datasName:"人员检测数据集3",ver:'V1',desc:'一些数据集说明',planType:'图像检测',imgCount:435566,imgFmt:'RGB24',createTime:'2024-06-09 18:32:13'},
    {id:"4",datasName:"人员检测数据集4",ver:'V1',desc:'一些数据集说明',planType:'图像检测',imgCount:435566,imgFmt:'RGB24',createTime:'2024-06-09 18:32:13'},
    {id:"5",datasName:"人员检测数据集5",ver:'V1',desc:'一些数据集说明',planType:'图像检测',imgCount:435566,imgFmt:'RGB24',createTime:'2024-06-09 18:32:13'},
])

const checkForm=()=>{
    if(datasSelection.value){
        let tmps=tableData.filter(d=>d.id==datasSelection.value);
        return tmps.length>0?tmps[0]:null;
    }
    return null;
};
defineExpose({
    checkForm
})
</script>
<style lang='scss'>
</style>