<template>
  <div :class="_class" :value="value">
    <slot></slot>
  </div>
</template>
<script>
  import ToItemValue from '../scripts/mixins/to-item-value.js';
  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) {
        this.$emit('change', value);
      },
      disabled(disabled) {
        this.broadcast('hive-checkbox', 'group.disabled', disabled);
      },
    },
    mounted() {
      this.$on('checkbox.click', this.changeCheck);
      this.$on('checkbox.remove', this.changeRemove);
      this.$on('checkbox.change', this.clickItem);
      for (let i of this.value) {
        this.broadcast('hive-checkbox', 'group.change', i);
      }
    },
    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>
