<template>
    
    <div class="form-floating rounded bg-primary-subtle m-1" :class="formClass" style="width: -webkit-fill-available;">
        <!-- <select :value="modelValue" :disabled="readonly || disabled" class="form-select" @change="update($event.target.value)" v-model="selected"  > -->
            <select v-if="listMode=='Array'" :disabled="readonly || disabled" class="form-select bg-primary-subtle" @change="update()" v-model="selected" :value="oDS" >
                                        <option disabled value=0>Please select one</option>
                                        <option :class="optionClass" v-for="opt,inx in options" 
                                                :key="inx" :value="opt" :selected="isSelectedValue(opt,ogDataSrc)">{{ opt }}</option> 
                                    </select>
            <select v-else :disabled="readonly || disabled" class="form-select bg-primary-subtle" @change="update()" v-model="selected" :value="oDS" >
                <option disabled value=0>Please select one</option>
                <option :class="optionClass" v-for="opt,inx in options" 
                        :key="inx" :value="opt" :selected="isSelectedValue(opt.id,ogDataSrc)">
                        {{ opt.name }} <span v-if="subTexts.length>0"> <i v-for="s,i in subTexts" :key="i">{{ substr(opt[s]) }} </i></span>
                </option>                
                
            </select>


                                    
        <label :class="labelClass ">{{ labelText }} :  <!-- <i class=" bg-info-subtle p-1 rounded">{{ selectedlabel}}</i> --></label>
    </div>
</template>
<script>

export default{
    props:{
        label:{ type:[String,Number], default:"Enter Value"},
        formClass:{ type:String, default:" "},
        placeholder:{ type:String, default:"value" },
        optionClass:{ type:String, default:" "},
        labelClass:{ type:String, default:" "},
        modelValue:[String,Number,Date,File,Object],
        readonly:{type:Boolean,default:false},
        disabled:{type:Boolean,default:false},
        ogDataSrc:{type:[String,Number,Date,File,Object], default:null},
        options:Array,
        listMode:{type:String,default:"Object"},
        subTexts:{type:Array, default:new Array([])},
    },
    data(){
        return {
            readOnly:this.readonly,
            selected:null,
            oDS:this.ogDataSrc,
            selectedlabel:"Please Select :",
            flip:true,
        }
    },
    computed:{
        labelText(){
            return this.readOnly? this.label+' [Read-Only]' : this.label;
        },
    },
    methods:{
        substr(str){
            
            return str==undefined? '':' - '+str;
        },
        update(){
                this.$emit('update:modelValue', this.selected);
                this.selectedlabel=this.selected.name;         
        },
        isSelectedValue(obj,v){
            return obj==v;
        }
    },
    watch:{
        readonly(n){
            this.readOnly = n;
        },
        ogDataSrc(n){
            this.oDS=n;
            this.selected=n;
        },
    },
    mounted(){
        this.selected=this.ogDataSrc;
        this.selectedlabel=this.ogDataSrc;
    }
}
</script>