<template>
    <div class="customFilter">
        <!--搜索-->
        <el-row :class="{noSearch:!isSearch}" :gutter="gutter">
            <el-form ref="filterForm" v-bind="$attrs" :class="{flexLayout: isFlexLayout}" :label-width="labelWidth"
                     :model="filterInfo" :rules="filterRules" :validate-on-rule-change="false" inline-message>
                <el-col v-for="(itemFilter,index) in filterList" v-show="!isSearch?true:open(index)"
                        :key="itemFilter.index" :span="itemFilter.span || 8">
                    <el-form-item :class="itemFilter.itemClass" v-bind="itemFilter.formItemAttr" :label="formatColon(itemFilter.label)" :prop="itemFilter.prop">

                        <!--输入框-->
                        <el-input v-if="itemFilter.type==='input'"
                                  v-bind="itemFilter.otherAttr"
                                  v-model.trim="filterInfo[itemFilter.prop]" v-on="itemFilter.otherEvent"
                                  :title="filterInfo[itemFilter.prop]&&filterInfo[itemFilter.prop].length>=12?filterInfo[itemFilter.prop]:''"
                                  :disabled="(itemFilter.otherAttr&&itemFilter.otherAttr.disabled) || disabled"
                                  :placeholder="disabled?'':(itemFilter.otherAttr&&itemFilter.otherAttr.placeholder)||'请输入'"></el-input>

                        <!--下拉框-->
                        <el-select v-if="itemFilter.type==='select'" v-model="filterInfo[itemFilter.prop]"
                                    :title="filterInfo[itemFilter.prop]&&filterInfo[itemFilter.prop].length>=12?filterInfo[itemFilter.prop]:''"
                                   v-bind="itemFilter.otherAttr"
                                   v-on="itemFilter.otherEvent"
                                   :class="{close:filterInfo[itemFilter.prop]!=''}"
                                   :disabled="(itemFilter.otherAttr&&itemFilter.otherAttr.disabled) || disabled" :placeholder="disabled?'':(itemFilter.otherAttr&&itemFilter.otherAttr.placeholder||'请选择')">
                            <el-option v-for="(itemOption, index) in itemFilter.options"
                                       :key="index"
                                       :label="itemOption[itemFilter.optionsProp?itemFilter.optionsProp.label:'label']"
                                       :style="{color:itemOption[itemFilter.optionsProp?itemFilter.optionsProp.value:'value']==='searchMore'?'#409Eff!important':''}"
                                       :value="itemOption[itemFilter.optionsProp?itemFilter.optionsProp.value:'value']"></el-option>
                        </el-select>

                        <!--多选-->
                        <el-checkbox v-if="itemFilter.type==='checkbox'"
                                     v-model="filterInfo[itemFilter.prop]"
                                     v-bind="itemFilter.otherAttr"
                                     v-on="itemFilter.otherEvent"
                                    :disabled="(itemFilter.otherAttr&&itemFilter.otherAttr.disabled) || disabled"></el-checkbox>

                        <!--单选-->
                        <el-radio-group v-if="itemFilter.type==='radio'"
                                        :disabled="(itemFilter.otherAttr&&itemFilter.otherAttr.disabled) || disabled"
                                        v-model="filterInfo[itemFilter.prop]"
                                        v-bind="itemFilter.otherAttr"
                                        v-on="itemFilter.otherEvent">
                            <el-radio v-for="(item,index) in itemFilter.otherAttr.radioArr" :key="index"
                                      :label="item.label">{{ item.name }}
                            </el-radio>
                        </el-radio-group>

                        <!-- 远程搜索下拉框 -->
                        <!-- bind popper-class="resume_autocomplete_input" -->
                        <!-- on: :fetch-suggestions="querySearch" -->
                        <!-- on: select="handleSelect" -->
                        <el-autocomplete v-if="itemFilter.type==='autocomplete'" v-model="filterInfo[itemFilter.prop]"
                                         v-bind="itemFilter.otherAttr"
                                         v-on="itemFilter.otherEvent"
                                         :disabled="(itemFilter.otherAttr&&itemFilter.otherAttr.disabled) || disabled"
                                         :placeholder="disabled?'':(itemFilter.otherAttr&&itemFilter.otherAttr.placeholder||'请选择')">
                        </el-autocomplete>

                        <!-- 树状选择器 -->
                        <el-cascader v-if="itemFilter.type==='cascader'" :ref="itemFilter.prop"
                                     v-model="filterInfo[itemFilter.prop]"
                                     v-bind="itemFilter.otherAttr"
                                     v-on="itemFilter.otherEvent" :disabled="(itemFilter.otherAttr&&itemFilter.otherAttr.disabled) || disabled"
                                     :options="itemFilter.options" :placeholder="disabled?'':(itemFilter.otherAttr&&itemFilter.otherAttr.placeholder||'请选择')"
                                     :props="itemFilter.optionsProp"
                                     @change="cascaderChange(itemFilter.prop)"></el-cascader>

                        <!--日期时间-->
                        <el-date-picker v-if="itemFilter.type.includes('date')"
                                        v-model="filterInfo[itemFilter.prop]"
                                        v-bind="itemFilter.otherAttr"
                                        v-on="itemFilter.otherEvent"
                                        :disabled="(itemFilter.otherAttr&&itemFilter.otherAttr.disabled) || disabled" :placeholder="disabled?'':(itemFilter.otherAttr&&itemFilter.otherAttr.placeholder||'请选择')"
                                        :type="itemFilter.type"></el-date-picker>
                        <!--switch开关-->
                        <el-switch v-if="itemFilter.type==='switch'"
                                   v-model="filterInfo[itemFilter.prop]"
                                   v-bind="itemFilter.otherAttr" v-on="itemFilter.otherEvent"
                                   :disabled="(itemFilter.otherAttr&&itemFilter.otherAttr.disabled) || disabled"></el-switch>
                        <!-- 远程搜索 -->
                        <enoRemoteSearch v-else-if="itemFilter.type==='remoteSearch'" v-model="filterInfo[itemFilter.prop]"
                                      v-bind="itemFilter.otherAttr" v-on="itemFilter.otherEvent" :initName.sync="itemFilter.otherAttr.initName"
                                      :disabled="(itemFilter.otherAttr&&itemFilter.otherAttr.disabled) || disabled"
                                      :placeholder="disabled?'':(itemFilter.otherAttr&&itemFilter.otherAttr.placeholder||'请选择')" :trigger-on-focus="true"
                                      :url="itemFilter.searchUrl" :getParams="itemFilter.otherAttr.getParams" :params="itemFilter.otherAttr.params"
                                      value-key="name"></enoRemoteSearch>
                        <!-- 自定义内容 -->
                        <slot v-if="itemFilter.type==='custom'" :name="itemFilter.slotName"></slot>
						</el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <div v-if="isSearch" class="filterBtn">
            <el-button v-for="(btn, index) in filterBtn.btnList" :key="index" v-bind="btn.otherAttr" class="one"
                       @click="btn.click()">{{ btn.text }}
            </el-button>
            <el-button v-if="filterList.length>3" class="two" size='mini' @click="Opentrue=!Opentrue">展开 <i
                class="el-icon-arrow-down"/></el-button>
            <div v-else style="width:75px"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "enoCustomFilter",
    inheritAttrs: false,
    data() {
        var valid = this.$refs
        return {
            Opentrue: true,
            valid: valid,
        };
    },
    props: {
        // 是否为搜索栏
        isSearch: {
            type: Boolean,
            default: false
        },
        /*是否使用flex布局*/
        isFlexLayout: {
            type: Boolean,
            default: true
        },
        //筛选条件之间的间隔
        gutter: {
            type: Number,
            default: 30
        },
        //禁用字段
        disabled: {
            type: Boolean,
            default: false
        },
        //搜索字段
        filterInfo: {
            type: Object,
            require: true
        },
        //搜索字段的规则
        filterRules: {
            type: Object,
            default() {
                return {};
            }
        },
        //左侧label的宽度
        labelWidth: {
            type: String,
            default: "100px"
        },
        //搜索条件的列表
        filterList: {
            type: Array,
            require: true
        },

        // 重置
        resetMethods: {
            type: Function
        },
        searchMethods: {
            type: Function
        },
        /*
         * 搜索区域按钮的code
         * 如果使用默认filterBtn，则该值必传
         * 如果传入filterBtn，则该值可以不传
         * */
        filterBtnCode: {
            type: Object,
            default() {
                return {};
            }
        },
        //搜索区域的操作按钮
        filterBtn: {
            type: Object,
            default() {
                return {
                    span: 6,
                    btnList: [{
                        text: "查询",
                        authCode: this.filterBtnCode.search,
                        click: () => {
                            this.search();
                        },
                        otherAttr: {
                            size: "mini",
                            type: "primary",
                            // icon: 'el-icon-search',
                            id: "filter-search"
                        }
                    },
                        {
                            text: "重置",
                            authCode: this.filterBtnCode.reset,
                            click: () => {
                                this.reset();
                            },
                            otherAttr: {
                                size: "mini",
                                // type: 'warning',
                                // icon: 'el-icon-refresh',
                                id: "filter-reset"
                            }
                        }
                    ]
                };
            }
        }
    },
    watch: {},
    methods: {
        open(index) {
            if (this.Opentrue) {
                return index < 3;
            } else {
                return index >= 0;
            }
        },
        search() {
            this.searchMethods();
            this.$emit("filter-btn-click", "search");
        },
        reset() {
            for (let key in this.filterInfo) {
                this.filterInfo[key] = "";
            }
            this.$refs.filterForm.resetFields();
            this.resetMethods();
            this.$emit("filter-btn-click", "reset");
        },
        cascaderChange(flag) {
            this.$refs[flag].dropDownVisible = false;
            this.$emit('cascaderChange',flag)
        },
        /* 格式化冒号-使用中文冒号 */
        formatColon(label){
            if(!label)return
            let reg = /:|：/
            if(!reg.test(label)){
                return label+"："
            }else{
                return label.replace(':','：')
            }
        }
    },
};
</script>

