<script>
export default {
  name: 'FormItem',
  props: {
    label: String,
    labelWidth: String,
    value: [Number, String, Array, Object],
    prop: String,
    span: {
      type: [Number, String],
      default() {
        return this.zForm ? this.zForm.span : undefined;
      },
    },
  },
  provide() {
    return {
      zFormItem: this,
    };
  },
  inject: {
    zForm: {
      default: undefined,
    },
  },
  render(h) {
    let scopedSlots = this.$scopedSlots;
    let content = '';
    if (scopedSlots.default) {
      content = scopedSlots.default();
    } else {
      if (!scopedSlots.default) {
        if (this.zForm && this.zForm.itemComponent) {
          content = h(this.zForm.itemComponent, {
            props: {
              value: this.value,
              ...this.$attrs,
            },
            on: {
              input: value => {
                this.$emit('input', value);
              },
            },
          });
        } else {
          content = h('span', this.value);
        }
      }
    }
    return h('el-col', { props: { span: this.span ? Number(this.span) : undefined } }, [
      h(
        'el-form-item',
        {
          props: { label: this.label, 'label-width': this.labelWidth, prop: this.prop, ...this.$attrs },
          scopedSlots,
        },
        [content],
      ),
    ]);
  },
};
</script>
