<template>
  <div
    :class="_class"
    :value="value"
  >
    <slot />
  </div>
</template>
<script>
import ToItemValue from '../scripts/mixins/to-item-value';
import WatchCurValue from '../scripts/mixins/wacth-cur-value';
const name = 'hive-checkbox-group';
export default {
  name,
  mixins: [
    ToItemValue,
    WatchCurValue
  ],
  props: {
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 选中元素列表
     */
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      curValue: this.value
    };
  },
  computed: {
    _class() {
      return [
        `${name}`
      ];
    }
  },
  watch: {
    value(value) {
      this.curValue = value;
      for (let i of value) {
        this.broadcast('hive-checkbox', 'group.change', i);
      }
      if (value.length === 0) {
        this.broadcast('hive-checkbox', 'group.change', '');
        this.curValue = [];
      }
      this.$emit('change', value);
    },
    curValue(value) {
      /**
       * 选中元素改变事件
       * @param {Array} value 当前选中的元素列表
       */
      this.$emit('change', value);
    },
    disabled(disabled) {
      this.broadcast('hive-checkbox', 'group.disabled', disabled);
    }
  },
  methods: {
    changeCheck(value) {
      this.curValue.push(value);
    },
    changeRemove(value) {
      for (let i in this.curValue) {
        if (this.curValue[i] === value) {
          this.curValue.splice(i, 1);
        }
      }
    }
  }
};
</script>
