<template>
    <div class="editableTree fsize-m6">
        <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
        </el-input>
        <div class="wrap-tree">
            <el-tree
                    ref="tree"
                    :data="newData"
                    :filter-node-method="filterNode"
                    :node-key="nodeKey"
                    :default-expanded-keys="stDefaultExpandedKeys"
                    @node-drag-start="handleDragStart"
                    @node-drag-enter="handleDragEnter"
                    @node-drag-leave="handleDragLeave"
                    @node-drag-over="handleDragOver"
                    @node-drag-end="handleDragEnd"
                    @node-drop="handleDrop"
                    @node-click="handleNodeClick"
                    @node-expand="handleNodeExpand"
                    @node-collapse="handleNodeCollapse"
                    :draggable="treeDraggable"
                    :allow-drag="allowDrag"
                    :allow-drop="allowDrop"
                    :highlight-current="true"
                    :expand-on-click-node="false">
                <div class="custom-tree-node" slot-scope="{ node, data }">
                    <editor-tree-item
                            :node="node"
                            :data="data"
                            @labelClick="handleLabelClick"
                            @treeItemAppend="treeAppend"
                            @treeItemRemove="treeRemove"
                            @changeDragState="changeDragState"
                            @treeItemEditor="getTreeItemEditor">
                    </editor-tree-item>
                </div>
            </el-tree>
        </div>
    </div>
</template>

<script>
    import EditorTreeItem               from '@/components/management/Layout/EditableTreeOrg/EditableTreeItem.vue';

    export default {
        name:       'EditableTree',
        components: {
            EditorTreeItem,
        },
        props:      {
            nodeKey:         {
                type:    String,
                default: 'id',
            },
            newData:         {
                // 树的数据
                type:    Array,
                default: () => arr,
            },
            draggable:         {
                // 树的数据
                type:    Boolean,
                default: true,
            },
            expandedKeys:    {
                // 树的数据
                type:    Array,
                default: () => [],
            },
        },
        watch:      {
            newData: {
                handler(newVal, oldVal) {
                    console.log('handler', this.expandedKeys);
                    this.setExpanded(newVal, this.expandedKeys);
                },
            },
            filterText(val) {
                this.$refs.tree.filter(val);
            },
        },
        data() {
            return {
                input:         '',
                startData:     '',
                showItem:      true,
                treeDraggable: this.draggable,
                filterText:    '',
                stDefaultExpandedKeys: [],
            };
        },
        methods:    {
            changeDragState(b) {
                this.treeDraggable = b;
            },
            filterNode(value, data) {
                // console.log('filter =>', value, data, this.newData);
                if (!value) {
                    return true;
                }
                return data.lable.indexOf(value) !== -1;
            },
            handleLabelClick(data) {
                this.$refs.tree.setCurrentKey(data.data.id);
                this.$emit('handleClick', data);
            },
            handleNodeClick(data, Node, self) {
                /*const opt = {data, Node, self};
                this.$emit('handleClick', opt);*/
            },
            handleDragStart(node, ev) {
                this.startData = node;
            },
            handleDragEnter(draggingNode, dropNode, ev) {
            },
            handleDragLeave(draggingNode, dropNode, ev) {
            },
            handleDragOver(draggingNode, dropNode, ev) {
            },
            handleDragEnd(draggingNode, dropNode, dropType, ev) {
            },
            // 拖拽放置时触发
            handleDrop(draggingNode, dropNode, dropType, ev) {
                this.$emit('handleDrop', dropNode, draggingNode, dropType, ev, this.startData);
            },
            // 编辑事件回调触发
            getTreeItemEditor(data) {
                this.$emit('treeEditor', data);
            },
            // 新增事件回调触发
            treeAppend(data) {
                this.$emit('treeAppend', data);
            },
            // 删除事件回调触发
            treeRemove(node, data) {
                this.$emit('treeRemove', node);
            },
            setExpanded(treeData, expandedKeys) {
                function setTreeChildeExpanded(children, that) {
                    for (const child of children) {
                        if (expandedKeys.indexOf(child[that.nodeKey]) > -1) {
                            that.stDefaultExpandedKeys.push(child[that.nodeKey]);
                        }
                        if (child.children) {
                            setTreeChildeExpanded(child.children, that);
                        }
                    }
                }

                // default expand;
                if (!expandedKeys || expandedKeys.length === 0) {
                    for (const treeDataItem of treeData) {
                        this.stDefaultExpandedKeys.push(treeDataItem[this.nodeKey]);
                    }
                } else if (Array.isArray(expandedKeys)) {
                    for (const treeDataItem of treeData) {
                        this.stDefaultExpandedKeys.push(treeDataItem[this.nodeKey]);
                        if (treeDataItem.children) {
                            setTreeChildeExpanded(treeDataItem.children, this);
                        }
                    }
                }
            },
            pushExpandedKey(expandedKeys, id) {
                if (expandedKeys.indexOf(id) === -1) {
                    expandedKeys.push(id);
                }
            },
            allowDrag(node) {
                if (node.data.isConstant && node.data.isConstant === true) {
                    return true;
                } else {
                    return false;
                }
            },
            allowDrop(draggingNode, dropNode, type) {
                // console.log(draggingNode, dropNode, type);
                if (draggingNode.data.isConstant && draggingNode.data.isConstant === true
                    && dropNode.data.isConstant && dropNode.data.isConstant === true) {
                    return true;
                } else if (draggingNode.data.isRoot && draggingNode.data.isRoot === true
                    && dropNode.data.isRoot && dropNode.data.isRoot === true) {
                    return false;
                } else {
                    return false;
                }
            },
            setCurrentKey(id) {
                this.$refs.tree.setCurrentKey(id);
            },
            handleNodeExpand(data) {
                this.$emit('syncExpandedKeys', {
                    data:     data,
                    isExpand: true,
                });
            },
            handleNodeCollapse(data) {
                this.$emit('syncExpandedKeys', {
                    data:     data,
                    isExpand: false,
                });
            },
        },
        computed:   {
        },
        created() {
            this.setExpanded(this.newData, this.stDefaultExpandedKeys);
        }
    };
</script>

