<template>
    <form @submit.prevent="formSubmit" enctype="multipart/form-data">        
        
        <div class="col form-group">
            <label for="import-file">Select excel file to import*</label>
            <input name="file" id="import-file" type="file" v-on:change="onFileChange" class="form-control">
            <div v-if="errors && errors.file" class="text-danger">{{ errors.file[0] }}</div>
        </div>
        <div class="col form-group">
            <button type="submit" class="btn btn-success btn-round btn-md"><i class="fa fa-check"></i> Save</button>
            <button type="button" class="btn btn-danger btn-round btn-md" data-dismiss="modal">Close</button>
        </div>
                        
    </form>
</template>

<script>
import FormMixin from '../shared/FormMixin';

export default {
  mixins: [ FormMixin ],
  props: ['cust_id'],
  data() {
    return {
        cid: 0,
      'action': '/bmp/import/1',
      'text': 'Contacts imported succesfully',
      'redirect': '',
      fields: {
          customer_id:this.cust_id,
          file:''
      }
    }
  },
  methods: {
               onFileChange(e){

                console.log(e.target.files[0]);

                this.fields.file = e.target.files[0];

            },

            formSubmit(e) {

                e.preventDefault();

                let currentObj = this;
                const config = {
                    headers: { 'content-type': 'multipart/form-data' }
                }
                let formData = new FormData();

                formData.append('file', this.fields.file);

                axios.post('/bmp/import/1', formData, config)

                .then(function (response) {
                    currentObj.success = response.data.success;
                    swal({
                        title: 'Success',
                        text: text,
                        icon: 'success',
                        type: 'success',
                        buttons:{
                            confirm: {
                            text : 'Go Back',
                            className : 'btn btn-success'
                            },
                            cancel: {
                            text: 'Add more..',
                            visible: true,
                            className: 'btn btn-info'
                            }
                        }
                        }).then((Delete) => {
                        if (Delete) {
                            window.location.href = '';
                        } else {
                            swal.close();
                        }
                        });
                })
                .catch(error => {
                if (error.response.status === 422) {
                this.errors = error.response.data.errors || {};
                
                }
                console.log(this.errors);
            });
            }
  },
  mounted(){
      this.fields.customer_id=this.cust_id;
      this.cid=this.cust_id;
      console.log(this.cust_id);
  }
}

</script>