<template>
    <div>drag<div id="tree"></div>
    </div>
</template>
<script>
export default {
  name: 'formula/fmDragTree', // keep-alive를 위해 필수!
}
</script>
<script setup>//https://wwwendt.de/tech/fancytree/demo/#sample-ext-dnd5.html
import { ref, onMounted } from 'vue';
onMounted(() => {
    $('#tree').fancytree({
        extensions: ["dnd5"],
        checkbox: true,
        selectMode: 3,
        source: [
            // Typically we would load using ajax instead...
            { title: 'Node 1' },
            { title: 'Node 2' },
            {
                title: 'Folder 3',
                folder: true,
                expanded: true,
                children: [
                    { title: 'Node 3.1', key: 'id3.1' },
                    { title: 'Node 3.2', selected: true },
                ],
            },
            {
                title: 'Folder 4',
                folder: true,
                children: [{ title: 'Node 4.1' }, { title: 'Node 4.2' }],
            },
        ],
        dnd5: {
            // autoExpandMS: 400,
            // preventForeignNodes: true,
            // preventNonNodes: true,
            preventRecursion: true, // Prevent dropping nodes on own descendants
            // preventSameParent: true,
            preventVoidMoves: true, // Prevent moving nodes 'before self', etc.
            // effectAllowed: "all",
            // dropEffectDefault: "move", // "auto",

            // --- Drag-support:
            dragStart: function (node, data) {
                /* This function MUST be defined to enable dragging for the tree.
                  *
                  * Return false to cancel dragging of node.
                  * data.dataTransfer.setData() and .setDragImage() is available
                  * here.
                  */

                console.log("T1: dragStart: " + "data: " + data.dropEffect + "/" + data.effectAllowed +
                    ", dataTransfer: " + data.dataTransfer.dropEffect + "/" + data.dataTransfer.effectAllowed, data);

                // Set the allowed effects (i.e. override the 'effectAllowed' option)
                data.effectAllowed = "all";

                // Set a drop effect (i.e. override the 'dropEffectDefault' option)
                // data.dropEffect = "link";
                data.dropEffect = "copy";

                // We could use a custom image here:
                // data.dataTransfer.setDragImage($("<div>TEST</div>").appendTo("body")[0], -10, -10);
                // data.useDefaultImage = false;

                // Return true to allow the drag operation
                return true;
            },
            // dragDrag: function(node, data) {
            //   logLazy("dragDrag", null, 2000,
            //     "T1: dragDrag: " + "data: " + data.dropEffect + "/" + data.effectAllowed +
            //     ", dataTransfer: " + data.dataTransfer.dropEffect + "/" + data.dataTransfer.effectAllowed );
            // },
            // dragEnd: function(node, data) {
            //   node.debug( "T1: dragEnd: " + "data: " + data.dropEffect + "/" + data.effectAllowed +
            //     ", dataTransfer: " + data.dataTransfer.dropEffect + "/" + data.dataTransfer.effectAllowed, data);
            //     alert("T1: dragEnd")
            // },

            // --- Drop-support:
            dragEnter: function (node, data) {
                node.debug("T1: dragEnter: " + "data: " + data.dropEffect + "/" + data.effectAllowed +
                    ", dataTransfer: " + data.dataTransfer.dropEffect + "/" + data.dataTransfer.effectAllowed, data);

                // data.dropEffect = "copy";
                return true;
            },


            dragOver: function (node, data) {
                console.log("dragOver", null, 2000,
                    "T1: dragOver: " + "data: " + data.dropEffect + "/" + data.effectAllowed +
                    ", dataTransfer: " + data.dataTransfer.dropEffect + "/" + data.dataTransfer.effectAllowed);

                // Assume typical mapping for modifier keys
                data.dropEffect = data.dropEffectSuggested;
                // data.dropEffect = "move";
            },
            dragDrop: function (node, data) {
                /* This function MUST be defined to enable dropping of items on
                  * the tree.
                  */
                var newNode,
                    transfer = data.dataTransfer,
                    sourceNodes = data.otherNodeList,
                    mode = data.dropEffect;

                node.debug("T1: dragDrop: effect=" + "data: " + data.dropEffect + "/" + data.effectAllowed +
                    ", dataTransfer: " + transfer.dropEffect + "/" + transfer.effectAllowed, data);

                alert("Drop on " + node + ":\n"
                    + "source:" + JSON.stringify(data.otherNodeData) + "\n"
                    + "hitMode:" + data.hitMode
                    + ", dropEffect:" + data.dropEffect
                    + ", effectAllowed:" + data.effectAllowed);

                if (data.hitMode === "after") {
                    // If node are inserted directly after tagrget node one-by-one,
                    // this would reverse them. So we compensate:
                    sourceNodes.reverse();
                }
                if (data.otherNode) {
                    // Drop another Fancytree node from same frame (maybe a different tree however)
                    var sameTree = (data.otherNode.tree === data.tree);

                    if (mode === "move") {
                        data.otherNode.moveTo(node, data.hitMode);
                    } else {
                        newNode = data.otherNode.copyTo(node, data.hitMode);
                        if (mode === "link") {
                            newNode.setTitle("Link to " + newNode.title);
                        } else {
                            newNode.setTitle("Copy of " + newNode.title);
                        }
                    }
                } else if (data.otherNodeData) {
                    // Drop Fancytree node from different frame or window, so we only have
                    // JSON representation available
                    node.addChild(data.otherNodeData, data.hitMode);
                } else if (data.files.length) {
                    // Drop files
                    for (var i = 0; i < data.files.length; i++) {
                        var file = data.files[i];
                        node.addNode({ title: "'" + file.name + "' (" + file.size + " bytes)" }, data.hitMode);
                        // var url = "'https://example.com/upload",
                        //     formData = new FormData();

                        // formData.append("file", transfer.files[0])
                        // fetch(url, {
                        //   method: "POST",
                        //   body: formData
                        // }).then(function() { /* Done. Inform the user */ })
                        // .catch(function() { /* Error. Inform the user */ });
                    }
                } else {
                    // Drop a non-node
                    node.addNode({ title: transfer.getData("text") }, data.hitMode);
                }
                node.setExpanded();
            },
        }, lazyLoad: function (event, data) {
           // data.result = { url: "ajax-sub2.json" };
        },

        activate: function (event, data) {
            // $('#statusLine').text(event.type + ': ' + data.node);
        },
        select: function (event, data) {
            $('#statusLine').text(
                event.type + ': ' + data.node.isSelected() + ' ' + data.node
            );
        },
    });
});
</script>

<style>
.fancytree-container {
    outline: none;
}

span.drag-source {
    border: 1px solid grey;
    border-radius: 3px;
    padding: 2px;
    background-color: silver;
}

ul.fancytree-container {
    max-height: 200px;
    overflow-y: scroll;
    width: 48%;
    display: inline-block;
}

#tree ul.fancytree-container {
    float: left;
}

span.fancytree-node.fancytree-drag-source {
    outline: 1px dotted grey;
}

span.fancytree-node.fancytree-drop-accept {
    outline: 1px dotted green;
}

span.fancytree-node.fancytree-drop-reject {
    outline: 1px dotted red;
}

span.trashcan {
    border: 1px solid #f5c6cb;
    background-color: #f8d7da;
    color: #721c24;
    padding: 1px 3px;
}
</style>