<template>
    <div>
        <div ref="condition">
        <Row v-if="showCondition">
            <Col span='24'>
                <ConditionBox ref="condition" :config="myConfig" :dictData="dictData"  @conditionAction="conditionAction" :isPop="isPop" modelType="treeSearch" > </ConditionBox>
            </Col>
        </Row>
        </div>
        <Row  class="customLayout" :style="style">
            <Card v-show="showTree" :padding="0" :bordered="myConfig.bordered" :dis-hover="myConfig.disHover" style="width:100%;overflow-x:hidden">
                <template v-if="myConfig.showTitle" #title>
                <p>
                    {{config.title}}
                </p>
                </template>
                <CompatTree ref="tree" :data="treeData" :class="myConfig.className" :show-checkbox="myConfig.showCheckBox"  @on-select-change="onSelectChange" @on-check-change="onCheckChange" @on-toggle-expand="onToggleExpand" :load-data="loadData"/>
            </Card>
            <ViewGrid v-show="!showTree" ref="grid"  :config="gridConfig"  :dictData="dictData" @dbclick="dbclick"/>
          </Row>
    </div>
</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:'treedata',
        components: {CompatTree},
        extends: Base,
        mounted () {
            this.observer = elementResizeDetectorMaker();
            if (this.$refs.condition)  {
                this.observer.listenTo(this.$refs.condition, this.setExtraHeight);
            }

        },
        beforeUnmount() {
            if (this.$refs.condition) {
                this.observer.removeListener(this.$refs.condition, this.setExtraHeight);
            }

        }
    };
</script>

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

