<script>
/* eslint no-console:0 */
import './draggable.less';
import Tree, { TreeNode } from '@/../node_modules/ant-design-vue/lib/index';
import '@/../node_modules/ant-design-vue/lib/assets/index.less';
import { gData } from './util';
import BaseMixin from '@/../node_modules/ant-design-vue/lib/_util/BaseMixin';

export default {
    mixins: [BaseMixin],
    data() {
        return {
            gData,
            autoExpandParent: true,
            expandedKeys: ['0-0-key', '0-0-0-key', '0-0-0-0-key']
        };
    },
    methods: {
        onDragStart(info) {
            console.log('start', info);
        },
        onDragEnter(info) {
            console.log('enter', info);
            this.setState({
                expandedKeys: info.expandedKeys
            });
        },
        onDrop(info) {
            console.log('drop', info);
            const dropKey = info.node.eventKey;
            const dragKey = info.dragNode.eventKey;
            const dropPos = info.node.pos.split('-');
            const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
            // const dragNodesKeys = info.dragNodesKeys;
            const loop = (data, key, callback) => {
                data.forEach((item, index, arr) => {
                    if (item.key === key) {
                        return callback(item, index, arr);
                    }
                    if (item.children) {
                        return loop(item.children, key, callback);
                    }
                });
            };
            const data = [...this.gData];
            let dragObj;
            loop(data, dragKey, (item, index, arr) => {
                arr.splice(index, 1);
                dragObj = item;
            });
            if (info.dropToGap) {
                let ar;
                let i;
                loop(data, dropKey, (item, index, arr) => {
                    ar = arr;
                    i = index;
                });
                if (dropPosition === -1) {
                    ar.splice(i, 0, dragObj);
                } else {
                    ar.splice(i + 1, 0, dragObj);
                }
            } else {
                loop(data, dropKey, item => {
                    item.children = item.children || [];
                    // where to insert 示例添加到尾部，可以是随意位置
                    item.children.push(dragObj);
                });
            }
            this.setState({
                gData: data
            });
        },
        onExpand(expandedKeys) {
            console.log('onExpand', arguments);
            this.setState({
                expandedKeys,
                autoExpandParent: false
            });
        }
    },

    render() {
        const loop = data => {
            return data.map(item => {
                if (item.children && item.children.length) {
                    return (
                        <TreeNode key={item.key} title={item.title}>
                            {loop(item.children)}
                        </TreeNode>
                    );
                }
                return <TreeNode key={item.key} title={item.title} />;
            });
        };
        return (
            <div class='draggable-demo'>
                <h2>draggable</h2>
                <p>drag a node into another node</p>
                <div class='draggable-container'>
                    <Tree
                        expandedKeys={this.expandedKeys}
                        onExpand={this.onExpand}
                        autoExpandParent={this.autoExpandParent}
                        draggable
                        onDragstart={this.onDragStart}
                        onDragenter={this.onDragEnter}
                        onDrop={this.onDrop}>
                        {loop(this.gData)}
                    </Tree>
                </div>
            </div>
        );
    }
};
</script>
