<template>
    <div>
    <v-layout>
        
            <v-checkbox
                v-model="xcbx"
                hide-details class="shrink mr-2"
            ></v-checkbox>
        
            <v-text-field
                :label="xlabel"
                :disabled="xdisabled"
                :error="xerror"
                :error-messages="xerror ? xerrormessages : ''"
                :error_count="xerror ? xerrorcount : 0 "
                :hide-details=!xerror
                placeholder="Alasan"
                outline
                v-model="xtxt"
            ></v-text-field>

            
        
    </v-layout>
    </div>
</template>

<script>
module.exports = {
    props : ['xdatalabel','xdatacbx','xdatatxt'],
    computed :{
        xcbx: {
            get() {
                return this.xdatacbx
            },
            set(val) {
                this.$emit('update-data-cbx', val)
            }
        },
        xtxt: {
            get() {
                return this.xdatatxt
            },
            set(val) {
                this.$emit('update-data-txt', val)
            }
        },
        xlabel(){
            if (this.xdatalabel)
                return this.xdatalabel;

            return "";
        },
        xdisabled () {
            if (this.xcbx === "true" || this.xcbx === true)
                return true;
            return false;

        },
        xerror () {
             if ((this.xcbx === "false" || this.xcbx === false) && this.xtxt.length < 1)
                return true;
            else {
                return false;
            }
        },
        xerrormessages () {
            if (this.xerror)
                return ["Alasan harus diisi !"];

            return [];
        },
        xerrorcount () {
            if (this.xerror)
                return 1;

            return 0;
        }
        
    }
}
</script>
