<template>

<fieldset>
  <div class="Vlt-form-element" v-bind:class="{ 'Vlt-form__element--error': hasError }">
    <div v-for="field in step.fields">
      <label class="Vlt-label" v-if="field.label !== undefined">{{field.label}}</label>
      <div v-if="field.type === 'input'" class="Vlt-input">
        <input :name="field.name" v-model="$data[field.name]"></input>
      </div>
      <div v-else-if="field.type === 'textarea'" class="Vlt-textarea">
        <textarea :name="field.name" v-model="$data[field.name]" rows="5" :placeholder="field.placeholder"></textarea>
        <small class="Vlt-form__element__hint" v-if="field.hint !== undefined">{{field.hint}}</small>
      </div>
      <div v-else></div>
    </div>

    <small v-if="hasError"class="Vlt-form__element__error">These fields are required</small>
    <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--tertiary Vlt-modal__cancel" v-on:click="reset">Cancel</button>
    <button v-show="lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary Vlt-modal__cancel" v-on:click="reset">Close</button>
    <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary" v-on:click="validate">Continue</button>
  </div>
</fieldset>

</template> <script>

import eventHub from '../eventHub';

export default {

props: ['step', 'lastStep'],
data: function() {
  return {
    name: '',
    companyName: '',
    feedback: '',
    email: '',
    hasError: false,
  }
},
computed: {
  answer: function() {
    return {
      name: this.name,
      companyName: this.companyName,
      feedback: this.feedback,
      email: this.email
    };
  }
},
methods: {
  resetFields: function() {
    this.name = '';
    this.companyName = '';
    this.feedback = '';
    this.email = '';
    this.hasError = false;
  },
  validate: function() {
    if (this.name === '' || this.companyName === '' || this.feedback === '' || this.email === '') {
      this.hasError = true;
    } else {
      this.hasError = false;
      eventHub.$emit('next-step', this.answer);
    }
  },
  reset: function() {
    eventHub.$emit('reset-modal');
  }
},
mounted: function() {
  eventHub.$on('reset-modal', this.resetFields);
}

} </script> <style scoped> .content {

white-space: pre-line;
max-width: 434px;

} </style>