<template>
    <div :id="id" ref="treeObj" class="go-tree-ctl" :class="'hasSearch_'+hasSearch" :style="treeStyle">
        <div
            v-if="headerText.length > 0"
            class="dhx_cell_hdr"
            style="border-top: 1px solid rgb(240, 240, 240);"
        >
            <div class="dhx_cell_hdr_text dhx_cell_hdr_text_chrome">
                <span>{{ headerText }}</span>
                <div class="go-tree-flush-img" @click="flushTree">
                    <Icon type="md-sync"/>
                </div>
            </div>
        </div>
        <div class="search-div" v-if="hasSearch">
            <div class="input-icon account-sel-div">
                <input
                    AUTOCOMPLETE="off"
                    ref="treeSearchInput"
                    type="text"
                    style="border:0"
                    class="form-control"
                    placeholder="输入查询值"
                />
                <div class="search-btn" @click="searchTree">
                    <Icon type="ios-search-outline" style="font-size: 18px"></Icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {AssertUtils} from "goingutils";
    import {_getTreeHeight} from "../commonFun/CommonFun";
    import dhtmlXTreeObject from '../../dx/dxSource/components/dhtmlXTreeObject';
    import goTreeMixins from "./mixins/goTreeMixins";

    export default {
        name: "go-tree",
        mixins: [goTreeMixins],
        data: function () {
            return {
                initFlag: false,
                teeObj:null,
            };
        },
        props: {
            openMaxLevel: {
                type: Number,
                default: 10
            },
            //离顶部的高度
            topHeight: {
                type: Number,
                default: 0
            },
            //离底部的高度
            bottomHeight: {
                type: Number,
                default: 0
            },
            queryUrl: {
                type: String,
                default: ""
            }
        },
        computed: {
            treeStyle() {
                let styleObj = {};
                if (AssertUtils.isNotEmpty(this.bgColor)) {
                    styleObj["backgroundColor"] = this.bgColor;
                }
                return styleObj;
            }
        },
        methods: {
            getTreeObj(){
                return this.teeObj;
            },
            resize() {
                let vueObj = this;
                let treeObj = this.getTreeObj();
                //要对象存在 才继续执行
                if (treeObj != null) {
                    setTimeout(function () {
                        let pHeight = _getTreeHeight(vueObj);
                        let $treeObj = $(vueObj.$refs.treeObj);
                        //定义父容器的高度
                        $treeObj.css(
                            "height",
                            parseFloat(
                                $(vueObj.$refs.treeObj)
                                    .parent()
                                    .height()
                            ) -
                            vueObj.bottomHeight -
                            vueObj.topHeight
                        );
                        if (parseFloat(pHeight) > 0) {
                            if (vueObj.hasSearch) {
                                $treeObj
                                    .find(".containerTableStyle")
                                    .css(
                                        "height",
                                        parseFloat($treeObj.css("height")) -
                                        parseFloat($treeObj.find(".search-div").css("height")) -
                                        10
                                    );
                            }
                        }
                    }, 100);
                }
            },
            //重新刷新树对象
            flushTree() {
                this.getTreeObj().reloadData({
                    sleNode: true,
                    backFun: () => {
                        if (this.openNode) {
                            this.openAllNode();
                        }
                        if (this.openRootNode) {
                            this.openRootNode&&this.openRootNode();
                        }
                    }
                });
            },
            searchTree() {
                let val = $(this.$refs.treeSearchInput).val();
                this.getTreeObj().findItem(val);
            },
            initTreeObj(pHeight) {
                if($(this.$refs.treeObj).parent().get(0)==null){
                    return void(0);
                }
                //定义父容器的高度
                $(this.$refs.treeObj).css(
                    "height",
                    parseFloat($(this.$refs.treeObj).parent().height()) -this.bottomHeight - this.topHeight
                );

                let vueObj = this;
                let orgTreeObj = new dhtmlXTreeObject(
                    this.$refs.treeObj,
                    "100%",
                    pHeight - this.bottomHeight - this.topHeight + "px",
                    0
                );
                orgTreeObj.openMaxLevel=this.openMaxLevel;
                //获取对象
                this.teeObj=orgTreeObj;
                //判断是否可以进行拖拽节点  默认不可以拖拽
                if (this.drag) {
                    orgTreeObj.enableDragAndDrop(true, false);
                    orgTreeObj.setDragBehavior("sibling");
                    orgTreeObj.attachEvent("onDrop", function (
                        sId,
                        tId,
                        id,
                        sObject,
                        tObject
                    ) {
                        vueObj.$emit("onDrog", {sId, tId, id, sObject, tObject});
                    });
                }

                //如果传入了data 则直接加载data数据
                if (this.data.length > 0) {
                    orgTreeObj.flushTreeByData(this.data, "jsarray");
                }
                //如果传入了checkBox
                if (this.checkBox) {
                    orgTreeObj.enableCheckBoxes(1);
                    orgTreeObj.enableThreeStateCheckboxes(true);
                }

                //如果传入了radioBox
                if (this.radioBox) {
                    orgTreeObj.enableRadioButtons(true);
                }

                //如果传入了queryUrl 则直接查询加载data数据
                if (this.queryUrl != null && this.queryUrl.length > 0) {
                    orgTreeObj.flushTreeByUrl({
                        url: this.queryUrl,
                        treeLoadData: this.treeLoadData,
                        backFun: () => {
                            vueObj.$emit("afterLoadData", {treeObj: orgTreeObj});
                            if (vueObj.openNode) {
                                orgTreeObj.openAllNode();
                            }
                            if (vueObj.openRootNode) {
                                orgTreeObj.openRootNode&&orgTreeObj.openRootNode();
                            }
                        }
                    });
                }
                //注册树事件
                orgTreeObj.attachEvent("onClick", function (id) {
                    vueObj.$emit("onClick", {nodeId: id, treeObj: orgTreeObj});
                    return true;
                });
                //注册树双击事件
                orgTreeObj.attachEvent("ondblclick", function (id) {
                    vueObj.$emit("ondblclick", {nodeId: id, treeObj: orgTreeObj});
                    return true;
                });

                //输入查询
                $(this.$refs.treeSearchInput).on("input", function () {
                    let val = $(this).val();
                    orgTreeObj.findItem(val, null, 1);
                });
            },
            //后置初始化
            initAsyncCtl() {
                let pHeight = _getTreeHeight(this);
                this.initTreeObj(pHeight);
                this.initFlag = true;
            }
        },
        mounted() {
            this.$nextTick(function () {
                if (!this.initFlag) {
                    //获取树高度
                    let pHeight = _getTreeHeight(this);
                    //如果高度为0或者小于0时候  表示父容器的高度还未设置 则需要等待父节点初始化后 再进行控件的初始化
                    if (pHeight <= 0) {
                        //延时执行
                        setTimeout(() => {
                            pHeight = _getTreeHeight(this);
                            this.initTreeObj(pHeight);
                        }, 10);
                    } else {
                        this.initTreeObj(pHeight);
                    }
                }
            });
        },
        watch: {
            //如果树的数据变化 则进行数据组装
            data(newVal) {
                this.getTreeObj().reloadData(true, this, newVal);
            },
            //如果查询url 变化 则进行查询操作
            queryUrl(newVal) {
                let vueObj = this;
                if (AssertUtils.isNotEmpty(newVal)) {
                    this.getTreeObj().flushTreeByUrl({
                        url: newVal,
                        treeLoadData: this.treeLoadData,
                        backFun: function () {
                            vueObj.$emit("afterLoadData", {
                                treeObj: vueObj.getTreeObj()
                            });
                        }
                    });
                }
            }
        },
        components: {},
        beforeDestroy() {
            try{
                if (this.teeObj != null &&this.teeObj.destructor != null) {
                    //销毁内存
                    this.teeObj.destructor();
                }
                this.teeObj=null;
            }catch (e) {
                console.log(e,"-e-");
            }
        }
    };
</script>
