<template>
   <accompanying-course v-bind:accompanying_course="accompanying_course"/>
   <persons-associated v-bind:persons_associated="accompanying_course.persons"/>
   <requestor v-bind:accompanying_course="accompanying_course"/>
</template>

<script>
import AccompanyingCourse from './components/AccompanyingCourse.vue';
import PersonsAssociated from './components/PersonsAssociated.vue';
import Requestor from './components/Requestor.vue';

export default {
   name: 'App',
   components: { 
      AccompanyingCourse,
      PersonsAssociated, 
      Requestor
   },
   data() {
      return {
         accompanying_course: {}
      };
   },
   computed: {
      accompanyingCourseId() {
         return window.accompanyingCourseId;
      }
   },
   methods: {
      async getAccompanyingCourse() {
         let data_;
         return fetch(`/fr/api/parcours/${accompanyingCourseId}/show`)
            .then(response => response.json())
            .then(data => {
               this.$data.accompanying_course = data;
            });
      }
   },
   async mounted() {
      await this.getAccompanyingCourse();
   }
};
</script>

<style scoped></style>
