/**
* @Author think
* @Date 2019-07-10 09:39
*/

<template>
  <label class="h-checkbox" @click="checked">
    <label class="checkbox">
      <input :checked="value" :disabled="disable" type="checkbox">
    </label>
  </label>
</template>

<script>
export default {
  name: 'CheckBox',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    disable: {
      type: Boolean,
      default: false,
    },
    /* checkedColor: {
          type: String,
          default: '#5D98F6',
        }, */
  },
  data () {
    return {}
  },
  watch: {
  },
  methods: {
    checked () {
      if (!this.disable) {
        this.$emit('input', !this.value)
        this.$emit('checkClick', !this.value)
      }
    },
  },
}
</script>

<style lang="less">
  @import "../../common/styles/variables";
  .h-checkbox {
    //width: 42px;
    //height: 42px;
    display: flex;
    align-items: center;

    .checkbox {
      padding: 5px 5px;

      input {
        width: 22px;
        height: 22px;
        border-radius: 11px;

        &:after {
          top: 32%;
          left: 20%;
          opacity: 1;
          border-width: 2px; /*no*/
        }

        &:checked {
          &:before {
            background: @check-box-bg;
            border-color: @check-box-bg;

          }
        }

        &:disabled {
          &:checked {
            opacity: .7;
          }
        }
      }
    }
  }

  .hls-item {
    .contents {
        .h-checkbox {
          .checkbox {
            padding: 0;
          }
        }
    }

  }
</style>
