<template>
    <div :class="groupClass">
        <slot></slot>
    </div>
</template>

<script>
import { prefix } from 'jdd-design/utils';
export default {
    name: `${prefix}-checkbox-group`,
    data() {
        return {
            model: []
        };
    },
    provide() {
        return {
            jddCheckboxGroup: this
        };
    },
    props: {
        disabled: Boolean,
        value: Array
    },
    computed: {
        groupClass() {
            let clsNames = [`${prefix}-checkbox-group`];
            return clsNames.join(' ');
        }
    },
    methods: {
        setValue(val) {
            let pos = this.model.indexOf(val.key);
            if (pos === -1) {
                if (val.value) {
                    this.model.push(val.key);
                }
            } else {
                if (!val.value) {
                    this.model.splice(pos, 1);
                }
            }
            this.$emit('input', this.model);
            this.$emit('change', this.model);
        }
    },
    mounted() {
        this.model = this.value;
    }
};
</script>
