<template>
  <el-form ref="form" :model="value" @submit.native.prevent class="detail-form" :label-width="labelWidth" size="medium"
    :inline="inline" :disabled="disabled" v-bind="$attrs">
    <slot :disabled="disabled"></slot>
  </el-form>
</template>

<script>
export default {
  props: {
    inline: {
      type: Boolean,
      default: true,
    },
    value: {
      type: Object,
      required: true,
    },
    labelWidth: {
      type: String,
      default: '100',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    validate() {
      return this.$refs.form.validate()
    },
    resetFields() {
      return this.$refs.form.resetFields()
    },
    clearValidate() {
      return this.$refs.form.clearValidate()
    },
  },
}
</script>

<style>
:not(.search-form).detail-form .el-form-item {
  margin-bottom: 20px !important;
}

.detail-form .el-input:not(.pagination),
.detail-form .number .el-form-item__content:not(.pagination),
.detail-form .el-input__inner:not(.pagination) {
  width: 240px !important;
}

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

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