<template>
  <label class="qf-checkbox" :class="[
      { 'is-disabled': disabled },
      { 'is-checked': model }
    ]" :aria-checked="indeterminate ? 'mixed': model" :aria-disabled="disabled" :id="id">
    <span class="qf-checkbox-input" :class="{
        'is-disabled': disabled,
        'is-indeterminate': indeterminate,
        'is-focus': focus,
        'is-checked': model
      }">
      <span class="qf-checkbox-inner"></span>
      <input class="qf-checkbox-original" type="checkbox" :disabled="disabled" :value="label" :name="name" v-model="model" @change="handleChange" @focus="focus = true" @blur="focus = false">
    </span>
    <span class="qf-checkbox-lebel" v-if="$slots.default || label">
      <slot></slot>
      <template v-if="!$slots.default">{{label}}</template>
    </span>
  </label>
</template>
<script>
export default {
  name: 'QfCheckbox',
  data() {
    return {
      selfModel: false,
      focus: false,
      isLimitExceeded: false
    };
  },
  props: {
    value: {},
    label: {},
    indeterminate: Boolean,
    disabled: Boolean,
    checked: Boolean,
    name: String,
    id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系 */
    controls: String /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系 */
  },
  watch: {},
  computed: {
    model: {
      get() {
        return this.value !== undefined ? this.value : this.selfModel;
      },
      set(val) {
        this.$emit('input', val);
        this.selfModel = val;
      }
    }
  },
  methods: {
    handleChange(ev) {
      this.$emit('change', ev, ev.target.checked);
    }
  },
  created() {
    this.selfModel = this.checked;
  }
};
</script>
