<template>
  <div class="sv-radio" :class="{'disabled': disabled}" @click="handleClick">
    <i class="sv-radio-icon" :class="{'active': radioGroupValue === value}"></i>
    <span class="sv-radio-label">
      <slot>{{label}}</slot>
    </span>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'svRadio',
    data () {
      return {
        radioGroupValue: ''
      }
    },
    props: {
      label: String,
      value: [String, Number, Boolean],
      disabled: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      handleClick () {
        if (this.disabled) return
        this.$parent.radioGroupValue = this.value
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
</style>
