<template>
  <main>
    <v-form
      ref="form"
      v-model="valid"
      lazy-validation
    >
      <v-row>
        <slot></slot>
      </v-row>

      <v-btn
        class="mr-4 submitBtn"
        @click="submit"
      >
        submit
      </v-btn>
    </v-form>

   <AlertComponent type="success" v-if="saveOk">Sauvegarde Effectuée</AlertComponent>
   <AlertComponent type="error" v-if="saveKo">Sauvegarde Echouée</AlertComponent>
  </main>
</template>

<script lang="ts">
  import {defineComponent, ref, toRef} from '@nuxtjs/composition-api'
  import {Repository} from "@vuex-orm/core";
  import Vue from 'vue'
  export type VForm = Vue & { validate: () => boolean }

  export default defineComponent({
    props: {
      // repository:{
      //   type: Object as () => Repository,
      //   required: true
      // }
    },
    setup(){
      const valid = true
      const saveOk = ref(false)
      const saveKo = ref(false)
      return {
        valid,
        saveOk,
        saveKo
      }
    },
    methods:{
      async submit(){
      //   const form:VForm = this.$refs.form;
      //   if(form.validate()){
      //     const model = await this.repository.find(parseInt(this.$route.params.id));
      //     if(model){
      //       const playload = model.$toJson();
      //
      //       this.$http.$put(`https://local.new.api.opentalent.fr/api/${model.$entity}/${this.$route.params.id}`, playload)
      //         .then(()=>{
      //           this.saveOk=true
      //         }, () =>{
      //           this.saveKo=true
      //         })
      //
      //       setTimeout(()=>{
      //         this.saveOk=false
      //         this.saveKo=false
      //       },2000)
      //     }
      //   }
      }
    }
  })
</script>

<style scoped>
  .submitBtn{
    margin-top: 20px;
  }
</style>