<style lang="less" scoped>
@height: 32px;

.customFilter {
    .el-row {
        box-sizing: border-box;
        padding-right: 290px;
        /*padding-bottom: 9px;*/

        &.noSearch {
            padding-right: 0;
        }
    }

    position: relative;

    .el-form {
        width: 100% !important;

        &.flexLayout {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-wrap: wrap;

            .el-col {
                float: none;
            }
        }

        .el-col {
            box-sizing: border-box;

            &:last-child {
                .el-form-item {
                    margin-bottom: 0;
                }
            }
        }

        .el-form-item {
            margin-bottom: 12px;

            /deep/ .el-form-item__label {
                // width: 100px !important;
                padding-right: 0;
                line-height: @height;

                &:before {
                    color: @wrongColor;
                }
            }

            /deep/ .el-form-item__content {
                min-width: 50px;
                line-height: @height;

                .el-select,
                .el-cascader,
                .el-autocomplete,
                .el-input {
                    width: 100%;
                    // max-width: 350px;

                    .el-input__inner {
                        height: @height;
                        font-size: 14px;
                        line-height: @height;
                        padding-left: 12px;
                        border-color: @borderColor;
                        color: @textColor;
                    }

                    .el-input__suffix {
                        .el-input__suffix-inner {
                            .el-icon-arrow-up {
                                &::before {
                                    color: #979797;
                                    content: "\e78f";
                                }

                                // &::after {
                                //     content: ""!important;
                                // }
                            }

                            // .el-select__caret {
                            //     padding-left: 5px;
                            //     color: #979797;

                            //     &::after {
                            //         content: "\e78f";
                            //     }

                            //     &:before {
                            //         // content: "\e78f";
                            //         color: #979797;
                            //     }
                            // }
                        }
                    }

                    &.is-disabled {
                        .el-input__inner {
                            background-color: @disabledColor;
                            color: @57Color;

                            &::-webkit-input-placeholder {
                                color: transparent;
                            }

                            /* 使用webkit内核的浏览器 */

                            &:-moz-placeholder {
                                color: transparent;
                            }

                            /* Firefox版本4-18 */

                            &::-moz-placeholder {
                                color: transparent;
                            }

                            /* Firefox版本19+ */

                            &:-ms-input-placeholder {
                                color: transparent;
                            }
                        }

                        &:hover {
                            .el-input__inner {
                                border-color: @borderColor;
                            }
                        }
                    }
                }

                .el-cascader {
                    vertical-align: bottom;

                    &.hasDefaultValue {
                        .el-input {
                            .el-input__inner {
                                &::-webkit-input-placeholder {
                                    color: #333;
                                }
                            }
                        }

                        .el-cascader__tags {
                            .el-cascader__search-input {
                                &::-webkit-input-placeholder {
                                    font-size: 14px;
                                    color: #333;
                                }
                            }
                        }
                    }

                    .el-input__suffix {
                        color: #979797;

                        .el-input__suffix-inner {
                            .el-icon-arrow-down {
                                color: #979797;
                                margin-right: 0;

                                &::before {
                                    content: "\e790";
                                    color: #979797;
                                }

                                &::after {
                                    content: "" !important;
                                }
                            }
                        }
                    }

                    .el-cascader__tags {
                        .el-cascader__search-input {
                            margin-left: 12px;
                        }
                    }
                }

                .el-input {
                    &:hover {
                        .el-input__inner {
                            border-color: @mainColor;
                        }
                    }
                }

                .el-textarea {
                    .el-textarea__inner {
                        border-color: @borderColor;
                    }

                    .el-input__count {
                        background-color: transparent;
                        right: 20px;
                        bottom: 0;
                    }

                    &:hover {
                        .el-textarea__inner {
                            border-color: @mainColor;
                        }
                    }

                    &.is-disabled {
                        .el-textarea__inner {
                            background-color: @disabledColor;
                            color: @57Color;

                            &::-webkit-input-placeholder {
                                color: transparent;
                            }

                            /* 使用webkit内核的浏览器 */

                            &:-moz-placeholder {
                                color: transparent;
                            }

                            /* Firefox版本4-18 */

                            &::-moz-placeholder {
                                color: transparent;
                            }

                            /* Firefox版本19+ */

                            &:-ms-input-placeholder {
                                color: transparent;
                            }
                        }
                    }

                    &:hover {
                        &.is-disabled {
                            .el-textarea__inner {
                                border-color: @borderColor !important;
                            }
                        }
                    }
                }

                .el-range-editor--mini.el-input__inner {
                    height: @height;
                    padding-left: 12px !important;

                    .el-input__icon,
                    .el-range-separator {
                        line-height: 24px;
                    }
                }

                .el-date-editor {
                    width: 100%;
                    // max-width: 350px;
                    &.el-range-editor.is-disabled{
                        background-color: @disabledColor;
                        border-color:@borderColor
                    }
                }


                .dateRangePicker {
                    .el-date-editor {
                        width: 100%;
                        max-width: 130px;

                        .el-input__inner {
                            padding-left: 0 !important;
                        }
                    }
                }

                .el-row {
                    // max-width: 350px;

                    .el-col {
                        &.right {
                            text-align: right;
                        }
                    }
                }
            }

            &.is-error {
                /deep/ .el-form-item__content {
                    line-height: 1;

                    .el-input {
                        .el-input__inner {
                            border-color: @wrongColor;
                            color: @wrongColor;
                        }
                    }

                    .el-form-item__error {
                        color: @wrongColor;
                        line-height: 1;
                        position: relative;
                        font-family: element-icons !important;
                        margin-left: 16px;
                        display: block;
                        &:before {
                            content: "\e79d";
                            position: absolute;
                            left: -16px;
                        }
                    }
                }
            }

            &.operate-btn {
                /deep/ .el-form-item__content {
                    line-height: @height;
                    margin-left: 0 !important;

                    .el-button {
                        height: @height;
                    }
                }
            }
        }

        &.aColForm {
            .el-form-item {
                width: 420px;
            }
        }
    }

    .filterBtn {
        position: absolute;
        right: 40px;
        top: 18px;
        display: flex;

        .one {
            height: 32px;
            width: 60px;
        }
    }
}
</style>
<style lang="less">
.el-form-item {
    &.is-error {
        /deep/ .el-form-item__content {
            // line-height: 1;    //影响“养护执行”非空验证样式

            .el-input.el-input--mini {
                .el-input__inner {
                    border-color: @wrongColor;
                    color: @wrongColor;
                }
            }

            .el-form-item__error {
                color: @wrongColor;
                // line-height: 1;
                // position: relative;
                font-family: element-icons !important;
                margin-left: 16px;

                &:before {
                    content: "\e79d";
                    position: absolute;
                    left: -16px;
                }
            }
        }
    }
}

.el-cascader-panel .el-radio {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.el-cascader-node .is-disabled ~ .el-cascader-node__label {
    color: #ccc;
}

// .customFilter .el-form .el-form-item .el-form-item__content .el-cascader .el-input .el-icon-arrow-down.is-reverse {
//     transform: translateX(14px) translateY(2px) rotateZ(180deg);
//     line-height: 32px;
// }
// .customFilter .el-form .el-form-item .el-form-item__content .el-cascader .is-focus .el-icon-arrow-down.is-reverse {
//     transform: rotateZ(180deg);
//     line-height: 32px;
// }
</style>
