<template>
  <div class="fbg-button-item">
    <fbg-button class="fbg-form-item-status" v-bind="$attrs" @click="handleClick" :type="checked?'primary':'default'">{{label}}</fbg-button>
  </div>
</template>
<script>
import Button from '../button';
import extendData from '../common/commonExtend';
export default {
  extends: extendData,
  components: {
    'fbg-button': Button
  },
  props: {
    label: {
      type: [String, Number],
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      checked: false,
      multiple: true
    };
  },
  created() {
    this.dispatch('FbgButtonGroup', 'fbg.buttonGroup.addOption', [this]);
  },
  destroyed() {
    this.dispatch('FbgButtonGroup', 'fbg.buttonGroup.removeOption', [this]);
  },
  methods: {
    handleClick() {
      if (this.multiple) {
        this.checked = !this.checked;
      } else {
        this.checked = true;
      }
      this.dispatch('FbgButtonGroup', 'fbg.buttonGroup.change', [this]);
    }
  }
}
</script>
<style lang="scss" scoped>
.fbg {
  &-button {
    &-item {
      display: inline-block;
      margin-right: 10px;
    }
  }
}
</style>