<template lang="pug">
    .treeItem(v-if="model", :class="nodeClass", :readonly="readonly", :key="model.id", :data-id="model.id")
        .content(v-if="isShowRoot || index !== undefined", @click="clickHandler($event, index)")
            i.iconMore(v-if="model[childKey] && model[childKey].length", @click.stop="toggleOpen($event)")
            .text(v-html="getName")
            .icons(v-if="!readonly")
                i.icon.fa.fa-cog(v-if="(index !== undefined || isShowRootEditIcon) && editClickHandler", @click.stop="editClickHandler")
                i.icon.fa.fa-plus-circle(v-if="addClickHandler", @click.stop="addClickHandler")
                template(v-if="isDelParent || !hasChildren")
                    i.icon.fa.fa-minus-circle(v-if="deleteClickHandler && index!==undefined", @click.stop="deleteClickHandler")

                i.fa.fa-arrow-circle-left(v-if="moveInClickHandler", title="Move in to this node, put it on the first position", @click.stop="moveInClickHandler")

                i.fa.fa-arrow-circle-down.pr(v-if="moveAfterClickHandler", @click.stop="moveAfterClickHandler")
                    span.ocTooltips.pa(html="将当期激活的节点放置在此节点下面", direct="right", style="display: block; width:15px; height:15px; left: 0; top:0")
        oc-tree-view-item(
            v-if="model[childKey] && level < showLevel", 
            :defaultRenderLevel="defaultRenderLevel", 
            :level="level + 1", 
            v-for="(item, index) in model[childKey]", 
            :childKey="childKey", 
            :nameKey="nameKey",
            :model="item", 
            :index="index", 
            :readonly="readonly", 
            :renderText="renderText", 
            :key="item.id", 
            :editClickHandler="editClickHandler", 
            :addClickHandler="addClickHandler", 
            :deleteClickHandler="deleteClickHandler", 
            :moveInClickHandler="moveInClickHandler", 
            :moveAfterClickHandler="moveAfterClickHandler", 
            :nodeClickHandler="nodeClickHandler",
            :isClickTextOpen="isClickTextOpen", 
            :isCrossLevelMove="isCrossLevelMove", 
            :isShowRoot="isShowRoot", 
            :defaultShowLevel="defaultShowLevel",
            :treeItemClickHandler="treeItemClickHandler")
</template>

<script>
    import Vue from 'vue';

    export default {
        name: 'oc-tree-view-item',
        props: {
            isShowRootEditIcon: false,
            editClickHandler: null,
            addClickHandler: null,
            nodeClickHandler: null,
            deleteClickHandler: null,
            moveInClickHandler: null,
            moveAfterClickHandler: null,
            treeItemClickHandler: null,
            
            level: { type: Number, default: 0},
            
            isDelParent: {type: Boolean, default: true},
            defaultRenderLevel: { type: Number, default: 2 },
            defaultShowLevel: { type: Number, default: 1 },   //默认展开的层级
            readonly: false,       //只读树形
            isShowRoot: { type: Boolean, default: true },       //是否展示根节点
            model: Object,         //当前节点的对象
            index: Number,         //当前节点的序号，从0开始
            renderText: Function,  //格式化，输出节点文本，默认为model.name
            childKey: { type: String, default: 'items' },   //获取下级节点的key，默认为“items”
            nameKey:{ type: String, default: 'name' },  
            isClickTextOpen: { type: Boolean, default: false }, //点击文字时，是否默认展开
            isCrossLevelMove: { type: Boolean, default: false },  //是否允许跨级别移动
        },

        data() {
            return {
                showLevel: this.defaultRenderLevel || 2
            }
        },
        
        computed: {
            getName() {
                if(this.renderText) {
                    return this.renderText(this.model);
                }
                return this.model[this.nameKey];
            },

            hasChildren() {
                return this.model && this.model[this.childKey] && this.model[this.childKey].length > 0;
            },

            nodeClass() {
                if(this.level === 0) {
                    return this.isShowRoot? 'active open' : 'open';
                }
                else if(!this.isShowRoot && this.level === 1 && this.index === 0) {
                    return 'active open';
                }
                else if(this.level < this.defaultShowLevel) {
                    return 'open';
                }

                return '';
            }
        },

        methods: {
            showAllLevel() {
                // console.log('showAllLevel call');
                this.showLevel = 10;
            },

            toggleOpen(event) {
                $(event.currentTarget).parents('.treeItem:eq(0)').toggleClass('open');
                this.showLevel = 10;
            },

            open(event) {
                $(event.currentTarget).parents('.treeItem:eq(0)').addClass('open');
                this.showLevel = 10;
            },

            clickHandler(event, index) {
                let ele = $(event.target);
                let treeItem = ele.parents('.treeItem:eq(0)');
                let parents = ele.parents('.treeItem');

                parents.removeClass('active').removeClass('move').find('.treeItem.active').removeClass('active');
                treeItem.addClass('active');

                if(this.isCrossLevelMove) {
                    parents.find('.treeItem').addClass('move');
                    treeItem.removeClass('move');
                    // treeItem.parents().eq(0).removeClass('move');
                } else {
                    treeItem.siblings('.treeItem').addClass('move');
                }
                
                treeItem.find('.treeItem.move').removeClass('move');
                
                
                ele.parents('.treeItem').find('.filterActive').removeClass('filterActive');
                console.log('isClickTextOpen');
                this.nodeClickHandler && this.nodeClickHandler();
                this.isClickTextOpen && this.toggleOpen(event);
                this.treeItemClickHandler && this.treeItemClickHandler(event, this);
            }
        }
    }
</script>