<template>
  <li class="form-checkbox--filter form-checkbox--filter--primary">
    <input type="checkbox" :id="nextId" :name="itemName" :checked="checkedState" :disabled="disabledState" v-on:click.stop.prevent="clickMe">
    <label class="text" v-on:click.stop.prevent="clickMe">{{ labelState }}<span class="filter-count" v-on:click.stop.prevent="clickMe">({{ countState }})</span></label>
  </li>
</template>
<script>
import eventBus from './bus';
var seed = 0;

// 单个复选框过滤按钮，仅作为BoxGroup的子组件使用!
export default {
  name: 'taurus-checkbox-filter',
  created: function () {
    this.checkedState = this.checked;
    this.labelState = this.label;
    this.disabledState = this.disabled;
    this.countState = this.count;
    this.valueState = this.value;
    eventBus.$on('toggle-check-state', this._toggleCheckState);
    eventBus.$on('toggle-usability', this._toggleUsability);
  },
  beforeDestroy: function () {
    eventBus.$off('toggle-check-state');
    eventBus.$off('toggle-usability');
  },
  data: function () {
    return {
      itemName: '',
      checkedState: false,
      labelState: '',
      disabledState: false,
      countState: 0,
      valueState: ''
    };
  },
  computed: {
    nextId: function () {
      return 'taurus-check-filter' + seed++;
    }
  },
  props: {
    // 此属性只读!
    idx: {
      default: 0,
      type: Number
    },
    checked: Boolean,
    label: String,
    disabled: Boolean,
    count: Number,
    value: String
  },
  methods: {
    _toggleCheckState: function (source, item, checked) {
      if (source === this.$parent && item === this) {
        if (checked === undefined) {
          this.toggle();
        } else if (checked === true) {
          this.check();
        } else {
          this.uncheck();
        }
      }
    },
    _toggleUsability: function (source, item, disabled) {
      if (source === this.$parent && item === this) {
        this.disabledState = disabled;
      }
    },
    clickMe: function (event) {
      if (this.disabledState === false) {
        this.toggle();
      }
    },
    _updateSiblingsState: function () {
      var i, children;
      // todo: 此处依赖父组件属性，待改
      if (this.$parent.totalButtonIsShowing === true) {
        children = this.$parent.$children;
        if (this.idx === 0) {
          for (i = children.length - 1; i >= 1; i--) {
            children[i].uncheck();
          }
        } else {
          children[0].uncheck();
        }
      }
    },
    check: function () {
      if (this.checkedState === false) {
        this.checkedState = true;
        this._updateSiblingsState();
        this._fireEvents();
      }
    },
    uncheck: function () {
      if (this.checkedState === true) {
        this.checkedState = false;
        this._fireEvents();
      }
    },
    toggle: function () {
      this.checkedState = !this.checkedState;
      if (this.checkedState === true) {
        this._updateSiblingsState();
      }
      this._fireEvents();
    },
    enable: function () {
      if (this.disabledState === true) {
        this.disabledState = false;
      }
    },
    disable: function () {
      if (this.disabledState === false) {
        this.disabledState = true;
      }
    },
    _fireEvents: function () {
      var idx = this.idx;
      // todo: 此处依赖父组件属性，待改
      if (this.$parent.totalButtonIsShowing === true) {
        idx--;
      }
      eventBus.$emit('item-changed', this, idx, this.checkedState);
      eventBus.$emit(this.checkedState ? 'item-checked' : 'item-unchecked', this, idx);
    }
  }
};
</script>
