<template>
    <form 
        :style="{width: width}"
        :class="classes" 
        :autocomplete="autocomplete">
        <slot></slot>
    </form>
</template>
<script>
    import { oneOf } from '../../../utils/assist'

    const prefixCls = 'yy-form'
    export default {
        name: 'YYForm',
        provide() {
            return {
                form: this
            }
        },
        props: {
            model: {
                type: Object
            },
            rules: {
                type: Object
            },
            labelWidth: {
                type: Number
            },
            labelPosition: {
                validator(value) {
                    return oneOf(value, ['left', 'right', 'top'])
                },
                default: 'right'
            },
            inline: {
                type: Boolean,
                default: false
            },
            showMessage: {
                type: Boolean,
                default: true
            },
            autocomplete: {
                validator(value) {
                    return oneOf(value, ['on', 'off'])
                },
                default: 'off'
            },
            width: {
                type: String,
                default: 'auto'
            }
        },
        data() {
            return {
                fields: []
            }
        },
        computed: {
            classes() {
                return [
                    `${prefixCls}`,
                    `${prefixCls}-label-${this.labelPosition}`,
                    {
                        [`${prefixCls}-inline`]: this.inline
                    }
                ]
            }
        },
        watch: {
            rules() {
                this.validate()
            }
        },
        methods: {
            resetFields() {
                this.fields.forEach(field => {
                    field.resetField()
                })
            },
            validate(callback) {
                return new Promise(resolve => {
                    let valid = true
                    let count = 0
                    this.fields.forEach(field => {
                        field.validate('', errors => {
                            if (errors) {
                                valid = false
                            }
                            if (++count === this.fields.length) {
                                resolve(valid)
                                if (typeof callback === 'function') {
                                    callback(valid)
                                }
                            }
                        })
                    })
                })
            },
            validateField(prop, call) {
                const field = this.fields.filter(field => field.prop === prop)[0]
                if (!field) {
                    throw new Error('[YYZone warn]: 必须使用有效的prop字符串调用validateField!')
                }

                field.validate('', call)
            }
        },
        created() {
            this.$on('on-form-item-add', (field) => {
                if (field) this.fields.push(field)
            })
            this.$on('on-form-item-remove', (field) => {
                if (field.prop) this.fields.splice(this.fields.indexOf(field), 1)
            })
        }
    }
</script>
