<template>
    <label :class="[$style.radio,getChecked&&$style.checked,value.disabled&&$style.disabled]">
        <input
            class="hidden"
            type="radio"
            :name="name"
            :value="value.data"
            :checked="getChecked"
            @change="change"
            :disabled="!!value.disabled"
        />
        <span :class="$style.point"/>
    </label>
</template>

<script>
    import IconFont from "../basic/IconFont";
    export default {
        name: "Radio",
        components: {IconFont},
        props:{
            value:{
                type:Object,
                default(){
                    return {
                        data:null,
                        status:false,
                        disabled:false
                    }
                }
            },
            name:{
                type:String,
                default:''
            }
        },
        computed:{
            getChecked(){
                return this.value.status||null;
            }
        },
        methods:{
            change(e){
                this.$emit('change',{
                    ...this.value,
                    status:e.target.checked
                })
            }
        }
    }
</script>

<style module lang="scss">
    @value CheckboxActiveBg from '../../cssInjection/stylization.scss';
    @import '../../cssInjection/cssLayout.scss';
    .radio{
        vertical-align: middle;
        display: inline-block;
        position: relative;
        width: 14PX;
        height: 14PX;
        border-radius: 50%;
        border: 1px solid #979797;
        transition-property: border-color;
        transition-duration: .2s;
        background-color: rgba(255,255,255,1);
        cursor: pointer;
        padding: 3PX;
        .point{
            display: block;
            width: 100%;
            height: 100%;
            background-color: CheckboxActiveBg;
            border-radius: 50%;
            opacity: 0;
        }
        .point{
            font-size: 12px;
        }
        &.checked{
            border-color: CheckboxActiveBg;
            .point{
                opacity: 1;
            }
        }
        &:not(.checked){
            &:hover{
                border-color: CheckboxActiveBg;
            }
        }
        &.disabled{
            background-color: rgb(235, 235, 228) !important;
            border-color: rgb(235, 235, 228) !important;
        }
    }
</style>