<template>
    <div class="btn-item" :class="alignClass">
        <div class="btn-item btnItem" @click="openQueryPanel">
            <div class="goBtn btn-circle">
                <div class="btnImg">
                    <i class="ivu-icon ivu-icon-ios-search"  style="font-size: 16px;position: relative;top:2px;" ></i>
                </div>
                <div class="btnLabel">{{'高级'}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    //关闭多条件查询区域
    import {GoingUtils, AssertUtils} from "goingutils";
    import goSearchMixins from "./mixins/goSearchMixins";
    import GoingForm from "../../jsCom/comCtl/goingForm";
    import _initMoreQueryEvent from "../../common/initMoreQueryEvent";
    import _initQueryPanelByDxCell from "../../common/initQueryPanelByDxCell";
    import EditorTypeUtils from "../../common/editorTypeUtils";

    function _hideMorePanel(panelId) {
        $("#" + panelId)
            .removeClass("fadeInRight")
            .addClass("fadeOutRight");
        setTimeout(function () {
            $("#" + panelId).hide();
            $(".more-query-cover").remove();
        }, 300);
    }
    export default {
        name: "go-search-more",
        mixins: [goSearchMixins],
        data: function () {
            return {
                queryCtlId:'',
                prefixCls: GoingUtils.getUUid(12).substring(0, 11),
                moreQueryPanelId: GoingUtils.getUUid(12),
                queryAry: [],
                initFlag: false,
                falg: "document"
            };
        },
        computed: {
            //获取居左 居右的样式
            alignClass() {
                if (this.align === "left") {
                    return "pull-left";
                } else if (this.align === "right") {
                    return "pull-right";
                }
                return "";
            }
        },
        props: {
            align: {
                type: String,
                default: "left"
            },
            id: {
                type: String,
                default: ""
            },
            colNum: {
                type: Number,
                default: 1
            },
            labelWidth: {
                type: [Number, String],
                default: 110
            },
            inputWidth: {
                type: [Number, String],
                default: 200
            },
            parent: {
                type: String,
                default: ""
            }
        },
        methods: {
            getQueryPanelLeftPos() {
                let moreCtl = this;
                //如果激活方式是layout
                if (this.falg === "layout") {
                    return (
                        parseFloat($("#" + moreCtl.moreQueryPanelId).closest(".dhx_cell_layout").css("width")) - 400);
                } else if (this.falg === "card") {
                    //如果是card
                    return (
                        parseFloat($("#" + moreCtl.moreQueryPanelId).closest(".ivu-card").css("width")) - 400);
                } else if (this.falg === "document") {
                    //如果是当前界面
                    return parseFloat($(document.body).css("width")) - 400;
                }
            },
            getQueryPanelHeight() {
                let moreCtl = this;
                //如果激活方式是layout
                if (this.falg === "layout") {
                    return parseFloat(
                        $("#" + moreCtl.moreQueryPanelId).closest(".dhx_cell_layout").css("height")
                    );
                } else if (this.falg === "card") {
                    //如果是card
                    return parseFloat($("#" + moreCtl.moreQueryPanelId).closest(".ivu-card").css("height"));
                } else if (this.falg === "document") {
                    //如果是当前界面
                    return parseFloat($(document.body).css("height")) - 10;
                }
            },
            initQueryFormPanel() {
                let vueObj = this;
                let items = this.getSearchItems();
                let queryAry = [];

                //对查询项 进行初始化过滤相关处理
                this.queryAry = EditorTypeUtils.getQueryAry(items);
                queryAry = this.queryAry;
                let goingForm = new GoingForm("query", this.prefixCls);
                //初始化form对象
                goingForm.initForm({
                    fieldAry: queryAry,
                    colNum: this.colNum,
                    labelWidth: this.labelWidth,
                    inputWidth: this.inputWidth
                });
                this.goingFrom = goingForm;
                if (AssertUtils.isNotEmpty(this.id)) {
                    this.$store[this.id] = goingForm;
                }
                //设置内容
                $("#" + vueObj.moreQueryPanelId + "_body").html(goingForm.html());
                //初始化控件 根据类名称
                EditorTypeUtils.initGoCtlByClass(
                    $(`#${vueObj.moreQueryPanelId}_body`),
                    goingForm.inputWidth,
                    goingForm
                );
                this.initFlag = true;
            },
            //点击按钮 打开多条件查询区域
            openQueryPanel() {
                let vueObj = this;
                if($("#main_router_view").get(0)!=null){
                    //添加遮盖层
                    $(`<div class='page-cover more-query-cover' style="z-index: ${GoingUtils.getCurMaxZIndex()}"></div>`).appendTo($("#main_router_view"));
                }else{
                    //添加遮盖层
                    $(`<div class='page-cover more-query-cover'  style="z-index: ${GoingUtils.getCurMaxZIndex()}"></div>`).appendTo($(document.body));
                }
                //显示多条件区域,同时显示遮罩
                $("#" + vueObj.moreQueryPanelId)
                    .show()
                    .css("height", vueObj.getQueryPanelHeight())
                    .css("zIndex", GoingUtils.getCurMaxZIndex())
                    .css("left", vueObj.getQueryPanelLeftPos());
                $("#" + vueObj.moreQueryPanelId)
                    .removeClass("fadeOutRight")
                    .addClass("fadeInRight");


                //点击遮罩 关闭相应的查询区域
                $(".more-query-cover").click(function () {
                    let panelId = vueObj.moreQueryPanelId;
                    _hideMorePanel(panelId);
                });
                if (!this.initFlag) {
                    this.initQueryFormPanel(vueObj);
                }
            }
        },
        mounted: function () {
            //需要初始化表单才行
            EditorTypeUtils.initGoForm();
            let moreCtl = this;
            moreCtl.vueObj = this;
            //初始化查询控件
            if($("#main_router_view").get(0)!=null){
                this.queryCtlId= _initQueryPanelByDxCell(this.moreQueryPanelId,$("#main_router_view"));
            }else{
                this.queryCtlId=_initQueryPanelByDxCell(this.moreQueryPanelId, $(document.body));
            }
            //点击取消按钮 或者点击头部收缩按钮 都会关闭窗口
            $(`#${this.moreQueryPanelId}_cancelBtn,#${this.moreQueryPanelId}_header_icon`).click(function () {
                let panelId = moreCtl.moreQueryPanelId;
                _hideMorePanel(panelId);
            });

            /**
             * 初始化查询条件
             */
            _initMoreQueryEvent(this.moreQueryPanelId, moreCtl);
        },
        beforeDestroy() {
            //销毁查询组件
            if($("#"+this.queryCtlId).get(0)!=null){
                $("#"+this.queryCtlId).remove();
                this.queryCtlId=null;
            }

            if (this.$store == null) {
                return void 0;
            }
            this.goingFrom = null;
            //判断是否存在对象 存在相应的销毁方法
            if (
                this.$store != null &&
                this.$store[this.id] != null &&
                AssertUtils.isFunction(this.$store[this.id].destructor)
            ) {
                //销毁内存
                this.$store[this.id].destructor();
            }
            //置空对象
            this.$store[this.id] = null;
        }
    };
</script>
