<template>
    <div class="node-panel">
        <el-tabs type="border-card">
            <el-tab-pane label="前处理算子">
                <div v-for="(it1, idx1) in 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 list2" :key="idx2" class="div-item item2" @mousedown="dragNode(it2, 2)"  v-show="it2.show">
                    {{ it2.text }}
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
const props = defineProps({
    lf: {
        type: Object,
        require: true,
        default: null
    }
})
const dragNode = (it, t) => {
    props.lf.dnd.startDrag({
        type: 'ai-node',
        text: it.text,
        fill: t == 1 ? '#409effaa' : '#ccccccaa',
        properties:{
          node:it.id
        }
    })
}

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: 301,show:true },
    { text: "VIT后处理算子1", id: 301,show:true },
    { text: "VIT后处理算子2", id: 301,show:true },
    { text: "VIT后处理算子3", id: 301,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
    })
}

defineExpose({
    updateNode
})

</script>
<style lang='scss'>
.node-panel {
    .div-item {
        font-size: 12px;
        border: solid 1px #888;
        margin-bottom: 10px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
        background: #409effaa;
        user-select: none;
        cursor: move;

        &.item2 {
            background: #ccccccaa;
        }
    }
}
</style>