<template>
  <div class="radio-button">
    <input type="checkbox"
           class="radio-button__inset"
           :id="id"
           :checked="checked"
           v-bind="$attrs"
           @change="$emit('my-change',$event.target.checked)" />
    <label :for="id"
           class="radio-button__color"
           :class="{disabled:!!$attrs['disabled']}">
      <div class="radio-button__after"></div>
    </label>
  </div>
</template>

<script>
const PREFIXCLS = 'radio_';
export default {
  name: 'RadioButton',
  props: {
    checked: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'checked',
    event: 'my-change'
  },
  data() {
    return {
      id: `${PREFIXCLS}${+new Date()}`
    };
  },
  created() {
    this.id = `${PREFIXCLS}${+new Date()}`;
  }
};
</script>

<style lang="less" scoped>

</style>
