<template>
  <el-row :gutter="gutter">
    <el-form ref="form" :model="value" class="custom-form" :label-width="labelWidth" size="medium" :inline="inline"
             :rules="rules"
             :disabled="disabled" :label-position="labelPosition" @submit.native.prevent>
      <slot :disabled="disabled"></slot>
    </el-form>
  </el-row>

</template>

<script>
export default {
  props: {
    inline: {
      type: Boolean,
      default: true
    },
    value: {
      type: Object,
      required: true
    },
    labelWidth: {
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    labelPosition: {
      type: String,
      default: 'right'
    },
    gutter: {
      type: Number,
      default: 0
    },
    rules: {
      type: Object,
      default: () => {
      }
    }
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((validate, unValidate) => {
          if (!validate) {
            for (let key in unValidate) {
              if (unValidate.hasOwnProperty(Object.keys(unValidate)[0])) {
                this.$modal.msgError(unValidate[Object.keys(unValidate)[0]][0].message)
                break;
              }
            }
            return reject('fail')
          } else {
            return resolve('success')
          }
        })
      })
    },
    clearValidate() {
      return this.$refs.form.clearValidate()
    }
  }
}
</script>

<style>
/**
* 在八个长的的标签之后
*/
.custom-form .afterEightChar .el-form-item .el-form-item__label {
  min-width: calc(25%) !important;
}

.custom-form .popoverInput  .el-form-item__content{
  width: 100% !important;
}


.custom-form .el-form-item {
  margin-bottom: 16px !important;
}

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

.custom-form .detailInput .el-form-item__label {
  min-width: 25% !important;
}

.custom-form .wholeSPan .el-form-item .el-form-item__label {
  min-width: calc(10% + 20.5px) !important;
}

.custom-form .littleWholeSPan .el-form-item .el-form-item__label {
  min-width: calc(6% + 24.7px) !important;
}


.custom-form .wholeSPan .el-form-item__content {
  width: 86% !important;
}

.custom-form .ninewholeSPan .el-form-item__content {
  width: 83% !important;
}

.custom-form .ninewholeSPan .el-form-item .el-form-item__label {
  min-width: calc(14% + 22px) !important;
}


.custom-form .tenwholeSPan .el-form-item .el-form-item__label {
  min-width: calc(15% + 18px) !important;
}

.custom-form .tenwholeSPan .el-form-item__content {
  width: 82% !important;
}

.custom-form .eightwholeSPan .el-form-item__content {
  width: 84.8% !important;
}

.custom-form .eightwholeSPan .el-form-item .el-form-item__label {
  min-width: calc(12% + 25px) !important;
}

.custom-form .detailInputTextarea .el-form-item__label {
  min-width: calc(10% + 19.7px) !important;
}

.custom-form .detailInputLong .el-form-item__label {
  min-width: calc(12% + 4px) !important;
}

.custom-form .detailInputTextarea .el-form-item {
  width: 101% !important;
}

.custom-form .ninedetailInputTextarea .el-form-item__label {
  min-width: calc(12% + 18px) !important;
}

.custom-form .ninedetailInputTextarea .el-form-item {
  width: 118% !important;
}

.custom-form .tendetailInputTextarea .el-form-item__label {
  min-width: calc(12.5% + 18px) !important;
}

.custom-form .tendetailInputTextarea .el-form-item {
  width: 119% !important;
}

.custom-form .tendetailInputTextarea .el-form-item__content {
  width: 69.1% !important;
}

.custom-form .eightdetailInputTextarea .el-form-item__label {
  min-width: calc(11% + 13px) !important;
}

.custom-form .eightdetailInputTextarea .el-form-item {
  width: 121% !important;
}

.custom-form .eightdetailInputTextarea .el-form-item__content {
  width: 70.2% !important;
}


.custom-form .number .el-form-item__content,
.custom-form .el-form-item__content {
  width: 70% !important;
}


.query_form .eightChar .number .el-form-item__content,
.query_form .eightChar .el-form-item__content {
  width: 65% !important;
}

