new Vue({
    el: '#app',
    data: {
        status: 100,
        form: {
            'Title':'',
            'FirstName': '',
            'FamilyName':'',
            'Street':'',
            'Postcode':'',
            'City':'',
            'Language':'',
            'Phone':'',
            'Fonction':'',
            'Description':'',
            'Organisation':'',
            'Choice':'',
            'Status':'',
            'Email':'',
            'CompanyNumber':''
        },
        endpoint: ''
    },
    mounted: function() {
        this.endpoint = this.$refs.form.getAttribute('action');
    },
    methods: {
        sendFormData: function() {
            this.status = 101;
   
            var $this = this;

            axios({
                method: 'POST',
                url: this.endpoint,
                data: this.form,
                validateStatus: function() { return true }
            }).then(function(result) {
                $this.status = result.status;
                if(result.data.Status != 'OK') {

                    $this.status = 500;
                    //console.error(result.data.Message);
                }
            }).catch(function(error) {
                console.error(result);
            });
        },
        
        validateForm: function() {
            this.$refs.form.classList.add('was-validated');
            if (this.$refs.form.checkValidity() !== false) {
            var $this = this;
            setTimeout(() => {
  $this.sendFormData();
}, "500");
    }
 }
}})