<template>
  <label ref="mainRef" class="fbg-checkbox">
    <span :tabindex="tabindex" @keyup.enter="handleCheckboxEnter" :class="className"></span>
    <span class="fbg-checkbox-text" :class="{'disabled-text': disabled}"><slot>{{label}}</slot></span>
    <input tabindex="-1" class="fbg-checkbox-input" :disabled="disabled" type="checkbox" :value="label" :checked="checked" @change="handlerChange"/>
  </label>
</template>
<script>
import commonExtendData from '../common/commonExtend';
import util from '../../utils';
export default {
  name: 'FbgCheckbox',
  componentName: 'FbgCheckbox',
  extends: commonExtendData,
  props: {
    value: {
      type: [Number, Boolean, String],
      default: ''
    },
    label: {
      type: [Number, String]
    },
    trueLabel: {
      type: [Number, Boolean, String],
      default: true
    },
    falseLabel: {
      type: [Number, Boolean, String],
      default: false
    },
    isChecked: {
      type: Boolean,
      default: null
    },
    indeterminate: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked: false,
      tabindex: 0
    };
  },
  inject: {
    checkedData: {
      type: Object,
      default() {
        return {data: []};
      }
    },
    updateValue: {
      type: Function,
      default: null
    },
    isGroup: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    className() {
      return 'fbg-form-item-status fbg-checkbox-item' + (this.checked && this.disabled? ' is-checked-disabled': (this.indeterminate?' indeterminate':(this.checked?' is-checked':'')) ) + (this.disabled?' disabled':'');
    }
  },
  created() {
    this.dispatch('FbgCheckboxGroup', 'fbg.checkboxGroup.addOption', [this]);
  },
  destroyed() {
    this.dispatch('FbgCheckboxGroup', 'fbg.checkboxGroup.removeOption', [this]);
  },
  watch: {
    isChecked: {
      immediate: true,
      handler() {
        if (this.checked !== null) {
          this.checked = this.isChecked;
        }
      }
    },
    value: {
      immediate: true,
      handler(value) {
        if (value === this.trueLabel) {
          this.checked = true;
        } else if (value === this.falseLabel) {
          this.checked = false;
        }
      }
    },
  },
  methods: {
    handleCheckboxEnter() {
      this.$refs.mainRef.click();
    },
    handlerChange(e) {
      const checked = !this.checked;
      this.$emit('change', checked, e.target.value, this.label);
      this.$emit('input', checked?this.trueLabel:this.falseLabel);
      this.dispatch('FbgCheckboxGroup', 'fbg.checkboxGroup.change', [this, checked]);
    } 
  }
}
</script>
<style lang="scss" scoped>
.fbg {
  &-checkbox {
    cursor: pointer;
    &-text {
      color: #333;
      vertical-align: middle;
      margin-left: 3px;
    }
    .disabled-text {
      color: #999;
      cursor: not-allowed;
    }
    .indeterminate {
      background-color: #3399FF;
      border-color: #3399FF;
      &::before {
        content: "";
        position: absolute;
        display: block;
        background-color: #fff;
        height: 2px;
        transform: scale(.5);
        left: 0;
        right: 0;
        top: 5px;
      }
      &:hover {
        background-color: #60B0FF;
      }
      &:active {
        background-color: #F1F8FF;
      }
    }
    .is-checked {
      background-color: #3399FF;
      border-color: #3399FF;
      &::after {
        box-sizing: content-box;
        content: "";
        border: 1px solid #fff;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(1);
        width: 3px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
      }
      &:hover {
        background-color: #60B0FF;
      }
      &:active {
        background-color: #F1F8FF;
      }
    }
    .is-checked-disabled {
      &::after {
        box-sizing: content-box;
        content: "";
        border: 1px solid #aaa;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(1);
        width: 3px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
      }
    }
    &-input {
      transform: scale(0);
      opacity: 0;
      outline: none;
      position: absolute;
      margin: 0;
      width: 0;
      height: 0;
      z-index: -1;
      padding: 0;
    }
    .disabled {
      background-color: #F0F0F0 !important;
      color: #999!important;;
      border: 1px solid #ccc!important;
      cursor:not-allowed;
    }
    &-item {
      vertical-align: middle;
      display: inline-block;
      position: relative;
      border: 1px solid #ccc;
      border-radius: 2px;
      box-sizing: border-box;
      width: 14px;
      height: 14px;
      background-color: #fff;
      z-index: 1;
      transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
      &:after {
        box-sizing: content-box;
        content: "";
        border: 1px solid #fff;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(0);
        width: 3px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
      }
      &:hover {
        border: 1px solid #60B0FF;
      }
      &:focus {
        border: 1px solid #60B0FF;
      }
      &:active {
        border: 1px solid #60B0FF;
        background-color: #F1F8FF;
      }
    }
  }
}
</style>