<template>
    <div :id="this.inputId+'_container'" class="go-common-drop-ctl" style="position: relative;" ref="common_drop_div">
        <go-input AUTOCOMPLETE="off" :id="this.inputId+'_inputDiv'" :labelAlign="labelAlign" :labelWidth="labelWidth" :readOnly="true"
                  :suffix="dropSuffixIcon" v-model="selValue"
               @clearInputValue="clearTreeValue" :clearValueFun="true"  @inputClick="inputClick" :width="this.width" :item="this.inputItem"></go-input>
    </div>
</template>

<script>
    import GoCommonInput from "./go-input";
    import formMixin from "../../mixins/formMixins";
    import dropDownMixin from "./mixins/dropDownMixin";
    import TreeDrop from "../../jsCom/goForm/components/go-tree-drop";
    import {GoingUtils, AssertUtils} from "goingutils";
    import EditorTypeUtils from "../../common/editorTypeUtils";


    export default {
        name: "go-drop-tree",
        mixins: [formMixin, dropDownMixin],
        data: function () {
            return {
                suffixString:"_tree_drop",
                //下拉容器高度
                winDropHeight:260,
                timeout:null,
                inputId: GoingUtils.getUUid(12),
                selValue: this.value,
                myTreeView: null,
            };
        },
        props: {
            documentBody:{
                type: Boolean,
                default: false
            },
            queryUrl: {
                type: String,
                default: ''
            },
            selType: {
                type: String,
                default: 'selByValue'
            },
            search: {
                type: Boolean,
                default: false
            },
            position: {
                type: String,
                default: "bottom"
            },
            selField: {},
        },
        computed: {

        },
        mounted() {
            //如果存在查询ur 则重新赋值
            if (AssertUtils.isNotEmpty(this.queryUrl)) {
                this.inputItem["treeUrl"] = this.queryUrl;
            }

            this.$nextTick(function () {
                this.initContainer(this.inputId);
                //添加关闭下拉的事件
                this.addDocEvent();
            });
        },
        methods: {
            clearTreeValue(){
                this.selValue='';
                this.$emit("input", '');
                this.$emit('clearInputValue', '');
            },
            initContainer(_inputId){
                let html = TreeDrop.getDropContainerHtml(
                    this.inputId,
                    this.getDropWidth(),
                    this.getDropHeight()
                );
                //默认追加到input 的父级容器中
                if(this.documentBody){
                    $(html).appendTo($(document.body));
                }else{
                    //如果存在路由对象 则通过路由进行加载
                    $(html).appendTo($("#" + this.inputId + '_container'));
                }

                //将对象缓存起来
                EditorTypeUtils.itemTemp[_inputId] = this.inputItem;
                //判断是否需要下拉查询
                if (!this.search) {
                    $(`#${this.inputId}_tree_drop .search-bar`).hide();
                }
                //初始化树查询事件
                this.initSearchEvent();
            },
            initSearchEvent() {
                if ($(`#${this.inputId}_search`).get(0) != null) {
                    //点击输入框 弹出下拉选择数据
                    $(`#${this.inputId}_search`).click(() => {
                        let val = $(`#${this.inputId}_search`).closest(".search-div").find("input").val();
                        this.myTreeView.findItem(val, null, 1);
                    });

                    //点击选择记录的按钮
                    $(`#${this.inputId}_search_btn`).click(() => {
                        this.selectItemNod(this.myTreeView, this.myTreeView.getSelectedId());
                        this.showFlag=false;
                    });
                }
            },
            getBoxPos() {
                let bPos = this.inputHeight;
                if (this.position === "top") {
                    bPos = -this.winDropHeight- this.inputHeight;
                }
                return bPos;
            },
            //点击输入区域 显示下拉信息
            showPageDrop(inputEl) {
                this.showFlag = !this.showFlag;
                let _inputId = this.inputId;
                //如果已经显示 则点击进行隐藏
                if (this.showFlag) {
                    //有可能是向上  也 可能向下显示
                    let bPos = this.getBoxPos();
                    //设置显示的下拉位置
                    if(this.documentBody){
                        this.setElDropPos(true,()=>{
                            //显示树下拉区域
                            this.showTreeDropPanel(_inputId);
                        });
                    }else{
                        let elPos = GoingUtils.getElementPosition(inputEl);
                        let {x} = GoingUtils.getElementPosition(document.getElementById(this.inputId + "_inputDiv"));
                        $(`#${_inputId}_tree_drop`).show().css("position", "absolute").css("left", elPos.x - x).css("top", bPos).css("zIndex", GoingUtils.getCurMaxZIndex());
                        //显示树下拉区域
                        this.showTreeDropPanel(_inputId);
                    }
                    //触发点击事件
                    this.$emit("clickFun", inputEl);
                }
            },
            //显示treeDrop
            showTreeDropPanel(_inputId) {
                let initFlag = $(`#${_inputId}_tree_drop`).attr("initFlag");
                //第一次点击初始化数据 第一次以后只是显示即可
                if (initFlag !== "true") {
                    this.myTreeView = TreeDrop.initTreeObject(_inputId);
                    //注册表格事件
                    this.initTreeObjEvent(this.myTreeView);
                    $(`#${_inputId}_tree_drop`).css("position", "absolute").attr("initFlag", "true");
                } else {
                    $(`#${_inputId}_tree_drop`).css("position", "absolute").show();
                }
            },
            //选择相应的记录
            selectItemNod(myTreeView, nodeId) {
                if (myTreeView.defSel) {
                    myTreeView.defSel = !myTreeView.defSel;
                    return void 0;
                }
                this.selValue = myTreeView.getItemText(nodeId);
                //设置选择 的值
                this.inputItem["hasError"]=false;

                this.$emit("input", this.selValue);
                //如果树关联id不为空 则需要设置关联ie的值
                if (AssertUtils.isNotEmpty(this.inputItem["treeRelId"]) && this.domainData != null) {
                    this.domainData[this.inputItem["treeRelId"]] = nodeId;
                }
            },
            //初始化树点击数据
            initTreeObjEvent(myTreeView) {
                //如果存在对象中定义的初始化函数
                if (AssertUtils.isNotNull(this.item["initFun"]) && AssertUtils.isFunction(this.item["initFun"])) {
                    this.item["initFun"](myTreeView);
                }
                //如果存在标签注入的初始化事件
                this.$emit("initTree", myTreeView);
                //注册选择事件
                myTreeView.attachEvent("onSelect", (nodeId, mode) => {
                    //true if item was selected, false otherwise
                    if (mode) {
                        this.selectItemNod(myTreeView, nodeId);
                        this.$emit("selNode", {nodeId,myTreeView});
                        if (myTreeView.close !== false) {
                            this.showFlag=false;
                        }
                        return true;
                    }
                });
            }
        },
        watch: {
            value(newVal) {
                //根据value查值
                if (this.selType === "selByValue") {
                    this.selValue = newVal;
                } else {
                    this.selValue = newVal;
                }
            }
        },
        //销毁组件
        beforeDestroy(){
            if(this.timeout!=null){
                clearTimeout(this.timeout);
            }

            let _inputId = this.inputId;
            $(`#${_inputId}_tree_drop`).remove();
        },
        components: {
            GoCommonInput
        }
    };
</script>
