<script>
export default {
  name: 'FormItem',
  props: {
    label: String,
    labelWidth: String,
    value: [Number, String, Array, Boolean, Object],
    prop: String,
    span: [Number, String],
    xs: [Number, Object],
    sm: [Number, Object],
    md: [Number, Object],
    lg: [Number, Object],
    xl: [Number, Object],
  },
  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 = this.value;
        }
      }
    }
    return h('el-col', { props: this.colProps(['span', 'xs', 'sm', 'md', 'lg', 'xl']) }, [
      h(
        'el-form-item',
        {
          props: { label: this.label, 'label-width': this.labelWidth, prop: this.prop, ...this.$attrs },
          scopedSlots,
        },
        [content],
      ),
    ]);
  },
  methods: {
    colProps(props) {
      return props.reduce((result, key) => {
        if (this[key]) {
          result[key] = Number(this[key]);
        } else {
          result[key] = this.zForm ? Number(this.zForm[key]) : undefined;
        }
        return result;
      }, {});
    },
  },
};
</script>
