<template>
  <li :class="'form-checkbox ' + sizeClass">
    <input type="checkbox" :id="nextId" :name="itemName" :checked="checkedState" :disabled="disabledState" v-on:click.stop.prevent="clickMe">
    <label :class="fontSizeClass" v-on:click.stop.prevent="clickMe">{{ labelState }}</label>
  </li>
</template>
<script>
import eventBus from './bus';

const SIZE_LARGE = 'large';
const SIZE_SMALL = 'small';
const SIZE_NORMAL = 'normal';
const CSS_LARGE = 'form-checkbox--large';
const CSS_SMALL = 'form-checkbox--small';
const CSS_FONT_LARGE = 'text--large';
const CSS_FONT_MEDIUM = 'text--med';
const CSS_FONT_SMALL = 'text--small';

var seed = 0;

// 单个复选框，仅作为BoxGroup的子组件使用!
export default {
  name: 'taurus-checkbox',
  created: function () {
    this._checked = false;
    this.checkedState = this.checked;
    this.labelState = this.label;
    this.disabledState = this.disabled;
    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: '',
      size: SIZE_NORMAL,
      checkedState: false,
      labelState: '',
      disabledState: false,
      valueState: ''
    };
  },
  computed: {
    sizeClass: function () {
      if (this.size === SIZE_LARGE) {
        return CSS_LARGE;
      } else if (this.size === SIZE_SMALL) {
        return CSS_SMALL;
      } else {
        return '';
      }
    },
    fontSizeClass: function () {
      if (this.size === SIZE_LARGE) {
        return CSS_FONT_LARGE;
      } else if (this.size === SIZE_SMALL) {
        return CSS_FONT_SMALL;
      } else {
        return CSS_FONT_MEDIUM;
      }
    },
    nextId: function () {
      return 'tau-chk' + seed++;
    }
  },
  props: {
    // 此属性只读!
    idx: {
      default: 0,
      type: Number
    },
    checked: Boolean,
    label: String,
    disabled: Boolean,
    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 () {
      if (this.disabledState === false) {
        this.toggle();
      }
    },
    check: function () {
      if (this.checkedState === false) {
        this.checkedState = true;
        this._fireEvents();
      }
    },
    uncheck: function () {
      if (this.checkedState === true) {
        this.checkedState = false;
        this._fireEvents();
      }
    },
    toggle: function () {
      this.checkedState = !this.checkedState;
      this._fireEvents();
    },
    enable: function () {
      if (this.disabledState === true) {
        this.disabledState = false;
      }
    },
    disable: function () {
      if (this.disabledState === false) {
        this.disabledState = true;
      }
    },
    _fireEvents: function () {
      eventBus.$emit('item-changed', this, this.idx, this.checkedState);
      eventBus.$emit(this.checkedState ? 'item-checked' : 'item-unchecked', this, this.idx);
    }
  }
};
</script>
