<template>
    <v-layout>
        
            <v-checkbox
                v-model="init_value"
                @change="checkbox_change"
                
                hide-details class="shrink mr-2"
                :disabled="init_disabled"
            ></v-checkbox>
        
        
            <v-text-field
                :label="__label"
                placeholder="Alasan"
                outline
                :disabled="x_disabled || init_disabled"
                :error-messages="init_error && !init_disabled ? x_error_messages : ''"
                :error_count="init_error && !init_disabled ? x_error_count : 0 "
                :error="init_error && !init_disabled"
                :hide-details=!init_error
                v-model=init_note
                @input="note_change"
            ></v-text-field>

            
        
    </v-layout>
</template>

<script>
module.exports = {
    props : ['label', 'value', 'is_error', 'note', 'disabled'],
    mounted: function() {
      this.$nextTick( function() {
         this.init_note = this.note ? this.note : "";
         this.init_value = this.value;
      })
   },

    data () {
        return {
            init_value : false,
            init_note : ""
        }
        
    },

    methods : {
        checkbox_change (n, o) {
            if (n)  {
                this.init_note = "";
            }

            var prm = {checked: n, note: this.init_note, error: this.init_error};
            this.$emit('x_change', prm);
            this.$emit('change', prm);
            // console.log('"' + this.label + '" changed value to : ' + n);
        },

        note_change (n) {
            let prm = { checked: this.init_value, note: n, error: this.init_error };
            this.$emit('change', prm);
            this.$emit('input', n);
        }
    },
    computed : {
        __label () {
            if (this.label)
                return this.label;

            return "";
        },

        x_disabled () {
            // return false;
            if (this.init_value === "true" || this.init_value === true)
                return true;
            return false;

        },

        init_error () {
            
            if ((this.init_value === "false" || this.init_value === false) && this.init_note.length < 1)
                return true;

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


        },

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

            return 0;
        },

        x_error_messages () {
            if (this.init_error)
                return ["Kolom ini harus diisi !"];

            return [];
        },
        
        x_note () {
            
            if (this.note)
            return this.note;

            return "";
            
        },

        init_disabled () {
            return this.disabled ? this.disabled : false
        }
    }
}
</script>
