<template> 
<div v-show="myConfig.visible" style="white-space: nowrap;">
    <RadioGroup   ref="myControl"  v-model="value"  :size="myConfig.size"  :style="myConfig.radioStyle" :vertical="myConfig.vertical" :type="myConfig.vtype" @on-change="_setFatherValue">
        <Radio v-for="(item,index) in myConfig.data" :ref="'myControl_'+ index" :key="'radio_' + index" :label="item[myConfig.valueField]" :disabled="myConfig.readOnly" class="efuture-radiogroupbox-radio">
            <span >{{item.label}}</span>
        </Radio>
    </RadioGroup>
</div>
</template>
<script>
    import Base from '@/components/base/controlbase.vue';
    export default {
        name: 'radiogroupbox',
        extends: Base,
        data () {
            return {
                myConfig: {
                    data:[],
                    valueField: 'code',
                    textField: 'name',
                    codeWithName: true ,
                    defaultValue:'',
                    vertical:false,
                    vtype:null,
                    divStyle:{},
                    radioStyle:{}
                }
            };
        },
        methods:{
            setCustomPro(obj) {
                if (obj.data !== undefined && obj.data.length > 0) {
                    obj.data.forEach(el => {
                        if (this.myConfig.codeWithName) {
                            el.label = '['+ el[this.myConfig.valueField]+']' + el[this.myConfig.textField];
                        } else {
                            el.label =el[this.myConfig.textField];
                        }
                    });
                }
                return obj;
            },
            customInit() {
                if (this.myConfig.data && this.myConfig.data.length > 0) {
                    this.myConfig.data.forEach(el => {
                        if (this.myConfig.codeWithName) {
                            el.label = '['+ el[this.myConfig.valueField]+']' + el[this.myConfig.textField];
                        } else {
                            if (el[this.myConfig.textField]) {
                                el.label =el[this.myConfig.textField];
                            } else {
                                el.label =el[this.myConfig.valueField];
                            }
                            
                        }
                    });
                }
            },
            setFocus(value) {
                let index = this.myConfig.data.findIndex(el => el[this.myConfig.valueField] === this.value);
                if (index ===  -1) {
                    index = 0;
                }
                let name = 'myControl_' + index;
                if (this.$refs[name] && this.$refs[name][0]) {
                    if (value) {
                        this.$refs[name][0].$el.control.focus();
                    } else {
                        this.$refs[name][0].$el.control.blur();
                    } 
                }
            }
           
        }
    };
</script>