<template>
    <v-layout>
        
            <v-checkbox
                v-model="x_value"
                @change="$emit('x_change',{x_value,x_note})"
                hide-details class="shrink mr-2"
            ></v-checkbox>
        
        
            <v-text-field
                :label="__label"
                placeholder="Alasan"
                outline
                :disabled="x_disabled"
                :error-messages="is_error ? x_error_messages : ''"
                :error_count="is_error ? x_error_count : 0 "
                :error=is_error
                :hide-details=!x_error
                v-model="x_note"
            ></v-text-field>
        
    </v-layout>
</template>

<script>
module.exports = {
    props : ['label', 'value', 'is_error'],

    data () {
        return {
            x_value : false,
            x_note : ""
        }
        
    },
    computed : {
        __label () {
            if (this.label)
                return this.label;

            return "";
        },

        x_disabled () {
            return this.x_value;
        },

        x_error () {
            
            if (!this.x_value && this.x_note.length < 1)
                return true;

            else {
                this.x_note = "";
                return false;
            }


        },

        x_error_count () {
            // return 0;
            if (this.x_error)
                return 1;

            return 0;
        },

        x_error_messages () {
            if (this.x_error)
                return ["Harus diisi"];

            return [];
        },
        
        // x_note : {
        //     set (newval) {
        //         return newval;
        //     },

        //     get () {
        //         return "";
        //     }
            
        // }
    }
}
</script>
