<template>
    <v-container justify="center">
      <v-overlay :value="error_overlay"> 
        <v-alert type="error">
          <h4>La demande n'a pas pu être envoyée</h4><br/>
          {{ error_overlay_text }}
          <v-spacer></v-spacer>
          <v-btn @click="error_overlay=false">Fermer</v-btn>
        </v-alert>
      </v-overlay>
        <v-card>
            <v-card-title primary-title class="justify-center">Demande d'impression 3D</v-card-title>
            <v-alert v-model='alert' color="red">
                <v-icon>mdi-alert</v-icon>  <b>Attention</b><br/>
                Du à une forte demande, des délais sont à prévoir pour vos demandes d'impression
            </v-alert>
          <v-form>
           <v-banner>Formulaire de demande d'impression</v-banner>
            <v-container>
              <v-row>
                <v-col justify="center">
                  <v-flex md9 >
                    <v-text-field v-model="title" :counter="30" :rules="fieldRules" required placeholder="Titre de la demande"></v-text-field>
                    <v-text-field v-model="project" :rules="fieldRules" required placeholder="Projet (PI², PIX, Personel)"></v-text-field>
                    <v-text-field v-model="description" :rules="fieldRules" required  placeholder="Description et autres informations"></v-text-field>
                    <v-file-input v-model="stl" id="file" accept="stl" prepend-icon="mdi-upload" label="Fichier STL"></v-file-input>
                    <v-checkbox :rules="[v => !!v || 'Lisez les règles svp...']" v-model="rules" label="J'ai bien lu les règles"></v-checkbox>
                    <v-btn :loading='submiting' :disabled='submiting || !rules' @click="request_creation" color="green">Envoyer la demande</v-btn>
                  </v-flex>
                </v-col>
                <v-col>
                  <!-- <model-stl style="" :backgroundColor="stl_background" :src="stl"></model-stl> -->
                  <v-list-item justify="left">
                    <v-card color="indigo">
                      <v-card-title>Règles pour l'impression 3D</v-card-title>
                      <v-card-text>Pas d'impression d'objets interdits (ex: armes)</v-card-text>
                      <v-card-text>Pas d'objets pouvant être fait à la découpe laser: cubes, plaques</v-card-text>
                      <v-card-text>Prévoir le temps d'impression dans votre planning</v-card-text>
                    </v-card>
                  </v-list-item>
                </v-col>
              </v-row>
            </v-container>
          </v-form>
        </v-card>
    </v-container>
</template>

<script>
import axios from 'axios'
export default {
  methods: {
    reset_form () {
      this.title = ''
      this.description = ''
      this.project = ''
      this.stl = null
      this.rules = false
    },
    request_creation () {
      this.submiting = true
      axios.post('/requests/new', {
        title: this.title,
        description: this.description,
        project: this.project
      })
      .then((resp) => {
        // console.log(resp)
        let req_id = parseInt(resp.data.request_id)
        var formData = new FormData();
        formData.append("file", document.querySelector('#file').files[0]);
        axios.post(`/files/stl/upload/${req_id}`, formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
        }).then((resp) => {
          this.submiting = false
          this.reset_form()
          this.$router.push({path: 'my'})
          console.log(resp)
        }).catch((err) => {
          this.submiting = false
          this.error_overlay = true
          this.error_overlay_text = 'Failed to upload stl: ' + err
          console.log(err)
        })
      })
      .catch((err) => {
        console.log(err)
        this.submiting = false
        this.error_overlay = true
        this.error_overlay_text = err
      })
    }
  },
  data () {
    return {
      error_overlay: false,
      error_overlay_text: '',
      fieldRules: [
        v => !!v || 'Ce champ est requis',
        v => (v && v.length <= 30) || 'Ce champ ne peut pas dépasser 30 caractères'
      ],
      alert: false,
      submiting: false,

      title: '',
      project: '',
      desc: '',
      stl: null,
      rules: false
    }
  }
}
</script>
