<template>
    <div>
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item v-for="(item, index) in collapseList" :title="item.collapseTitle" :name="index" class="collapseItem">
                <!-- node.type -->
                <div v-for="node in item.nodeList" class="node" draggable="true" @dragstart="handleDragCustom($event, node)">
                    <div class="title_container">
                        <img class="title_img" :src="node.icon" alt="">
                        {{ node.name }}
                    </div>
                    <div class="node_desc">{{ node.desc }}</div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { collapseList } from '../config'

const activeName = ref(0)

const handleDragCustom = (event, node) => {
    // event.dataTransfer.setData("nodeType", type);
    event.dataTransfer.setData("flowNode", JSON.stringify(node));
}
</script>
<style lang="scss" scoped>
:deep(.collapseItem) {
    .el-collapse-item__header {
        padding-left: 20px;
        font-size: 14px;
    }
    .el-collapse-item__wrap {
        background-color: transparent;

        .el-collapse-item__content {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 0;

            .node {
                width: 220px;
                height: auto;
                min-height: 80px;
                background: #fffc;
                border-radius: 8px;
                margin: 12px 0;
                box-shadow: 0 5px 15px rgba(0,0,0,3%);

                .title_container {
                    display: flex;
                    align-items: center;
                    height: 40px;
                    padding: 8px 12px;
                    margin-top: 4px;
                    font-size: 14px;
                    color: #0c0d0e;

                    .title_img {
                        width: 24px;
                        margin-right: 12px;
                    }
                }
                
                .node_desc {
                    padding: 0 12px;
                    font-size: 12px;
                    color: #737a87;
                }
            }
        }
    }
}
</style>