<template>
  <el-form ref="form" :model="value" class="detail-form" :label-width="labelWidth" size="small" :inline="inline" :disabled="disabled">
    <slot></slot>
  </el-form>
</template>

<script>
export default {
  props: {
    inline: {
      type: Boolean,
      default: true
    },
    value: {
      type: Object,
      required: true
    },
    labelWidth: {
      type: String,
      default: "140px"
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods:{
    async validate(){
      await this.$refs.form.validate()
    }
  }
}
</script>

<style>
.detail-form>.el-form-item.is-error .el-input__inner, 
.detail-form>.el-form-item.is-error .el-input__inner:focus, 
.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>
