<template>
    <div class="yy-tree-node" 
        @dragstart.stop="handleDragStart"
        @dragend.stop="handleDragEnd"
        :draggable="treeRoot.draggable">
        <div class="yy-tree-node-content-wrapper" @dragover.stop="handleDragOver" ref="contentWrapper" :style="{paddingLeft: level * 11 + 'px'}">
            <div class="yy-tree-expand-btn" @click="handleToggleExpand">
                <div class="yy-tree-expand-btn-inner" :class="{expanded: node.expanded, 'has-children': !node.isLeaf}" >

                </div>
            </div>
            <NodeContent :node="node"/>
        </div>
        <!-- <transition name="fade"> -->
            <div class="yy-tree-children" v-if="!node.isLeaf" v-show="node.expanded">
                <BipTreeMode v-for="n in node.children" :key="n.key" 
                    :level="level + 1" 
                    :node="n"
                ></BipTreeMode>
            </div>
        <!-- </transition> -->
    </div>
</template>

<script>
import { getTreeNodeId } from './helper';

let throttleTimer = 0;

export default {
    name: 'BipTreeMode',
    inject: ['treeRoot'],
    props: {
        node: {
            type: Object,
            default() {
                return {}
            }
        },
        level: Number
    },
    components: {
        NodeContent: {
            inject: ['treeRoot'],
            props: {
                node: {
                    type: Object,
                    default() {
                        return {}
                    }
                }
            },
            render(h) {
                const root = this.treeRoot;
                const node = this.node;
                const data = node.data;
                const scopedData = {node, data}
                let child;
                if (root.renderContent) {
                    child = root.renderContent(h, scopedData);
                } else if (root.$scopedSlots.default) {
                    child = root.$scopedSlots.default(scopedData)
                } else {
                    child = h('span', {
                        class: [
                            'yy-tree-node-label', {'dragging-inner': node.draggingInner}
                        ]
                    }, [ node.label ])
                }
                return h(
                    'div',
                    {
                        class: 'yy-tree-node-content',
                    },
                    [ child ]
                )
            }
        }
    },
    computed: {
        hasChildren() {
            return this.node.children && this.node.children.length
        }
    },
    data() {
        return {
            nodeId: getTreeNodeId()
        }
    },
    methods: {
        handleToggleExpand() {
            if (this.treeRoot.lazy && !this.node.loaded && typeof this.treeRoot.load === 'function') {
                this.treeRoot.load(this.node, data => {
                    this.node.setChildrenData(data);
                    this.node.expanded = true;
                    this.node.loaded = true;
                    this.node.updateLeafState();
                })
            } else this.node.expanded = !this.node.expanded;

        },
        handleDragStart(event) {
            return this.treeRoot.onDragStart(event, this)
        },
        handleDragOver(event) {

            if (this.treeRoot.dragState.draggingNode === this) {
                return false;
            }
            event.preventDefault();

            const now = Date.now();

            if (now - throttleTimer >= 200) {
                throttleTimer = now;
                this.treeRoot.onDragOver(event, this);
                return this.treeRoot.onDragOver(event, this);
            }
        },
        handleDragEnd(event) {
            return this.treeRoot.onDragEnd(event, this)
        }
    },
    mounted() {
        if (this.treeRoot.defaultExpandAll) {
            this.handleToggleExpand();
        }
    }
}
</script>
