<template>
    <div class="cptDrawer" v-if="filterInfo.length">
        <el-drawer :visible.sync="dialogFormVisible" :size="width" custom-class="cpt-drawer" v-bind="$attrs" :wrapperClosable="wrapperClosable" @close="close">
            <div slot="title" class="drawer-title">
                {{title}}
            </div>
            <div class="drawer-content">
                <slot v-if="isCustom"></slot>
                <el-row v-else :gutter="gutter">
                    <el-form ref="filterForm" :label-width="labelWidth" :validate-on-rule-change="false" :rules="filterRules" inline-message v-bind="$attrs">
                        <el-col v-for="(itemFilter,index) in filterList" :key="index" :span="itemFilter.span || 24">
                            <el-form-item :label="itemFilter.label+'：'" :prop="itemFilter.prop">
                                <!-- 运算符 -->
                                <el-select v-model="filterInfo[index]['symbol']" @change="symbolChange(itemFilter,index)" placeholder="请选择" v-on="itemFilter.operatorEvent" v-bind="itemFilter.operatorAttr">
                                    <el-option v-for="(itemOption, index) in itemFilter.options" :key="index" :label="itemOption[itemFilter.optionsProp?itemFilter.optionsProp.label:'label']" :value="itemOption[itemFilter.optionsProp?itemFilter.optionsProp.value:'value']"></el-option>
                                </el-select>
                                <!-- 输入框 -->
                                <el-input v-if="itemFilter.type==='input' && filterInfo[index]['symbol']!=='9'&&filterInfo[index]['symbol']!=='10'&&filterInfo[index]['symbol']!=='19'&&filterInfo[index]['symbol']!=='20'&&filterInfo[index]['symbol']!=='21'&&filterInfo[index]['symbol']!=='22'&&filterInfo[index]['symbol']!==''" :disabled="itemFilter.disabled" v-model.trim="filterInfo[index]['value']" v-bind="itemFilter.otherAttr" :placeholder="itemFilter.placeholder||'请输入'" v-on="itemFilter.otherEvent">
                                  <template v-if="itemFilter.prop==='completion_rate'" slot="append">%</template>
                                </el-input>
								<div :class="{'inputError':errorObject[itemFilter.prop].error,'inputNormal':errorObject[itemFilter.prop].normal}" v-if="itemFilter.type==='int' && filterInfo[index]['symbol']!=='9'&&filterInfo[index]['symbol']!=='10'&&filterInfo[index]['symbol']!=='19'&&filterInfo[index]['symbol']!=='20'&&filterInfo[index]['symbol']!=='21'&&filterInfo[index]['symbol']!=='22'&&filterInfo[index]['symbol']!==''">
									<el-input @blur="intBlur(itemFilter, index)" :ref="itemFilter.prop" :disabled="itemFilter.disabled" v-model.trim="filterInfo[index]['value']" v-bind="itemFilter.otherAttr" :placeholder="itemFilter.placeholder||'请输入'" v-on="itemFilter.otherEvent">
									  <template v-if="itemFilter.prop==='completion_rate'" slot="append">%</template>
									</el-input>
								</div>
                                <slot :name="itemFilter.slotName" v-if="itemFilter.type==='custom'"></slot>
                                <!--日期时间-->
                                <el-date-picker  v-show="itemFilter.type.includes('date') && filterInfo[index]['symbol']!=='9'&&filterInfo[index]['symbol']!=='10'&& filterInfo[index]['symbol']==='8'" v-model="filterInfo[index]['value2']" placeholder="请选择" type="daterange" v-bind="itemFilter.otherAttr" v-on="itemFilter.otherEvent"></el-date-picker>
                                <el-date-picker  v-show="itemFilter.type.includes('date') && filterInfo[index]['symbol']!=='9'&&filterInfo[index]['symbol']!=='10'&& filterInfo[index]['symbol']!=='8'" v-model="filterInfo[index]['value']" placeholder="请选择" type="date" v-bind="itemFilter.otherAttr" v-on="itemFilter.otherEvent"></el-date-picker>
                            </el-form-item>
							<div class="errorText" v-if="itemFilter.type==='int' && errorObject[itemFilter.prop].error">请输入正整数</div>
                        </el-col>
                    </el-form>
                </el-row>
            </div>
            <div class="drawer-footer">
                <div class="btn-group" v-if="isShowBtn">
                    <el-button size="small" v-for="(item,index) in cloaseBtn" :key="index" :type="item.btnType" @click="cancalHandle(item.btnCode)">{{item.name}}</el-button>
                </div>
                <slot name="append"></slot>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    export default {
        name: 'enoDrawer',
        props: {
            //搜索条件的列表
            filterList: {
                type: Array,
                default () {
                    return [{
                        label: '',
                        prop: '',
                        options: [],
                        operatorProp: '',
                        operatorEvent: {},
                        otherAttr: {},
                        otherEvent: {},
                    }];
                }
            },
			errorObject:{
                type: Object,
                default () {
                    return {};
                }
            },
            //搜索字段
            filterInfo: {
                type: Array,
                default () {
                    return [];
                }
            },
            //搜索字段的规则
            filterRules: {
                type: Object,
                default () {
                    return {};
                }
            },
            isCustom: {
                type: Boolean,
                default: false
            },
            //筛选条件之间的间隔
            gutter: {
                type: Number,
                default: 30
            },
            //左侧label的宽度
            labelWidth: {
                type: String,
                default: "120px"
            },
            show: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: '筛选'
            },
            wrapperClosable: {
                type: Boolean,
                default: false
            },
            width: {
                type: String,
                default: "560px"
            },
            isShowBtn: {
                type: Boolean,
                default: true
            },
            cloaseBtn: {
                type: Array,
                default () {
                    return [{
                        name: "查询",
                        btnType: "primary",
                        btnCode: 'search'
                    }, {
                        name: "重置",
                        btnType: "",
                        btnCode: 'reset'
                    }]
                }
            },
        },
        data() {
            return {
                dialogFormVisible: this.show,
            };
        },
        watch: {
            show() {
                this.dialogFormVisible = this.show;
            }
        },
        created() {

        },
        mounted() {

        },
        methods: {
            symbolChange(item,index){
                if (item.type.includes('date')){
                  this.$set(this.filterInfo[index],'value',"")
                  this.$set(this.filterInfo[index],'value2',"")
                    // this.filterInfo[index]['value'] = ''
                }
            },
            close() {
                this.$emit("update:show", false);
                this.$emit('close')
            },
            cancalHandle(code) {
				if(code==='reset'){
				    this.$parent.initfilterInfo()
				}
				
				let errorKey = false;
				Object.keys(this.errorObject).forEach(key => {
					if(this.errorObject[key].error){
						errorKey = true
					}
				})
				if(errorKey){
					return
				}

                this.$emit('btnClick', code)
            },
			intBlur(event, index){
				let value = this.filterInfo[index].value;
				if(value && !value.match(/^(\+)?\d+?$/)){
					this.filterInfo[index].value = ''
					this.errorObject[event.prop].error = true
					this.errorObject[event.prop].normal = false
				}
				else{
					this.errorObject[event.prop].error = false
					this.errorObject[event.prop].normal = true
				}
			}
        },
    };
