<template>
    <label class="v-radio">
    <span class="v-radio__input"
          :class="{
        'is-disabled': isDisabled,
        'is-checked': model === label,
        'is-focus': focus
      }"
    >
      <span class="v-radio__inner"></span>
      <input
              class="v-radio__original"
              :value="label"
              type="radio"
              v-model="model"
              @focus="focus = true"
              @blur="focus = false"
              :name="name"
              :disabled="isDisabled">
    </span>
        <span class="v-radio__label" :style="{width:width?width+'px':'85px'}">
      <slot></slot>
      <template v-if="!$slots.default">{{label}}</template>
    </span>
    </label>
</template>
<script>
    import Emitter from '../../../../src/mixins/emitter';

    export default {
        name: 'VRadio',

        mixins: [Emitter],

        componentName: 'VRadio',

        props: {
            value: {},
            label: {},
            disabled: Boolean,
            name: String,
            width:Number
        },

        data() {
            return {
                focus: false
            };
        },

        computed: {
            isGroup() {
                let parent = this.$parent;
                while (parent) {
                    if (parent.$options.componentName !== 'VRadioGroup') {
                        parent = parent.$parent;
                    } else {
                        this._radioGroup = parent;
                        return true;
                    }
                }
                return false;
            },

            model: {
                get() {
                    return this.isGroup ? this._radioGroup.value : this.value;
                },

                set(val) {
                    if (this.isGroup) {
                        this.dispatch('VRadioGroup', 'input', [val]);
                    } else {
                        this.$emit('input', val);
                    }
                }
            },

            isDisabled() {
                return this.isGroup
                    ? this._radioGroup.disabled || this.disabled
                    : this.disabled;
            }
        }
    };
</script>
