<template>
  <el-col :lg="lg || span || FENCE1200" :sm="sm || span || FENCE768" :span="span" :xl="xl || span || FENCE1920" class="app-filter-item" v-bind="$attrs">
    <el-form-item :label="label" :label-width="labelWidth" v-bind="$attrs" v-on="$listeners">
      <slot :span="span" />
      <template slot="label">
        <slot name="label" />
      </template>
    </el-form-item>
    <slot name="col" />
  </el-col>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: '',
    },
    xl: {
      type: Number,
      default: 0,
    },
    lg: {
      type: Number,
      default: 0,
    },
    sm: {
      type: Number,
      default: 0,
    },
    span: {
      type: Number,
      default: 6,
    },
    labelWidth: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      FENCE1920: 5,
      FENCE1200: 5,
      FENCE768: 5,
    };
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 100%;
  display: flex;
}

::v-deep {
  .el-form-item__content {
    .el-select,
    .el-cascader,
    .el-input,
    .el-cascader,
    .el-date-editor {
      width: 100%;
    }
  }
}

.app-filter-item {
  ::v-deep {
    .el-form-item .el-form-item__label {
      --el-form-label-font-size: 13px;
      color: #000000d9;
      // display: flex;
      // align-items: center;
      text-align: left;
    }

    .el-form-item .el-form-item__label,
    .el-input .el-input__inner,
    .el-form-item .el-form-item__content,
    .el-input {
      // align-items: center;
    }

    .el-input {
      font-size: 14px;
    }

    .el-form-item__content {
      flex: 1;
      margin-left: 0 !important;
    }

    .el-input .el-input__inner {
      height: 32px;
    }

    .el-form-item {
      margin-bottom: 15px;
    }

    .el-range-editor.el-input__inner {
      height: 32px;
      width: 100%;
      padding: 0px 10px;
    }
    .el-textarea__inner {
      width: 100%;
      padding: 0px 10px;
    }

    .el-select .el-input .el-select__caret {
      line-height: 32px;
    }

    .el-radio,
    .el-checkbox {
      margin-right: 15px;
    }
  }
}

.app-filter {
  .app-filter-item {
    ::v-deep {
      .el-form-item {
        margin-bottom: 11px;
      }
    }
  }
}
</style>
