<template>
    <view>
        <slot />
    </view>
</template>

<script>
import { VantComponent } from '../common/component';
export default {
    data() {
        return {
            parentDisabled: '',
            valueClone: []
        };
    },
    field: true,
    '../checkbox/index': {
        name: 'checkbox',
        type: 'descendant',
        current: 'checkbox-group',

        linked(target) {
            this.updateChild(target);
        }
    },
    props: {
        max: Number,
        value: {
            type: Array
        },
        disabled: {
            type: Boolean
        }
    },
    methods: {
        updateChildren() {
            (this.children || []).forEach((child) => this.updateChild(child));
        },
        updateChild(child) {
            const { valueClone: value, disabled } = this;
            child.setData({
                valueClone: value.indexOf(child.data.name) !== -1,
                parentDisabled: disabled
            });
        }
    },
    watch: {
        value: {
            handler: function () {
                this.valueClone = this.clone(this.value)(this.children || []).forEach((child) => this.updateChild(child));
            },

            immediate: true,
            deep: true
        },

        disabled: {
            handler: function () {
                (this.children || []).forEach((child) => this.updateChild(child));
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
