<template>
    <div class="conditionsDiy clearfix">
        <el-form
            ref="form"
            :inline="true"
            label-position="right"
            label-width="85px"
            size="mini"
            class="demo-form-inline"
            @submit.native.prevent
            :class="{
                'hide-item4': !selfAdvanced && size==4 ,
                'hide-item10': !selfAdvanced && size==10 ,
                'hide-item20': !selfAdvanced && size==20 ,
            }"
        >
            <slot></slot>
            <span style=" margin-left: 20px;line-height: 2; height: 20px;">
               <slot name="textSpan"></slot>
            </span>
            <span style="float: right; padding-bottom:5px;" v-if="!little">
                <slot name="primaryPrv"></slot>
                <el-button
                    type="primary"
                    html-type="submit"
                    icon="search"
                    :style="{ marginLeft: '8px' }"
                    @click="submit"
                    :loading="searchLoading"
                >查询</el-button>
                <el-button
                    type="dashed"
                    :style="{ marginLeft: '3px' }"
                    @click="reset"
                    :plain="plain"
                    :loading="searchLoading"
                >重置</el-button>
                <el-link
                    :underline="false"
                    @click="toggle"
                    v-show="Itemlength > size"
                    style="margin-left: 3px"
                >
                    {{ selfAdvanced ? '收起' : '展开' }}
                    <i
                        :class="selfAdvanced ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
                    />
                </el-link>
                <slot name="dashedNext"></slot>
            </span>
            <el-form-item v-else>
                <slot name="primaryPrv"></slot>
                <el-button type="primary" @click="submit" :loading="searchLoading">查询</el-button>
                <el-button
                    :plain="plain"
                    type="dashed"
                    :style="{ marginLeft: '3px' }"
                    @click="reset"
                    :loading="searchLoading"
                >重置</el-button>
                <slot name="dashedNext"></slot>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import seFiltrateDiyItem from "./su-filtrate-diy-item"
export default {
    item:seFiltrateDiyItem,
    name: "filtrateDiy",
    data() {
        return {
            selfAdvanced: this.advanced,
            // size: 4,
            Itemlength: 0
        };
    },
    props: {
        searchLoading: {
            type:Boolean,
            default:false
        },
        little: {
            type:Boolean,
            default:false
        },
        /* 当筛选项过多时，是否默认显示全部 */
        advanced: {
            type:Boolean,
            default:false
        },
        title: {
            type: String,
            required: false
        },
        size: {
            type: Number,
            default: 10
        },
        plain:{
            type:Boolean,
            default:false
        }
    },
    mounted() {
        let vm=this;
        this.$nextTick(() => {
            vm.Itemlength = $(vm.$el).find(".el-form-item").length;
            // vm.getItemLengthTimer=setInterval(function () {
            //     vm.Itemlength = $(vm.$el).find(".el-form-item:visible").length;
            // },500);
        });
    },
    beforeDestroy() {
        let vm = this;
        // clearInterval(vm.getItemLengthTimer)
    },
    methods: {
        submit() {
            this.$emit("submit");
        },
        reset() {
            this.$emit("reset");
        },
        toggle() {
            this.selfAdvanced = !this.selfAdvanced;
        }
    }
};
</script>

<style lang="less" scoped>
.conditionsDiy {
    padding: 12px 0 0 0;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 15px;
    .demo-form-inline{
        display: inline-block;
    }
    /deep/.el-form-item.el-form-item--mini {
        margin-bottom: 5px;
        margin-right: 7px;
        min-width: 312px;
    }
    /deep/.el-form-item__label {
        font-size: 12px;
    }
    /deep/ .el-select {
        .el-tag{
            height: 23px;
            margin: 1px 0 1px 6px;
            line-height: 20px;
            span {
                -webkit-box-flex: auto;
                -ms-flex: auto;
            }
        }
        input {
            width: auto;
            padding-right: 0;
        }
    }
    //  远程搜索样式
    /deep/ .remote-select {
        .el-input--mini {
            .el-input__inner {
                padding-right: 30px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
    //  远程搜索样式多选
    /deep/ .el-select {
        .el-tag {
            span {
                display: inline-block;
                max-width: 90px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .el-icon-close {
                top: -4px;
            }
        }
    }
    /deep/.input-with-select {
        /deep/.el-input-group__prepend {
            background-color: #fff;
        }
        /deep/.el-select {
            .el-input__suffix {
                // right: -25px;
            }
        }
    }
    // 样式优化 start
    //普通input
    /deep/ .el-input--mini {
        .el-input__inner {
            width: 226px;
            color: #333;
        }
        .el-input--suffix {
            .el-input__inner {
                // width: 123px;
            }
        }
    }
    // select
    /deep/ .el-select {
        .el-input--mini {
            .el-input__inner {
                box-sizing: border-box;
                padding-right: 30px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
    // cascader
    /deep/ .el-cascader--mini {
        .el-cascader__tags .el-tag {
            height: 23px;
            span {
                -webkit-box-flex: auto;
                -ms-flex: auto;
                flex: auto;
                max-width: 90px;
            }
        }
        .el-cascader__search-input {
            height: 14px;
        }
    }
    /deep/ .numRange.el-input--mini {
        font-size: 12px;
        .el-input__inner {
            width: 103px;
            color: #333;
        }
    }
    /deep/ .numRange.el-input {
        width: 103px;
        .el-input__inner {
            width: 103px;
            color: #333;
        }
    }
    /deep/ .selectInput.el-input--mini {
        .el-input__inner {
            width: 125px;
        }
    }
    /deep/.selectInput.el-input--suffix {
        width: 100px;
        .el-input__inner {
            width: 100px;
        }
    }
    // /deep/.rangePicker {
    /deep/ .el-date-editor {
        width: 226px;
    }
    // }
    //rangePickerSingle日期独立
    /deep/.rangePickerSingle {
        font-size: 12px;

    }
    //timerangePickerSingle
    /deep/ .timerangePickerSingle {
        font-size: 12px;
    }
    // timerangePicker
    /deep/.timerangePicker {
        /deep/ .el-date-editor {
            width: 334px;
        }
    }
    // inputRange
    /deep/.inputRange {
        font-size: 12px;
        .el-input--mini {
            width: 104px;
            .el-input__inner {
                width: 104px;
                color: #333;
            }
        }
        .el-date-editor {
            width: 103px;
        }

       /*.el-input__suffix {*/
       /*     right: 0;*/
       /* }*/
        .el-input--prefix .el-input__inner {
            padding-left: 20px;
            padding-right: 18px;
        }
        .el-input__prefix {
            left: -1px;
        }

    }
    // 样式优化 end

    .hide-item4 {
        /deep/ .el-form-item:nth-child(n + 5) {
            display: none;
        }
    }
    .hide-item10 {
        /deep/ .el-form-item:nth-child(n + 11) {
            display: none;
        }
    }
    .hide-item20 {
        /deep/ .el-form-item:nth-child(n + 21) {
            display: none;
        }
    }
}
</style>
