<template>
  <el-form-item
    class="ui-form-item"
    v-bind="$props"
    :label="innerLabel"
    :label-width="innerLabelWidth"
  >
    <slot></slot>
    <div class="ui-form-item__tips" v-if="$slots.tips || tips">
      <slot name="tips">{{ tips }}</slot>
    </div>
  </el-form-item>
</template>
<script>
import FormItem from 'element-ui/lib/form-item'
import 'element-ui/lib/theme-chalk/form-item.css'

export default {
  name: 'UiFormItem',
  props: Object.assign({
    tips: {
      type: String
    },
    showLabel: {
      type: Boolean,
      default: true
    }
  }, FormItem.props),
  components: {
    ElFormItem: FormItem
  },
  computed: {
    innerLabel() {
      if (!this.showLabel) {
        return
      }
      return this.label
    },
    innerLabelWidth() {
      if (!this.showLabel) {
        return '0px'
      }
      return this.labelWidth
    }
  }
}
</script>
<style lang="less">
.ui-form{
  &.el-form--label-left{
    .ui-form-item{
      &.el-form-item{
        &.is-required{
          .el-form-item__label{
            &:before{
              float: right;
              margin-left: 4px;
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
.ui-form-item{
  &.el-form-item{
    margin-bottom: 18px;
    .el-form-item__error{
      padding-top: 2px;
    }
  }
}
.ui-form-item__tips{
  line-height: 1.7em;
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}
</style>