.custom-form .nineChar .number .el-form-item__content,
.custom-form .nineChar .el-form-item__content {
  width: 65% !important;
}

.custom-form .tenChar .number .el-form-item__content,
.custom-form .tenChar .el-form-item__content {
  width: 63% !important;
}


.custom-form .detailInputTextarea .el-form-item__content {
  width: 84.35% !important;
}


.custom-form .dialogInput .el-form-item__label {
  min-width: calc(20% + 19.7px) !important;
}

.custom-form .dialogInput .el-form-item__content {
  width: 71% !important;
}


.custom-form .detailInputLong .el-form-item__content {
  width: 85% !important;
  min-width: 70% !important;
}


.custom-form .recoveryBasic .el-form-item__content {
  width: 65% !important;
}

.custom-form .el-input--medium .el-input__inner {
  height: 32px !important;
  line-height: 32px !important;
}

.custom-form .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ff4949;
  color: #fff !important;
}

.custom-form .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #ff4949;
}

.custom-form .el-radio__input.is-checked .el-radio__inner {
  border-color: #ff4949;
  background: #ff4949;
}

.custom-form .el-radio__inner:hover {
  border-color: #ff4949;
}

.custom-form .el-radio__input.is-checked + .el-radio__label {
  color: #ff4949;
}

.custom-form .el-input--suffix .el-input__inner {
  padding-right: 15px;
}

.custom-form .el-input,
.custom-form .el-input,
.custom-form .el-select,
.custom-form .number .el-input-number,
.custom-form .el-input__inner {
  width: 100% !important;
}


.custom-form .el-col {
  min-height: 5%;
}

.custom-form > .el-form-item.is-error .el-input__inner,
.custom-form > .el-form-item.is-error .el-input__inner:focus,
.custom-form > .el-form-item.is-error .el-textarea__inner,
.custom-form > .el-form-item.is-error .el-textarea__inner:focus {
  border-color: #dcdfe6;
}

/*.custom-form > .el-form-item__content > .el-form-item.is-error > .el-input__inner,
.custom-form > .el-form-item__content > .el-form-item.is-error > .el-input__inner:focus,
.custom-form > .el-form-item__content > .el-form-item.is-error > .el-textarea__inner,
.custom-form > .el-form-item__content > .el-form-item.is-error > .el-textarea__inner:focus {
  border-color: #ff4949;
}*/


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


.custom-form .el-form-item__label {
  white-space: nowrap;
}

.query_form .el-form-item__label {
  width: calc(30%) !important;
  white-space: nowrap;
}

.query_form .dialogLong .el-form-item__label {
  width: calc(16%) !important;
}

.query_form .dialogLong .el-form-item__content {
  width: calc(72.3%) !important;
}

.query_form .eightChar .el-form-item--medium .el-form-item__label {
  width: calc(34%) !important;
}

.query_form .dialogSearch .el-form-item__content {
  width: calc(63%) !important;
}

.query_form .dialogSearch .el-form-item__label {
  width: calc(37%) !important;
}

.query_form .dialogSearch .el-input,
.query_form .dialogSearch .el-input,
.query_form .dialogSearch .number .el-form-item__content,
.query_form .dialogSearch .el-input__inner {
  width: 97% !important;
}

.query_form .dialogSearch .el-date-editor {
  width: 94% !important;
}

.custom-form .eightChar .el-form-item__label {
  width: calc(30%) !important;
}

.query_form .nineChar .el-form-item--medium .el-form-item__label {
  width: calc(37%) !important;
}

.custom-form .nineChar .el-form-item__label {
  width: calc(33%) !important;
}

.custom-form .tenChar .el-form-item__label {
  width: calc(35%) !important;
}

.query_form .basicInput .el-form-item__label {
  width: 28% !important;
}


.query_form .number .el-form-item__content,
.query_form .el-form-item__content {
  width: 70% !important;
}

.query_form .eightChar .number .el-form-item__content,
.query_form .eightChar .el-form-item__content {
  width: 65% !important;
}


