<template>
  <eagle-form ref="form" class="eagle-schema-form" v-model="model" v-bind="_schemaProps" v-on="schema.on">
    <template v-for="(item, index) in schema.items">
      <template v-if="item.is">
        <eagle-form-item v-if="bindParam(item, 'if')" v-show="bindParam(item, 'show')" v-bind="bindItemProps(item)" :key="index">
          <slot v-if="$scopedSlots[item.prop]" :name="item.prop" :value="get(model, item.prop)" :onInput="value => onComponentInput({ value, item })" v-bind="slotProps"> </slot>
          <item-render v-else :item="item" :value="get(model, item.prop)" :model="model" :onInput="value => onComponentInput({ value, item })"></item-render>
          <slot :name="`label-${item.prop}`" slot="label" v-bind="slotProps"></slot>
          <slot :name="`error-${item.prop}`" slot="error" v-bind="slotProps"></slot>
        </eagle-form-item>
      </template>
      <template v-else>
        <eagle-form-item v-if="bindParam(item, 'if')" v-show="bindParam(item, 'show')" v-bind="bindItemProps(item)" :key="index" :value="get(model, item.prop)">
          <slot v-if="$scopedSlots[item.prop]" :name="item.prop" :value="get(model, item.prop)" :onInput="value => onComponentInput({ value, item })" v-bind="slotProps"> </slot>
          <item-render v-else :item="item" :value="get(model, item.prop)" :model="model" :onInput="value => onComponentInput({ value, item })"></item-render>
        </eagle-form-item>
      </template>
    </template>
    <slot name="footer" v-bind="slotProps"></slot>
  </eagle-form>
</template>

<script>
import MIX_FORM from '../mixins/form';
import { cloneDeep, get, set } from '../utils';

export default {
  name: 'SchemaForm',
  mixins: [MIX_FORM],
  components: {
    ItemRender: {
      functional: true,
      render(h, context) {
        const props = context.props;
        const item = props.item || {};
        let content = props.value;
        if (item.render && typeof item.render === 'function') {
          content = [item.render(props.value, props.model, h)];
        }
        if (item.children) {
          if (Array.isArray(item.children)) {
            if (item.children.length > 0) {
              content = item.children.map(i => h('item-render', { props: { item: i } }));
            }
          } else {
            content = [item.children];
          }
        }
        let _props = item.props || {};
        if ('value' in props) {
          _props = { ..._props, value: props.value };
        }
        let _on = item.on || {};
        if (props.onInput) {
          _on = { ..._on, input: props.onInput };
        }
        const otherAttrs = ['class', 'attrs', 'style', 'domProps', 'slot', 'key', 'ref'].reduce((result, current) => {
          result[current] = item[current];
          return result;
        }, {});
        if (item.is) {
          return h(item.is, { props: _props, on: _on, ...otherAttrs }, content);
        } else {
          return content;
        }
      },
    },
  },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      },
    },
    schema: {
      required: true,
      type: Object,
      default() {
        return {};
      },
    },
    size: String,
  },
  data() {
    return {
      model: this.value,
      originData: {},
    };
  },
  computed: {
    _size() {
      return this.size || (this.$ELEMENT || {}).size;
    },
    _schemaProps() {
      return { size: this._size, ...(this.schema.props || {}), ...this.$attrs };
    },
    slotProps() {
      return {
        submit: this.onSubmit,
        cancel: this.onCancel,
        reset: this.onReset,
      };
    },
  },
  created() {
    const { originData, ...other } = this._data;
    this.originData = cloneDeep(other);
  },
  watch: {
    value(val = {}) {
      this.model = val;
    },
    model: {
      handler(val) {
        this.$emit('input', val);
      },
      deep: true,
    },
  },
  methods: {
    get,
    bindParam(item, key) {
      if (typeof item[key] === 'function') {
        return item[key]({ model: this.model });
      }
      if (['if', 'show'].includes(key)) {
        if (['', null, undefined].includes(item[key])) {
          return true;
        }
      }
      return item[key];
    },
    bindItemProps(item) {
      const { children, is, props, on, render, ...other } = item || {};
      return Object.keys(other).reduce((result, current) => {
        result = { ...result, [current]: this.bindParam(item, current, item[current]) };
        return result;
      }, {});
    },
    onComponentInput({ value, item }) {
      set(this.model, item.prop, value);
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', this.model);
        }
      });
    },
    onCancel() {
      this.$emit('cancel');
    },
    onReset() {
      this.model = cloneDeep(this.originData).model;
      this.$refs.form.resetFields();
      this.$emit('reset');
    },
  },
};
</script>