<template>
  <div class="qf-form-item">
    <label class="qf-form-label" :class="[{'is-required': required}]" v-bind:style="labelStyles"
           v-if="label || $slots.label">
      <slot name="label">{{label}}</slot>
    </label>
    <div class="qf-form-content" :style="fieldStyles">
      <slot ref="field"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QfFormItem',
  props: {
    label: String,
    labelWidth: {
      type: String,
      default: '96px'
    },
    labelAlign: String,
    labelPosition: String,
    required: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    labelStyles() {
      return {
        width: this.labelWidth,
        textAlign: this.labelAlign
      };
    },
    fieldStyles() {
      var ret = {};
      if (this.labelPosition === 'top') return ret;
      ret.marginLeft = this.labelWidth;
      return ret;
    }
  }
};
</script>


