<template>
    <div :id="this.inputId+'_container'" class="go-common-drop-ctl" style="position: relative;" ref="common_drop_div">
        <go-input AUTOCOMPLETE="off" :labelAlign="labelAlign" :labelWidth="labelWidth" :id="this.inputId+'_inputDiv'" v-model="selValue"
                  :readOnly="true" :suffix="dropSuffixIcon"
                  @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 GridDrop from "../../jsCom/goForm/components/go-grid-drop";
    import {GoingUtils, AssertUtils} from "goingutils";
    import EditorTypeUtils from "../../common/editorTypeUtils";
    import ValidationUtils from "../../mixins/ValidationUtils";


    export default {
        name: "go-drop-grid",
        mixins: [formMixin, dropDownMixin],
        data: function () {
            return {
                suffixString:"_grid_drop",
                documentBody:true,
                inputId: GoingUtils.getUUid(12),
                selValue: this.value,
                winDropHeight:260,
            };
        },
        props: {
            selField: {},
        },
        computed: {},
        mounted() {
            this.$nextTick(function () {
                let _inputId = this.inputId;
                let html = GridDrop.getDropContainerHtml(
                    this.inputId,
                    this.getDropWidth(),
                    this.getDropHeight()
                );
                //如果存在路由对象 则通过路由进行加载
                if($("#main_router_view").get(0)!=null){
                    $(html).appendTo($("#main_router_view").get(0));
                }else{
                    $(html).appendTo($(document.body));
                }

                //将对象缓存起来
                EditorTypeUtils.itemTemp[_inputId] = this.item;
                //添加全局事件
                this.addDocEvent();
            });
        },
        methods: {
            initGridObjEvent(myGridObj) {
                //选择一条记录的是的回调函数
                myGridObj.attachEvent("onRowSelect", (rowId) => {
                    let rowRecord = myGridObj.getRowRecord(rowId);
                    // 绑定数据
                    if (AssertUtils.isNotEmpty(this.selField)) {
                        this.$emit("input", rowRecord[this.selField]);
                        //清空错误设置
                        this.inputItem["hasError"]=false;
                        this.selValue = rowRecord[this.selField];
                    }
                    //如果定义了回调方法 则执行回调操作
                    this.$emit("selRecord", {rowId, rowRecord});
                    $(`#${this.inputId}_grid_drop`).hide();
                    this.showFlag=false;
                });
                //如果存在初始化函数
                if (AssertUtils.isNotNull(this.item["initFun"]) && AssertUtils.isFunction(this.item["initFun"])) {
                    this.item["initFun"](myGridObj);
                }
            },

            //点击输入区域 显示下拉信息
            showPageDrop() {
                $(".go-common-drop").hide();
                if(this.showFlag){
                    this.showFlag=false;
                }
                this.showFlag = !this.showFlag;
                let _inputId = this.inputId;
                //如果已经显示 则点击进行隐藏
                if (this.showFlag) {
                    this.setElDropPos(true);
                    let initFlag = $(`#${_inputId}_grid_drop`).attr("initFlag");
                    //   第一次以后只是显示即可
                    if (initFlag !== "true") {
                        setTimeout(function () {
                            $(`#${_inputId}_grid_drop`).css("visibility","visible");
                        },200);

                        let myGridObj = GridDrop.initGridObject(_inputId, this);
                        //注册表格事件
                        this.initGridObjEvent(myGridObj);
                        $(`#${_inputId}_grid_drop`).attr("initFlag", "true");
                    } else {

                        $(`#${_inputId}_grid_drop`).show();
                    }
                } else {
                    $(`#${_inputId}_grid_drop`).hide();
                }
            }
        },
        watch: {
            value(newVal){
                this.selValue=newVal;
                if(this.inputItem.hasError){
                    ValidationUtils.validateItemByType(this.validate,this.inputItem, newVal,this,this.$options.name);
                }
            }
        },
        //销毁组件
        beforeDestroy(){
            if(this.timeout!=null){
                clearTimeout(this.timeout);
            }

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