<template>
  <div class="fbg-button-group">
    <slot />
  </div>
</template>
<script>
import extendData from '../common/commonExtend';
export default {
  name: 'FbgButtonGroup',
  componentName: 'FbgButtonGroup',
  extends: extendData,
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    value: {
      type: [Array, Number, String]
    },
  },
  data() {
    return {
      options: []
    }
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler() {
        this.setCheckedOptionList();
      }
    },
    multiple: {
      immediate: true,
      handler() {
        this.options.forEach(item => {
          item.multiple = this.multiple;
        });
      }
    }
  },
  created() {
    this.$on('fbg.buttonGroup.addOption', (option) => {
      option.multiple = this.multiple;
      this.options.push(option);
      this.setCheckedOptionList();
    });
    this.$on('fbg.buttonGroup.change', (option) => {
      this.setValue(option, false);
      this.changeEmit(option.value);
      this.dispatch('FbgFormItem', 'fbg.formItem.validate', [this]);
    });
    this.$on('fbg.buttonGroup.removeOption', (option) => {
      const index = this.options.indexOf(option);
      if (index > -1) {
        this.options.splice(index, 1);
      }
    });
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>

</style>