<template>
   <div class="control has-icons-left">
  <input :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-black' : ''}`" type="text" 
  :placeholder="placeholder || ''" v-model="value" @keyup="doCheck" :disabled="disabled || false">
  <span class="icon is-left">
    <SvgIcon v-bind="{name: 'email.svg', type: 'gray', size: 21}"></SvgIcon>
  </span>
</div>
</template>
<script>
export default {
  props: ['record', 'attr', 'placeholder', 'disabled'],
  data() {
    return {
      value: this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined,
      error: undefined
    }
  },
  watch: {
    record: function(newVal) {
      this.value = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
    }
  },
  methods: {
    doCheck() {
      if(this.$empty(this.value)) {
        this.value = undefined
        this.error = false
        return this.$emit('email', null)
      }
      let check = this.$errEmail(this.value)
      this.error = check? true : false
      this.$emit('email', this.value)
    }
  }
}
</script>