

<script>
import Promise from 'promise-polyfill';
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-form`,
    mixins: [prefixMixins],
    data() {
        return {
            fields: []
        };
    },
    provide() {
        return {
            jddForm: this
        };
    },
    props: {
        contentWidth: {
            type: Number
        },
        innerSpace: {
            type: String,
            default: '0'
        },
        labelWidth: {
            type: Number,
            default: 100
        },
        labelSpace: {
            type: Number,
            default: 10
        },
        labelSuffix: {
            type: String,
            default: ''
        },
        labelPosition: {
            type: String,
            default: 'left',
            validator(value) {
                return ['top', 'left'].indexOf(value) > -1;
            }
        },
        disabled: Boolean,
        showError: Boolean,
        size: {
            type: String,
            default: 'small',
            validator(value) {
                return ['large', 'medium', 'small', 'mini'].indexOf(value) > -1;
            }
        },
        hideRequiredAsterisk: Boolean,
        model: Object,
        rules: [Object, Array]
    },
    computed: {
        formClass() {
            let clsNames = [`${prefix}-form`];
            return clsNames;
        },
        contentStyle() {
            let style = {};
            if (this.innerSpace) {
                style.padding = this.innerSpace;
            }
            return style;
        }
    },
    methods: {
        addField(field) {
            field && this.fields.push(field);
        },
        removeField(field) {
            field.prop && this.fields.splice(this.fields.indexOf(field), 1);
        },
        validate(callback) {
            let cb;
            let invalidFields = {};
            let promise = new Promise((resolve, reject) => {
                if (callback) {
                    cb = function(valid, invalidFields) {
                        callback(valid, invalidFields);
                        valid ? resolve(valid) : reject(valid, invalidFields);
                    };
                } else {
                    cb = function(valid, invalidFields) {
                        valid ? resolve(valid) : reject(valid, invalidFields);
                    };
                }
            });
            let valid = true;
            let count = 0;
            if (this.fields.length === 0) {
                cb(true);
            }
            this.fields.forEach(field => {
                field.validate('', (message, field) => {
                    if (message) {
                        valid = false;
                    }
                    invalidFields = { ...invalidFields, ...field };
                    if (++count === this.fields.length) {
                        cb(valid, invalidFields);
                    }
                });
            });

            return promise;
        },
        resetFields() {
            this.fields.forEach(field => {
                field.resetField();
            });
        },
        clearValidate() {
            this.fields.forEach(field => {
                field.clearValidate();
            });
        },
        setError(err) {
            this.fields.forEach(m => {
                if (err.hasOwnProperty(m.prop)) {
                    m.setError(err[m.prop]);
                }
            });
        }
    },
    render(h) {
        let finalArr = [];
        let tmpArr = [];
        this.$slots.default.forEach(m => {
            if (m.tag && m.tag.endsWith('section')) {
                finalArr.push(<div style={this.contentStyle}>{tmpArr}</div>);
                finalArr.push(m);
                tmpArr = [];
            } else {
                tmpArr.push(m);
            }
        });
        finalArr.push(<div style={this.contentStyle}>{tmpArr}</div>);
        tmpArr = [];
        return <div class={this.formClass}>{finalArr}</div>;
    }
};
</script>
