<template>
  <div id="application-view">
    <v-container fluid grid-list-sm v-if="loaded === 3" justify-space-around>
      <v-flex justify-space-around>
        <ApplicationTitle></ApplicationTitle>
      </v-flex>

      <v-alert
        outline
        :value="$store.state.moduleApplications.currentApplication.application_data.personal_data.applicant_application_updated_date != null"
        type="info"
        style="margin-bottom: 30px;"
      >Cette candidature à été modifiée par son propriétaire le {{$store.getters['moduleApplications/getFormatedApplicationUpdateDate']}}</v-alert>

      <v-layout>
        <v-container fluid>
          <v-layout row>
            <v-flex grow pa-1 class="printable">
              <PersonalDataSheet/>
            </v-flex>
            <v-flex grow pa-1>
              <FilesDataSheet/>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex grow pa-1 class="printable">
              <ResponsiblesDataSheet/>
            </v-flex>
            <v-flex grow pa-1 class="printable">
              <ScolaritiesDataSheet/>
            </v-flex>
            <v-flex grow pa-1 class="printable">
              <TrainingsDataSheet/>
            </v-flex>
            <v-flex grow pa-1 class="printable">
              <ActivitiesDataSheet/>
            </v-flex>
          </v-layout>
        </v-container>
        <v-flex d-flex xs12 sm5>
          <ApplicationComments/>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import ApplicationTitle from '@/components/application/applicationTitle.vue'
import ApplicationComments from '@/components/application/applicationComments.vue'
import PersonalDataSheet from '@/components/application/sheets/personalDataSheet.vue'
import ResponsiblesDataSheet from '@/components/application/sheets/responsiblesDataSheet.vue'
import FilesDataSheet from '@/components/application/sheets/filesDataSheet.vue'
import ScolaritiesDataSheet from '@/components/application/sheets/scolaritiesDataSheet.vue'
import TrainingsDataSheet from '@/components/application/sheets/trainingsDataSheet.vue'
import ActivitiesDataSheet from '@/components/application/sheets/activitiesDataSheet.vue'

export default {
  name: 'application-view',
  data () {
    return {
      loaded: 0
    }
  },
  created () { this.init() },
  watch: {
    '$route.params.id' () { this.init() }
  },
  methods: {
    init () {
      this.$store.dispatch('moduleApplications/getCurrentApplicationData', { id: this.$route.params.id }).then(() => this.loaded++)
      this.$store.dispatch('moduleApplications/getCurrentApplicationComments', { id: this.$route.params.id }).then(() => this.loaded++)
      this.$store.dispatch('moduleApplications/getCurrentApplicationMarker', { id: this.$route.params.id }).then(() => this.loaded++)
    }
  },
  components: {
    ApplicationTitle,
    ApplicationComments,
    PersonalDataSheet,
    FilesDataSheet,
    ResponsiblesDataSheet,
    ScolaritiesDataSheet,
    TrainingsDataSheet,
    ActivitiesDataSheet
  }
}
</script>