<template>
  <div>
    <Dialog>
      <v-card>
        <v-toolbar dark color="deep-orange" flat>
          <v-toolbar-title>สมัครงาน</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="$store.commit('setDialogJob', false)">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <v-layout row wrap justify-center>
          <v-card-text>
            <v-container grid-list-md text-xs-center>
              <v-layout row wrap>
                <v-flex>
                  <v-form @submit.prevent="registerJob()" ref="registerJob">
                    <v-text-field
                      disabled
                      label="รหัสงาน"
                      v-model="id"
                    ></v-text-field>
                    <v-text-field
                      readonly
                      label="อีเมล"
                      color="deep-orange"
                      type="text"
                      v-model="email"
                      required
                    ></v-text-field>
                    <v-text-field
                      readonly
                      label="ชื่อ"
                      color="deep-orange"
                      type="text"
                      v-model="name"
                      required
                    ></v-text-field>
                    <v-text-field
                      label="ระดับการศึกษา"
                      color="deep-orange"
                      type="text"
                      v-model="registerJob_data.degree"
                      required
                    ></v-text-field>
                    <v-text-field
                      label="สาขา"
                      color="deep-orange"
                      type="text"
                      v-model="registerJob_data.major"
                      required
                    ></v-text-field>
                    <v-text-field
                      label="คณะ"
                      color="deep-orange"
                      type="text"
                      v-model="registerJob_data.faculty"
                      required
                    ></v-text-field>
                    <v-text-field
                      label="มหาวิทยาลัย"
                      color="deep-orange"
                      type="text"
                      v-model="registerJob_data.university"
                      required
                    ></v-text-field>
                    <v-text-field
                      label="GPAX"
                      color="deep-orange"
                      type="text"
                      v-model="registerJob_data.gpax"
                      required
                    ></v-text-field>
                    <v-btn color="deep-orange" block type="submit" large>สมัครงานนี้</v-btn>
                  </v-form>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-text>
        </v-layout>
      </v-card>
    </Dialog>
  </div>
</template>

<script>
import Dialog from '../components/DialogJob.vue';
export default {
  props: ['id'],
  components: {
    Dialog
  },
  data () {
    return {
      registerJob_data: {
        major: '',
        faculty: '',
        university: '',
        gpax: '',
        degree: ''
      }
    }
  },
  computed: {
    name () {
      return this.$store.getters.getUser.name
    },
    email () {
      return this.$store.getters.getUser.email
    }
  },
  methods: {
    registerJob () {
      if(this.$refs.registerJob.validate()) {
        axios.post('/api/applicants', {
          job_id: this.id,
          email: this.email,
          name: this.name,
          degree: this.registerJob_data.degree,
          major: this.registerJob_data.major,
          faculty: this.registerJob_data.faculty,
          university: this.registerJob_data.university,
          gpax: this.registerJob_data.gpax
        })
          .then(res => {
            this.$store.commit('setSnackbar', {
              show: true,
              color: 'success',
              text: 'สมัครงานสำเร็จ'
            })
            this.$store.commit('setDialogJob', false)
            this.registerJob_data = {
              major: '',
              faculty: '',
              university: '',
              gpax: '',
              degree: ''
            }
          })
          .catch(err => {
            console.log(err.response)
          })
      } else {
        this.$Loading.error()
      }
    }
  }
}
</script>
