<template>
    <form :class="$style.radioGroup">
        <div
            :class="[direction]"
            v-for="(item,index) in insideOptions"
            :key="index"
        >
            <label :class="item.disabled&&$style.disabled">
                <Radio
                    :name="name"
                    :value="{value:item.value,status:item.status,disabled:item.disabled}"
                    @change="change"
                />
                <span :class="$style.text">{{item.text}}</span>
            </label>
        </div>
    </form>
</template>

<script>

    import Radio from "../form/Radio";
    export default {
        name: "RadioGroup",
        components: {Radio},
        props:{
            value:{},
            name:{
                type:String,
                default:'Radio'+Math.random()*100+'Name'
            },
            options:{
                type:Array,
                default:[]
            },
			direction:{
            	type:String,
                default:'vertical'
            }
        },
        watch:{
            options(newValue){
                let tempArr=JSON.parse(JSON.stringify(newValue));
                for(let n in tempArr){
                    if(tempArr[n].disabled&&tempArr[n].value==this.value){
                        tempArr.splice(n,1);
                        this.$emit('input',tempArr[0]?tempArr[0].value:null);
                        return;
                    }
                }

            }
        },
        computed:{
            insideOptions(){
                return this.options.map(function(v){
                    return {
                        ...v,
                        status:v.value==this.value
                    }
                }.bind(this))
            }
        },
        methods:{
            change({value,status}){
                console.log(value,status)
                if(status){
                    this.$emit('input',value);
                }
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';

    .radioGroup {
        display: block;
        min-width: 300px;
        max-width: 100%;
        >div{
            >label{
                font-size: 14px;
                cursor: pointer;
                margin-bottom: 12px;
                &.disabled{
                    cursor: default;
                    >.text{
                        color: #BDBDBD;
                    }
                }
                >.text{
                    margin-left: 10px;

                }
                >*{
                    vertical-align: middle;
                }
            }
            &:global{
                &.vertical{
                    display: block !important;
                    width: 100% !important;
                }
                &.horizontal{
                    display: inline-block;
                    margin-right: 10px;
                }
            }
        }
    }
</style>