<template lang="pug">
    div.ocTreeViewContainer
        .box(v-if="isShowFilter")
            form(@submit.prevent="keyword = (iptSearchValue || '').toUpperCase()") {{filterText}}
                input.w250(v-model.trim="iptSearchValue", type="text", :placeholder="filterPlaceholder", :style="filterStyle")
                button.primary(type="submit")  {{searchButton}}
                    i(v-if="isShowIcon",:class="iconClass")
        .box.ocScroll(:style="{'margin-left' : isShowRoot? '0' : '-15px'}")
            TreeViewItem(ref="tree",
                v-if="filterModel",
                :defaultRenderLevel="defaultRenderLevel",
                :model="filterModel",
                :readonly="readonly",
                :nameKey="nameKey",
                :childKey="childKey",
                :renderText="renderText",
                :editClickHandler="showEditHandler",
                :addClickHandler="showAddHandler",
                :deleteClickHandler="deleteHandler",
                :moveInClickHandler="moveInHandler",
                :moveAfterClickHandler="moveAfterHandler",
                :nodeClickHandler="nodeClickHandler",
                :isCrossLevelMove="isCrossLevelMove",
                :isShowRoot="isShowRoot",
                :isClickTextOpen="isClickTextOpen",
                :defaultShowLevel="defaultShowLevel",
                :treeItemClickHandler="treeItemClickHandler")
            
            div.pt10(v-else)
                div(style="width: 70px").oc-loader
</template>

<script>
    import ocAlgorithm from './js/algorithm'
    import Vue from 'vue';
    import TreeViewItem from './treeViewItem'

    export default {
        name: 'oc-treeview',
        components: { TreeViewItem },
        props: {
            isShowRootEditIcon: { type: Boolean, default: false },
            showEditHandler: null,
            showAddHandler: null,
            deleteHandler: null,
            nodeClickHandler: null,
            moveInHandler: null,
            moveAfterHandler: null,
            treeItemClickHandler: null,
            filterStyle: Object,
            isShowFilter: { type: Boolean, default: true },
            isDelParent: {type: Boolean, default: true},
            defaultRenderLevel: { type: Number, default: 2 }, //为了提高渲染性能，默认只渲染两级---
            defaultShowLevel: { type: Number, default: 1 },   //默认展开的层级
            readonly: false,       //只读树形
            
            isShowRoot: { type: Boolean, default: true },      //是否展示根节点
            // autoActiveRoot: true,  //自动激活根节点

            model: Object,         //当前节点的对象
            index: Number,         //当前节点的序号，从0开始
            renderText: Function,  //格式化，输出节点文本，默认为model.name
            childKey: { type: String, default: 'items' },   //获取下级节点的key，默认为“items”
            nameKey: { default: 'name' },
            isClickTextOpen: { type: Boolean, default: false }, //点击文字时，是否默认展开
            isCrossLevelMove: { type: Boolean, default: false },  //是否允许跨级别移动

            filterHandler: Function, //自定义的过滤方法----
            filterPlaceholder: { type: String, default: 'Search' },
            searchButton: { type: String, default: 'Search' },
            filterText: { type: String, default: 'Filter:' },
            isShowIcon:  { type: Boolean, default: false }, 
            iconClass: { type: String, default: '' },
        },

        data() {
            return {
                iptSearchValue: null,
                keyword: null
            }
        },

        computed: {
            getName() {
                if(this.renderText) {
                    return this.renderText(this.model);
                }
                return this.model.name;
            },

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

            filterModel() {
                if(!this.keyword) {
                    return this.model;
                }
                let model = ocAlgorithm.filterTree(this.model, this.keyword, 'children', this.nameKey);

                return model;
            }
        },

        watch: {
            keyword() {
                $(this.$refs.tree.$el).removeClass('filterActive').find('.filterActive').removeClass('filterActive');

                if(!this.keyword) {
                    return;
                }
                
                this.$nextTick( e => {
                    this.showAll(this);

                    this.$nextTick( e => {
                        let keyword = this.keyword.toUpperCase();
                        // console.log('filter:', this.$refs.tree.$el);
                        $(this.$refs.tree.$el).find('.text').each(function() {
                            // console.log('innerText:', this.innerText);
                            if(this.innerText.toUpperCase().indexOf(keyword) !== -1) {
                                // console.log('filter matched:', this.innerText);
                                $(this).parents('.treeItem:gt(0)').addClass('open');
                                $(this).parents('.treeItem:eq(0)').addClass('filterActive');
                            }
                        })
                    })
                })
            }
        },
        
        methods: {
            //提供方法对外，展示所有层级----
            showAll(component) {
                if(component.showAllLevel && typeof component.showAllLevel == 'function') {
                    component.showAllLevel();
                }
                component.$children.map(one => {
                    this.showAll(one);
                })
            }
        }
    }
</script>