.query_form .el-form-item {
  margin-bottom: 5px !important;
}

.query_form .searchInput .el-input,
.query_form .searchInput .el-input,
.query_form .searchInput .el-input__inner {
  width: 98% !important;
}

.query_form .medicineSearchInput .el-form-item__content {
  width: calc(68%) !important;
}

.query_form .medicineSearchInput .el-form-item__label {
  width: calc(32%) !important;
}

.query_form .medicineSearchInput .el-select {
  width: 66.1% !important;
}

.query_form .medicineSearchInput .el-input-number {
  width: 66.46% !important;
}

.query_form .medicineSearchInput .el-input__inner {
  width: 100% !important;
}

.query_form .dialogSearchInput .el-input,
.query_form .dialogSearchInput .el-input,
.query_form .dialogSearchInput .el-input__inner {
  width: 100% !important;
}


.query_form .searchInput .el-date-editor {
  width: 96.03% !important;
}


.query_form .searchInput .number .el-input-number {
  width: 100%;
}

.query_form .eightChar .el-input,
.query_form .eightChar .el-input,
.query_form .eightChar .number .el-form-item__content,
.query_form .eightChar .el-input__inner {
  width: 98% !important;
}


.query_form .searchInput .el-select {
  width: 100% !important;
}

.query_form .eightChar .el-select {
  width: 100% !important;
}


.custom-form .dialog .el-input,
.custom-form .dialog .el-input,
.custom-form .dialog .el-textarea__inner,
.custom-form .dialog .number .el-form-item__content,
.custom-form .dialog .el-input__inner {
  width: 400px !important;
}

.custom-form .detailInput .el-input,
.custom-form .detailInput .el-textarea__inner,
.custom-form .detailInput .number .el-form-item__content,
.custom-form .detailInput .el-input__inner {
  width: 100% !important;
}

.custom-form .detailInputTextarea .el-input,
.custom-form .detailInputTextarea .el-textarea__inner,
.custom-form .detailInputTextarea .number .el-form-item__content,
.custom-form .detailInputTextarea .el-input__inner {
  width: 100% !important;
}


.custom-form .iconInput .el-form-item {
  width: 90% !important;
}

.pageForm .fileupload .el-form-item__content {
  width: 70% !important;
}

.custom-form .iconInput .el-form-item__content {
  width: 70% !important;
}

.custom-form .iconInput .el-input,
.custom-form .iconInput .el-input,
.custom-form .iconInput .el-textarea__inner,
.custom-form .iconInput .number .el-form-item__content,
.custom-form .iconInput .el-input__inner {
  width: 280px !important;
}

.el-button--medium {
  height: 33px;
}

.custom-form .fileUpSelf .el-form-item__label {
  min-width: calc(5%) !important;
}

.custom-form .textSelf .el-form-item__label {
  min-width: calc(20%) !important;
}

.custom-form .textareaSelf .el-input,
.custom-form .textareaSelf .el-input,
.custom-form .textareaSelf .el-textarea__inner,
.custom-form .textareaSelf .number .el-form-item__content,
.custom-form .textareaSelf .el-input__inner {
  width: 100% !important;
}

.custom-form .textareaSelf .el-form-item {
  width: 93% !important;
}

.custom-form .textareaSelf .el-form-item__content {
  width: 89% !important;
}

.custom-form .el-date-editor {
  width: 215px !important;
}

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

.query_form .inStorage .el-form-item__label {
  width: 34% !important;
}

.query_form .inStorage .el-form-item__content {
  width: 64% !important;
}

.query_form .inStorage .el-input,
.query_form .inStorage .el-input,
.query_form .inStorage .number .el-form-item__content,
.query_form .inStorage .el-input__inner {
  width: 100% !important;
}

.query_form .inStorage .el-select {
  width: 100% !important;
}

.el-dialog__header {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.el-table .el-table__header-wrapper th {
  background-color: rgb(243, 244, 251);
}



</style>
