<template>
   <v-flex class="pl-2">
      <v-layout row>
      <v-checkbox @change="checkedChange()"
         :color="value.checked ? 'success' : 'warning' "
         v-model="value.checked" hide-details class="shrink">
      </v-checkbox>
      <v-text-field
         class="grow"
         :label="value.label"
         :placeholder="value.placeholder"
         :background-color="value.checked ? 'success' : value.note == '' ? 'error' : 'warning' "
         outline
         :error-messages="value.is_error? value.error_message : ''"
         :error="value.is_error"
         v-model="value.note"
         @input="noteChange()"
         ></v-text-field>
      </v-layout>
   </v-flex>
</template>

<script>
module.exports = {
   props : ['value'],
   methods : {
      noteChange(note) {
         if (! this.value.checked ) {
            this.value.is_error = this.value.note.trim() == "" 
         } else {
            this.value.is_error = false
            this.value.note = ""
         }
         this.$emit("input", this.value )
      },
      checkedChange() {
         if (this.value.checked)  {
            this.value.note = "";
            this.value.is_error = false;
         } else { 
            this.value.is_error = (this.value.note.trim() == "" )
         }
         this.$emit("input", this.value)
      }
   },
   computed : {
   }
}
</script>
