<template>
    <div class="node-panel">
        <el-tabs type="border-card">
            <el-tab-pane label="前处理算子">
                <div v-for="(it1, idx1) in info.list1" :key="idx1" class="div-item" @mousedown="dragNode(it1, 1)"
                    v-show="it1.show">
                    {{ it1.text }}
                </div>
            </el-tab-pane>
            <el-tab-pane label="后处理算子">
                <div v-for="(it2, idx2) in info.list2" :key="idx2" class="div-item item2" @mousedown="dragNode(it2, 2)"
                    v-show="it2.show">
                    {{ it2.text }}
                </div>
            </el-tab-pane>
            <el-tab-pane label="数据源算子">
                <div v-for="(it2, idx2) in info.list3" :key="idx2" class="div-item item3" @mousedown="dragNode(it2, 3)"
                    v-show="it2.show">
                    {{ it2.text }}
                </div>
            </el-tab-pane>
            <el-tab-pane label="数据报告算子">
                <div v-for="(it2, idx2) in info.list4" :key="idx2" class="div-item item4" @mousedown="dragNode(it2, 4)"
                    v-show="it2.show">
                    {{ it2.text }}
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import OperApi from '@/api/operator'
const props = defineProps({
    lf: {
        type: Object,
        require: true,
        default: null
    }
})
const dragNode = (it, t) => {
    let color = '#409effaa';
    if (t == 2) {
        color = '#ccccccaa';
    }
    if (t == 3) {
        color = '#038181aa';
    }
    if (t == 4) {
        color = '#eeb806aa';
    }
    props.lf.dnd.startDrag({
        type: 'ai-node',
        text: it.text,
        fill: color,
        properties: {
            node: it.id,
            data:it
        }
    })
}
const info = reactive({
    list1: [],
    list2: [],
    list3: [],
    list4: []
})
const list1 = reactive([
    { text: "图像缩放", id: 201, show: true },
    { text: "RGB12图像格式转换", id: 202, show: true },
    { text: "RGB24图像格式转换", id: 203, show: true },
    { text: "RGB36图像格式转换", id: 204, show: true },
    { text: "RGB48图像格式转换", id: 205, show: true },
    { text: "RGB72图像格式转换", id: 206, show: true }
])

const list2 = reactive([
    { text: "VIT推理算子1", id: 301, show: true },
    { text: "VIT推理算子2", id: 302, show: true },
    { text: "VIT后处理算子1", id: 303, show: true },
    { text: "VIT后处理算子2", id: 304, show: true },
    { text: "VIT后处理算子3", id: 305, show: true },
]);

const updateNode = (nodes) => {
    let nds = nodes.nodes.map(d => d.properties.node);
    list2.forEach(d => {
        d.show = nds.indexOf(d.id) == -1
    })
    list1.forEach(d => {
        d.show = nds.indexOf(d.id) == -1
    })
}

const doEdit=(nd)=>{
    debugger
    let tmps=info.all.filter(d=>d.id==nd.id);
    if(tmps.length>0){
        tmps[0].inputParams=nd.inputParams;
        tmps[0].outputParams=nd.inputParams;
    }
}
defineExpose({
    updateNode,
    doEdit,     
})

const initData = () => {
    OperApi.list().then(d => {
        let tmps = (d.data?.data?.operator_list || []).map(it => {
            it.show = true;
            it.text = it.operator_name;
            it.id = it.operator_id
            it.inputParams="";
            it.outputParams="";
            return it;
        });
        info.all=tmps;
        info.list1 = tmps.filter(d => d.oper_main_type == "pre_process");
        info.list2 = tmps.filter(d => d.oper_main_type == "post_process");
        info.list3 = tmps.filter(d => d.oper_main_type == "data_source");
        info.list4 = tmps.filter(d => d.oper_main_type == "data_report");
    });
}
onMounted(() => {
    initData();
});

</script>
<style lang='scss'>
.node-panel {
    .el-tabs__item {
        padding: 0px 8px !important;
    }

    .div-item {
        font-size: 12px;
        border: solid 1px #888;
        margin: 0px 40px 10px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
        background: #409effaa;
        user-select: none;
        cursor: move;

        &.item2 {
            background: #ccccccaa;
        }

        &.item3 {
            background: #038181aa;
        }

        &.item4 {
            background: #eeb806aa;
        }
    }
}
</style>