<template>
<v-card flat>
  <h1 class="orange--text">จัดการข้อมูลงาน</h1>
  <v-card-title>
    <v-spacer></v-spacer>
    <v-flex sm4 xs12>
      <v-text-field
        v-model="search"
        append-icon="search"
        label="ค้นหา"
        single-line
        hide-details
      ></v-text-field>
    </v-flex>  
  </v-card-title>
  <v-data-table
    :headers="headers"
    :items="items"
    class="elevation-1"
    :search="search"
    rows-per-page-text="จำนวนเเถวต่อหน้า"
    no-results-text="ไม่พบข้อมูล"
    no-data-text="ไม่มีข้อมูล"
  >
    <template v-slot:items="props">
      <td width="10%" class="text-sm-center">{{ props.item.id }}</td>
      <td width="30%" class="text-sm-left">{{ props.item.topic }}</td>
      <td width="15%" class="text-sm-center">{{ props.item.typejob }}</td>
      <td width="20%" class="text-sm-center">{{ props.item.position }}</td>
      <td width="5%" class="text-sm-center">{{ props.item.salary }}</td>
      <td width="20%" class="text-sm-center">
        <v-layout row wrap justify-center>
          <v-btn depressed class="mx-1" fab outline small color="cyan" @click="$router.push(`/employer/editjob/${props.item.job_id}`)">
          <v-icon>edit</v-icon>
        </v-btn> 
        <v-btn depressed class="mx-1" fab outline small color="red" @click="deleteJob(props.item.job_id)">
          <v-icon>delete</v-icon>
        </v-btn> 
        </v-layout>
        
      </td>
    </template>
  </v-data-table>
  <v-layout row wrap justify-center>
    <v-btn color="error" class="text-sm-center text-xs-center" dark @click="$router.push('/employer')">ย้อนกลับ</v-btn>
  </v-layout>
</v-card>
</template>

<script>
export default {
  data () {
    return {
      search: '',
      headers: [
        { text: 'รหัสงาน', value: 'id', align: 'center' },
        { text: 'หัวข้องาน', value: 'topic', align: 'center' },
        { text: 'ประเภทธุรกิจ', value: 'typejob', align: 'center' },
        { text: 'ตำแหน่งงาน', value: 'position', align: 'center' },
        { text: 'ค่าตอบแทน/เงินเดือน', value: 'salary', align: 'center' },
        { text: 'Action', value: 'action', align: 'center' }
      ],
      items: []
    }
  },
  methods: {
    deleteJob(id) {
      axios.delete(`/api/jobs/${id}`)
        .then(res => {
          const i = this.items.findIndex(x => x.job_id == id)
          this.items.splice(i, 1);
          this.getData()
        })
        .catch(err => {console.log(err.response)})
    },
    getData () {
      this.$store.dispatch('checkEmployer')
      .then(res => {
        axios.get(`/api/jobs/${res.id}`)
          .then(res => {
            console.log(res)
            this.items = []
            const jobs = res.data.jobs
            for (let i = 0; i < jobs.length; i++) {
              this.items.push({
                id: i+1,
                topic: jobs[i].job_title,
                typejob: jobs[i].job_type,
                position: jobs[i].department,                                    
                salary: jobs[i].salary,
                job_id: jobs[i].id
              })
            }
          })
          .catch(err => {
            console.log(err.response)
          })
      })
      .catch(err => {console.log(err.response)})
    }
  },
  beforeMount () {
    this.getData()
  }
}
</script>
