<template>
  <div class="check-box-group">
    <slot></slot>
  </div>
</template>
<script>
import { findComponentsDownward } from '../utils/findComponent.js';
export default {
  name: 'CheckBoxGroup',
  model: {
    prop: 'value',
    event: 'my-change'
  },
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    value(val, oldVal) {
      this.updateModal(val);
    }
  },
  mounted() {
    this.updateModal();
  },
  methods: {
    updateModal(val) {
      const childrens = findComponentsDownward(this, 'Checkbox');
      if (childrens) {
        childrens.forEach(child => {
          child.model = val || this.value;
        });
      }
    },
    change(val) {
      this.$emit('my-change', val);
    }
  }
};
</script>