</script>

<style lang="less" scoped>
	.errorText{
		color: red;
		word-break: keep-all;
		font-size: 6px;
		margin-left: 47%;
	}
	.inputError{
		 display: inline-flex;
		/deep/.el-input__inner{
			border-color: red;
		}
		/deep/.el-input__inner:hover {
		    border-color: red;
		}
	}
	.inputNormal{
	     display: inline-flex;
		/deep/.el-input__inner{
			border-color: #d9d9d9;
		}
		/deep/.el-input__inner:hover {
		    border-color: #4880ff;
		}
	}

    .cptDrawer {

        /deep/.el-drawer__header {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            margin-bottom: 24px;
            border-bottom: 1px solid #ebebeb;
            padding: 18px 24px
        }

        /deep/.el-drawer__body {
            max-height: calc(100vh - 108px - 63px - 24px);
            overflow-y: auto;
        }

        /deep/.drawer-content {
            padding: 0 24px;

            .el-col {
                .el-form-item__content {
                    display: flex;
                    align-items: center;

                    .el-select {
                        max-width: 100px;
                        margin-right: 10px;
                    }

                    .el-input {
                        //max-width: 260px;
                    }
                    .el-date-editor.el-range-editor .el-range__icon {
                        margin-left: 10px;
                    }
                    .el-date-editor.el-input{
                        width: 100%;
                    }
                }

            }
        }

        .drawer-footer {
            width: 100%;
            padding: 24px;
            border-top: 1px solid #ebebeb;
            text-align: right;
            position: absolute;
            bottom: 0;
            background: #fff;
        }
    }
</style>