<template>
  <div>
    <div class="text-left label">
      <label :for="`email-${getId}`">{{ title }}</label></div>
    <b-form-input
      :id="`email-${getId}`"
      class="radius-theme"
      type="text"
      placeholder="maria@email.com"
      :disabled="disabled"
      :required="required"
      v-model.trim="getCurrentValue"
    ></b-form-input>
    <div class="text-left" v-show="error">
      <small class=" pt-2 text-danger" >Por favor, insira um email.</small>
    </div>
  </div>
</template>

<script>
export default {
  name: 'email',
  props: {
    email: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      default: 'E-mail:',
    },
    submit: {
      type: Boolean,
      default: false
    },
    disabled:{
      type: Boolean,
      default: false
    },
    required:{
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'email',
    event: 'change',
  },
  computed: {
    error(){
      var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return (this.submit && this.getCurrentValue.length == 0 && !re.test(this.getCurrentValue)) || (this.submit && !re.test(this.getCurrentValue));
    },
    getCurrentValue: {
      get() {
        return this.email;
      },
      set(value) {
        this.$emit('change', value);
      },
    },
    getId() {
      return Math.floor(Math.random() * 100);
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../../assets/css/main.scss';
@import '../../../assets/css/cards.scss';
</style>
