<template>
    <div :class="formClass" class="row ">
        <b :class="labelClass" class="col-6">{{ labelText }}</b>
        <div class="form-check form-switch col-6">
            <input class="form-control form-check-input" type="checkbox" :value="modelValue" @change="$emit('update:modelValue', $event.target.value)" :readonly="readonly"> 
        </div>        
    </div>


    
</template>
<script>
export default{
    props:{
        label:{ type:[String,Number], default:"Read Only"},
        formClass:{ type:String, default:" "},
        inputClass:{ type:String, default:" "},
        labelClass:{ type:String, default:" "},
        modelValue:{type:Boolean, default:false},
        readonly:{type:Boolean,default:false}
    },
    data(){
        return {
            readOnly:this.readonly
        }
    },
    computed:{
        labelText(){
            return this.readOnly? this.label+' [Read-Only]' : this.label;
        }
    },
    watch:{
        readonly(n){
            this.readOnly = n;
        }
    }
}
</script>