<template>
  <div id="applications-view">
    <h1>Postulations</h1>
    <div>
      <!-- <pre>
        {{$store.state.moduleApplications.applications}}
      </pre> -->
      <v-card-title>
        <v-select
          :items="$store.state.moduleUser.permittedJobs"
          label="Métier (tous)"
          item-text="job_full_value"
          item-value="job_short_value"
          v-model="jobFilter"
        ></v-select>

        <v-spacer></v-spacer>
        <v-text-field
          v-model="search"
          append-icon="search"
          label="Rechercher"
          single-line
          hide-details
        ></v-text-field>
      </v-card-title>
      <v-data-table
        :headers="headers"
        :items="$store.state.moduleApplications.applications"
        item-key="applicant_id"
        :search="search"
        :pagination.sync="pagination"
        select-all
      >
        <template v-slot:items="props">
          <!-- :active="props.selected" @click="props.selected = !props.selected" -->
          <tr>
            <td>
              <v-checkbox :input-value="props.selected" primary hide-details></v-checkbox>
            </td>
            <td>{{ props.item.applicant_name }} {{ props.item.applicant_fsname }}</td>
            <td>{{ props.item.job_full_value }}, {{ props.item.location_site }}</td>
            <td>{{ props.item.applicant_address_street }} {{ props.item.applicant_address_npa }}</td>
            <td>{{ props.item.applicant_mail }}</td>
            <td>{{ props.item.applicant_foreign_authorization }}</td>
            <td>{{ props.item.applicant_birthdate }}</td>
            <td>{{ props.item.applicant_has_majority }}</td>
            <td>{{ props.item.applicant_nationality }}</td>
            <td>{{ props.item.applicant_origin }}</td>
            <td>{{ props.item.applicant_speaks_french }} {{ props.item.applicant_speaks_english }} {{ props.item.applicant_speaks_german }} {{ props.item.applicant_speaks_other }}</td>
            <td>{{ props.item.applicant_scolarity_end }}</td>
            <td>{{ props.item.applicant_application_date }}</td>
            <td></td>
            <td>
              <v-tooltip bottom>
                <template v-slot:activator="{ on }">
                  <v-icon @click="navigateTo(props.item.applicant_id)" v-on="on">pageview</v-icon>
                </template>
                <span>Consulter</span>
              </v-tooltip>
            </td>
          </tr>
        </template>
      </v-data-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'applications-view',
  data() {
    return {
      loaded: false,
      jobFilter: null,
      search: '',
      pagination: {},
      selected: [],
      headers: [
        { text: 'Nom, Prénom', align: 'left', value: 'applicant_fsname' },
        { text: 'Formation, Lieu', value: 'applicant_formation' },
        { text: 'Adresse', value: 'applicant_npa' },
        { text: 'Email', value: 'applicant_mail' },
        { text: 'Cat. permis étranger', value: 'applicant_foreign_authorization' },
        { text: 'Date naissance', value: 'applicant_birthdate' },
        { text: 'Majeur', value: 'applicant_has_majority' },
        { text: 'Nationalité', value: 'applicant_nationality' },
        { text: 'Origine', value: 'applicant_origin' },
        { text: 'Langues', value: 'applicant_languages', sortable: false },
        { text: 'Fin de scolarité', value: 'applicant_scolarity_end' },
        { text: 'Date postulation', value: 'applicant_application_date' },
        { text: 'Indications', value: 'indications' },
        { text: 'Actions', value: 'actions', sortable: false },
      ]
    }
  },
  created() {
    this.loadApplications()
  },
  computed: {
    pages() {
      if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) return 0
      return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
    }
  },
  methods: {
    loadApplications() {
      this.$store.dispatch('moduleApplications/getApplications')
      this.$store.dispatch('moduleUser/getUserPermittedJobs')
      // this.loaded = true
    },
    navigateTo(id) {
      this.$router.push('/application/' + id)
    }
  }
}
</script>

<style>
</style>