<template>
  <div
    :class="_class"
    :value="value"
    :button="buttonType"
  >
    <slot />
  </div>
</template>
<script>
import ToItemValue from '../scripts/mixins/to-item-value';
const name = 'hive-radio-group';
export default {
  name,
  mixins: [
    ToItemValue
  ],
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 当前选中的 input 的 value 值
     */
    value: [String, Number, Boolean],
    /**
     * 是否为按钮形态
     */
    button: Boolean
  },
  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);
      /**
       * 修改选中值
       * @param {String| Number| Boolean} value
       */
      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>
