<template>
  <label
    :class="cusClass" class="toggle toggle-positive toggle-check"
    @touchstart="checked"
    @mousedown="checked">
    <input :checked="value" type="checkbox">
    <div class="track">
      <div class="handle"/>
    </div>
  </label>
</template>

<script>
export default {
  name: 'CheckBox',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    cusClass: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      // clickValue: false
    }
  },
  computed: {
    /* value() {
        return value ? value : false
      } */
  },
  watch: {
    value (val) {
      this.$emit('input', val)
      this.value = val
    },
  },
  methods: {
    checked () {
      this.$emit('checkClick', !this.value)
    },
  },
}
</script>

<style lang="less" scoped>

  .toggle-check {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;

    .track {
      width: 40px;
      height: 25px;
      margin-right: 2.5px;
      border-radius: 15px;
      .handle {
        width: 22.5px;
        height: 22.5px;
        top: 3.5px;
        left: 2.5px;
      }
    }
  }

  .toggle.toggle-positive input:checked + .track {
    border-color: @check-box-bg;
    background-color: @check-box-bg;

    .handle {
      width: 22.5px;
      height: 22.5px;
      top: 3.5px;
      left: 9px;
    }
  }
</style>