<template>
<Card   :padding="0" :bordered="myConfig.bordered" dis-hover style="width:100%;overflow-x:hidden;padding:14px;16px;">
    <div v-if="showCondition" ref="conditiondiv">
         <Input ref="condition" :placeholder="searchPlaceholder"  v-model="searchValue"  search style="width: 100%;margin-top:10xp;margin-bottom:10px" @on-search="search" @on-enter="search"/>
    </div>
    <div class="customLayout" :style="style">
        <CompatTree ref="tree" v-show="showTree" :data="treeData" :class="myConfig.className" @update:data="treeData = $event" :show-checkbox="myConfig.showCheckBox"  @on-select-change="onSelectChange" @on-check-change="onCheckChange" @on-toggle-expand="onToggleExpand" :load-data="loadData"/>
        <SimpleViewGrid v-show="!showTree" v-if="gridReset" ref="grid"  :config="gridConfig"  :dictData="dictData" @dbclick="dbclick"/>
    </div>
</Card>
</template>
<script>
    import Base from '@/components/tree/treedatabase.vue';
    import elementResizeDetectorMaker from 'element-resize-detector';
    import CompatTree from "@/components/tree/CompatTree.vue";
    export default {
        name:'mtreedata',
        components: {CompatTree},
        extends: Base,
        data () {
            return {
                searchPlaceholder:'请输入编码或名称',
                searchValue:'',
                gridReset:true
            }
        },
        created () {
            this.init();
            if (!this.gridConfig) {
               this.gridConfig = {};
            }
            if (this.myConfig.multiSelect !== undefined) {
                this.gridConfig.multiSelect = this.myConfig.multiSelect;
                if (this.gridConfig.multiSelect) {
                    this.gridConfig.showCheckBox = true;
                }
            } else {
                this.gridConfig.multiSelect = false;
            }
            if (this.myConfig.items) {
                this.gridConfig.items = this.$Method.copy(this.myConfig.items);
            } else {
                if (!this.gridConfig.items) {
                   this.gridConfig.items = [];
                }
                let code = {
                    label:'编码',
                    name:this.myConfig.responseCode,
                    type:'TextBox',
                }
                let name = {
                    label:'名称',
                    name:this.myConfig.responseName,
                    type:'TextBox',
                }
                this.gridConfig.items.push(code);
                this.gridConfig.items.push(name);
            }
        },
        methods: {
            search () {
                if (!this.searchValue) {
                    this.refurbish();
                    this.showTree = true;
                } else {
                    let data = this.$Method.copy(this.data);
                    let tmp = [];
                    let flag = true;
                    if (this.asyncLoad) {
                       let para = {};
                       if (this.myConfig.searchValueName) {
                            para[this.myConfig.searchValueName] = this.searchValue;
                       }
                       data = this.getAsyncNode(para);
                       if (this.myConfig.searchValueName) {
                           tmp = data;
                           flag = false;
                       }
                    }
                    if (flag) {
                        data.forEach(el => {
                            if(el[this.myConfig.responseCode].indexOf(this.searchValue) > -1 || el[this.myConfig.responseName].indexOf(this.searchValue) > -1) {
                                tmp.push(el);
                            }
                        });
                    }
                    this.gridReset = false;
                    this.$nextTick(() => {
                        this.gridReset = true;
                        this.$nextTick(() => {
                            this.$refs.grid.setData(tmp);
                            this.showTree = false;
                        });
                    });

                }
            },
            setTreeNodeIcon(params, obj) {

                const hasChildren =
                    params.data.children &&
                    params.data.children.length > 0

                if (hasChildren) {
                    if (params.data.expand) {
                        obj.type = '_custom-wenjianzhankai'
                    } else {
                        obj.type = '_custom-wenjianshouqi'
                    }
                } else {
                    obj.type = '_custom-yemian'
                }

                return obj
            }
        },
        mounted () {
            this.observer = elementResizeDetectorMaker();
            if (this.showCondition && this.$refs.conditiondiv) {
                this.observer.listenTo(this.$refs.conditiondiv, this.setExtraHeight);
            }
        },
        beforeUnmount() {
            if (this.showCondition && this.$refs.conditiondiv) {
                this.observer.removeListener(this.$refs.conditiondiv, this.setExtraHeight);
            }
        }
    };
</script>

<style>
.customLayout{
    OVERFLOW-Y: auto;
    /*background: url('./images/bg.jpg') no-repeat 4px 5px;*/
}
</style>

