<template>
  <label class="checkbox">
    <div class="checker"><span :class="classes"><input type="checkbox" @change="onChange" :checked="checkedStatus"></span></div>
    <slot></slot>
  </label>
</template>
<script>
export default {
  name: 'Checkbox',
  props: {
    checked: Boolean
  },
  data() {
    let classes = '',
      checkedStatus = ''
    if (this.checked) {
      classes = 'checked'
      checkedStatus = 'checked'
    }

    return {
      _checked: this.checked,
      classes: classes,
      checkedStatus: checkedStatus
    }
  },
  methods: {
    onChange(e) {
      if (e.target.checked) {
        this.classes = 'checked'
        this.checkedStatus = 'checked'
      } else {
        this.classes = ''
        this.checkedStatus = ''
      }
    }
  }
}
</script>
