<template>
    <div :class='["v-radio", { border }, 
    { disabled: proxyDisabled || disabled }, 
    { medium: border && (size || proxySize) === "medium" },
    { small: border && (size || proxySize) === "small" },
    { mini: border && (size || proxySize) === "mini" },
    { "v-radio-checked": computedChecked }]' 
    @click.stop='handleChecked'>
        <input type="radio" :checked='computedChecked' :disabled='disabled' :name='name || modelValue || proxyValue' :value='label'>
        <span :class='["v-radio-input", { checked: computedChecked }]'></span>
        <span :class='["v-radio-label", { active: computedChecked }]'>
            <slot></slot>
        </span>
    </div>
</template>

<script>
import { computed, inject } from 'vue';
import VairRadio from '../../types/radio';
export default {
    name: 'radio',
    props: VairRadio,
    setup (props, ctx) {
        const proxyValue = inject('proxyValue');
        const proxyDisabled = inject('proxyDisabled');
        const proxySize = inject('proxySize');
        const update = inject('update');

        const handleChecked = () => {
            if (!computedChecked.value) {
                ctx.emit('change', props.label);
            }
            if (!props.disabled && !(proxyDisabled && proxyDisabled.value)) {
                if (proxyValue?.value) {
                    update(props.label);
                } else if (props.modelValue) {
                    ctx.emit('update:modelValue', props.label);
                }
            }
        };

        const computedChecked = computed(() => {
            return (proxyValue?.value || props.modelValue) === props.label;
        });

        return {
            handleChecked,
            computedChecked,
            proxyDisabled,
            proxyValue,
            proxySize
        }
    }
}
</script>

<style lang='less' scoped>
@import url('../../assets/css/animation.css');
.v-radio {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: .3s;
    margin-right: 30px;
    &:last-child {
        margin-right: 0;
    }
    input {
        display: none;
    }
    .v-radio-input {
        border: 1px solid#dcdfe6;
        width: 14px;
        height: 14px;
        box-sizing: border-box;
        border-radius: 50%;
        transition: .3s;
    }
    .v-radio-label {
        color: #606266;
        font-weight: 500;
        margin-left: 10px;
        font-size: 14px;
        transition: .3s;
        user-select: none;
        white-space: nowrap;
    }
    .active {
        color: #409eff;
    }
    .checked {
        animation: radioChecked .3s;
        animation-fill-mode: forwards;
    }
    &:hover {
        border-color: #409eff;
        .v-radio-label {
            color: #409eff;
        }
        .v-radio-input {
            border-color: #409eff;
        }
    }
}
.border {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 12px 14px;
}
.medium {
    padding: 10px 10px;
}
.small {
    padding: 8px 8px;
}
.mini {
    padding: 6px 6px;
}
.v-radio-checked {
    border-color: #409eff;
}
.disabled {
    border-color: #dcdfe6;
    .v-radio-input {
        border: 1px solid#dcdfe6;
        background-color: #F5F7FA;
    }
    .v-radio-label {
        color: #c0c4cc;
    }
    .active {
        color: #c0c4cc;
    }
    .checked {
        background-image: radial-gradient(#fff 0% , #fff 24%, #C0C4CC 20%, #C0C4CC 100%) !important;
    }
    &:hover {
        border-color: #dcdfe6;
        .v-radio-label {
            color: #c0c4cc;
        }
        .v-radio-input {
            border-color: #c0c4cc;
        }
    }
    cursor: not-allowed;
}
</style>