<template>
  <div :class="_class" :value="value" :button="buttonType">
    <slot></slot>
  </div>
</template>
<script>
  import ToItemValue from '../scripts/mixins/to-item-value.js';
  const name = 'hive-radio-group';
  export default {
    name,
    mixins: [
      ToItemValue,
    ],
    model: {
      prop: 'value',
      event: 'change',
    },
    props: {
      disabled: {
        type: Boolean,
        default: false,
      },
      value: [String, Number, Boolean],
      button: {
        type: false,
        default: false,
      },
      name: String,
    },
    data() {
      return {
        curVal: this.value,
        buttonType: this.button,
        isDisabled: this.disabled,
      };
    },
    computed: {
      _class() {
        return [
          `${name}`,
          {
            'hive-radio-btn-group': this.button,
            'hive-button-group': this.button,
          },
        ];
      },
    },
    watch: {
      curVal(curVal) {
        this.broadcast('hive-radio', 'group.change', curVal);
        this.$emit('change', curVal);
      },
    },
    mounted() {
      this.$on('radio.click', this.changeCheck);
      this.broadcast('hive-radio', 'group.type', this.buttonType);
      this.broadcast('hive-radio', 'group.change', this.curVal);
      this.broadcast('hive-radio', 'group.disabled', this.isDisabled);
    },
    methods: {
      changeCheck(value) {
        this.curVal = value;
      },
    },
  };
</script>
