<template>
  <div class="fbg-checkbox-group">
    <slot></slot>
  </div>
</template>
<script>
import util from '../../utils';
import extendData from '../common/commonExtend';
export default {
  name: 'FbgCheckboxGroup',
  componentName: 'FbgCheckboxGroup',
  extends: extendData,
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      options: [],
      multiple: true,
    }
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler() {
        this.setCheckedOptionList();
      }
    }
  },
  created() {
    this.$on('fbg.checkboxGroup.addOption', (option) => {
      this.options.push(option);
      this.setCheckedOptionList();
    });
    this.$on('fbg.checkboxGroup.change', (option, checked) => {
      option.checked = checked;
      this.setValue(option);
      this.changeEmit(option.value);
      this.dispatch('FbgFormItem', 'fbg.formItem.validate', [this]);
    });
    this.$on('fbg.checkboxGroup.removeOption', (option) => {
      const index = this.options.indexOf(option);
      if (index > -1) {
        this.options.splice(index, 1);
      }
    });
  },
  methods: {}
  
}
</script>
<style lang="scss" scoped>
.fbg {
  &-checkbox-group {
    display: inline-block;
  }
}
</style>