<template>
    <div :id="id" class="go-tree-ctl" style="height: 100%;">
        <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">
                    <i class="fas fa-sync"></i>
                </div>
            </div>
            <!--<div class="dhxlayout_arrow dhxlayout_arrow_va"></div>-->
        </div>
        <div class="search-div" v-if="hasSearch">
            <div class="input-icon input-icon-right account-sel-div">
                <input
                    AUTOCOMPLETE="off"
                    ref="treeSearchInputAsyn"
                    type="text"
                    class="form-control"
                    placeholder="输入查询值"
                />
                <div class="search-btn" @click="searchTree">
                    <Icon type="ios-search-outline" style="font-size: 18px"></Icon>
                </div>
            </div>
        </div>
        <div :id="treeId" ref="ztreeObj" class="ztree"></div>
    </div>
</template>

<script>
    import {GoingUtils, AssertUtils,QueryCommand} from "goingutils";
    import zTreeObject from "../../jsCom/comCtl/zTreeObject";
    import {_getTreeHeight} from "../commonFun/CommonFun";
    import goTreeMixins from "./mixins/goTreeMixins";

    export default {
        name: "go-tree-asyn",
        mixins: [goTreeMixins],
        data: function () {
            return {
                orgTreeObj:null,
                oldNodes: [],
                selIndex: 0
            };
        },
        props: {
            //初始化url
            initUrl: {
                type: String,
                default: ""
            },
            //异步查询url
            asyncUrl: {
                type: String,
                default: ""
            }
        },
        beforeCreate(){
            if ($.fn.zTree == null) {
                //异步加载树对象
                let queryCommand = new QueryCommand(`/static/plugin/jquery.ztree.core.min.js`);
                queryCommand.getScriptAsyncQuery(() => {});
            }
        },
        computed: {
            treeId() {
                return GoingUtils.getUUid(12);
            },
            //关闭当前cell的图标
            closeCellId() {
                return GoingUtils.getUUid(12);
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initTreeObj();
            });
        },
        methods: {
            getTreeObj(){
                return this.orgTreeObj;
            },
            initTreeObj() {
                if ($.fn.zTree != null) {
                    let vueObj = this;let ztreeObj=this.$refs.ztreeObj;
                    let pHeight = _getTreeHeight(vueObj,ztreeObj);
                    $(`#${this.treeId}`)
                        .css("overflow", "auto");
                    if(pHeight>50){
                        $(`#${this.treeId}`)
                            .css("height", pHeight);
                    }
                    let orgTreeObj = new zTreeObject({
                        openNode:this.openNode,
                        openRootNode:this.openRootNode,
                        treeId: this.treeId,
                        asyncUrl: this.asyncUrl,
                        initUrl: this.initUrl,
                        icons:this.icons,
                    });
                    //将树对象缓存起来
                    this.orgTreeObj=orgTreeObj;
                    //首先判断异步请求路径是否存在 如果存在异步请求则通过异步请求来获取数据
                    if (AssertUtils.isNotEmpty(this.asyncUrl)) {
                        orgTreeObj.initAsyncTree(this.openNode);
                    } else {
                        //如果后台请求不为空 则通过指定的请求 查询树数据信息
                        if (AssertUtils.isNotEmpty(this.action)) {
                            orgTreeObj.flushTreeByAction(this.action, vueObj);
                        }
                        //如果传入了data 则直接加载data数据
                        if (this.data.length > 0) {
                            orgTreeObj.flushTreeByData(this.data, "jsarray");
                        }
                    }
                    //注册树单击事件
                    orgTreeObj.attachEvent("onClick", function (id) {
                        vueObj.$emit("onClick", {nodeId: id, treeObj: orgTreeObj});
                        return true;
                    });
                    //注册树异步加载完成事件
                    orgTreeObj.attachEvent("onAsyncSuccess", function (id) {
                        vueObj.$emit("onAsyncSuccess", {nodeId: id, treeObj: orgTreeObj});
                        return true;
                    });
                    //输入查询
                    $(this.$refs.treeSearchInputAsyn).on("input", function () {
                        vueObj.updateNodes(false, vueObj.oldNodes);
                        var zTree = vueObj.orgTreeObj.getZTreeObj();
                        let val = $(this).val();
                        if (AssertUtils.isNotEmpty($.trim(val))) {
                            let nodeList = zTree.getNodesByParamFuzzy("name", val);
                            vueObj.updateNodes(true, nodeList, vueObj.selIndex);
                        }
                    });
                } else {
                    setTimeout(()=>{
                        this.initTreeObj();
                    }, 30);
                }
            },
            updateNodes(_highlight, nodeList, index) {
                this.oldNodes = nodeList;
                var zTree = this.orgTreeObj.getZTreeObj();
                nodeList.forEach(function (item) {
                    if (AssertUtils.isNotNull(item)) {
                        item.highlight = _highlight;
                        zTree.updateNode(item);
                    }
                });
                //如果存在节点 则选择当前节点
                if (nodeList.length > 0 && AssertUtils.isNotNull(nodeList[index])) {
                    zTree.selectNode(nodeList[index]);
                    $(this.$refs.treeSearchInputAsyn).focus();
                    this.$emit("onClick", {
                        nodeId: nodeList[index]["id"],
                        treeObj: this.orgTreeObj
                    });
                }
            },
            //重新刷新树对象
            flushTree() {
                this.orgTreeObj.reloadData(this);
            },
            searchTree() {
                let zTree = this.orgTreeObj.getZTreeObj();
                let val = $(this.$refs.treeSearchInputAsyn).val();
                let nodeList = zTree.getNodesByParamFuzzy("name", val);

                if (nodeList.length === this.selIndex + 1) {
                    this.selIndex = 0;
                } else {
                    ++this.selIndex;
                }
                this.updateNodes(true, nodeList, this.selIndex);
            },
            setSelectedNode(v) {
                let zTree = this.orgTreeObj.getZTreeObj();
                zTree.setting.view.expandSpeed = "";
                zTree.expandAll(false);
                zTree.setting.view.expandSpeed = "fast";
                let node = zTree.getNodeByParam("id", v);
                zTree.selectNode(node);
            }
        },
        watch: {
            data(newVal) {
                this.orgTreeObj.reloadData(this, newVal);
            }
        },
        beforeDestroy() {
            if(this.orgTreeObj!=null){
                //销毁内存
                this.orgTreeObj.destructor();
                //置空对象
                this.orgTreeObj = null;
            }
        }
    };
</script>
