<template>
  <div>
    <v-layout row wrap fill-height justify-center>
      <v-flex xs12 sm12>
        <v-layout row wrap justify-center>
          <v-flex xs12 sm3 class="pr-2">
            <v-flex xs12 sm12 class="white div-card pa-4">
              <v-flex xs12 sm12 class="mb-3">
                <span class="title font-weight-bold ">เงื่อนไขการค้นหา</span>
                <v-divider></v-divider>
              </v-flex>
              <v-flex xs12 sm12 class="">
               <label class="subheading font-weight-medium pb-1">ค้นหาโดยใช้คำหลัก</label>
                <v-form @submit.prevent="searchKeyword()">
                <v-text-field
                  single-line
                  label="ค้นหาโดยใช้คำหลัก"
                  class="fix-height"
                  v-model="search"
                  outline
                ></v-text-field>
               </v-form>
              </v-flex>
              <v-flex xs12 sm12 class="">
               <label class="subheading font-weight-medium pb-1">ค้นหาตามประเภทงาน</label>
               <v-select
                @change="change"
                single-line
                label="เลือกประเภทงาน"
                v-model="select"
                :items="jobs_type"
                class="fix-height"
                outline
               ></v-select>
              </v-flex>
              <v-flex xs12 sm12 class="">
               <label class="subheading font-weight-medium pb-1">ค้นหาโดยชื่อบริษัท</label>
                <v-form @submit.prevent="searchCompany">
                  <v-text-field
                    single-line
                    v-model="company"
                    label="พิมพ์ชื่อบริษัท"
                    class="fix-height"
                    outline
                  ></v-text-field>
                </v-form>
              </v-flex>
              <v-flex xs12 sm12 class="mt-2">
                <span class="subheading font-weight-bold ">BTS</span>
              </v-flex>
              <v-checkbox
                v-model="chips.chip4"
                @change="fillter"
                :label="`BTS สายสีลม`"
                class="height-chkbox"
              ></v-checkbox>
              <v-checkbox
                v-model="chips.chip5"
                @change="fillter"
                :label="`BTS สายสุขุมวิท`"
                class="height-chkbox"
              ></v-checkbox>
              <v-flex xs12 sm12 class="mt-4">
                <span class="subheading font-weight-bold ">MRT</span>
              </v-flex>
              <v-checkbox
                v-model="chips.chip6"
                @change="fillter"
                :label="`MRT สายน้ำเงิน`"
                class="height-chkbox"
              ></v-checkbox>
              <v-checkbox
                v-model="chips.chip7"
                @change="fillter"
                :label="`MRT สายสีม่วง`"
                class="height-chkbox"
              ></v-checkbox>
              <v-flex xs12 sm12 class="mt-4">
                <span class="subheading font-weight-bold ">ARL</span>
              </v-flex>
              <v-checkbox
                :label="`ARL`"
                v-model="chips.chip8"
                @change="fillter"
                class="height-chkbox"
              ></v-checkbox>
              
              
            </v-flex>
          </v-flex>
          <v-flex xs12 sm9 class="pl-2">
            <v-flex xs12 sm12 class="white div-card mb-2 px-3 py-2">
              <span class="caption grey--text">แสดงผล {{ from }} - {{ to }} ตำแหน่งงาน จากทั้งหมด {{ jobs.length }} งาน</span>
              <div v-if="chkChip">
              กรองตาม: 
              <v-chip @blur="fillter" v-model="chips.chip1" small close>คีย์เวิร์ด: {{ textChip.chip1 }}</v-chip>
              <v-chip @blur="selectTypeJob" v-model="chips.chip2" small close>ประเภทงาน: {{ textChip.chip2 }}</v-chip>
              <v-chip @blur="fillter" v-model="chips.chip3" small close>บริษัท: {{ textChip.chip3 }}</v-chip>
              <v-chip @blur="fillter" v-model="chips.chip4" small close>BTS สายสีลม</v-chip>
              <v-chip @blur="fillter" v-model="chips.chip5" small close>BTS สายสุขุมวิท</v-chip>
              <v-chip @blur="fillter" v-model="chips.chip6" small close>MRT สายน้ำเงิน</v-chip>
              <v-chip @blur="fillter" v-model="chips.chip7" small close>MRT สายสีม่วง</v-chip>
              <v-chip @blur="fillter" v-model="chips.chip8" small close>ARL</v-chip>
            </div>
            </v-flex>            
            <div v-for="job in jobs.slice((pagination.page-1)*pagination.rowsPerPage, pagination.page*pagination.rowsPerPage)" :key="job.id" class="mb-3">
              <v-flex xs12 sm12 class="white div-card">
                <v-layout row wrap class="pa-2">
                  <v-flex xs3 sm2 class="text-sm-center text-xs-center">
                    <img class="" width="90" height="90" :src="job.imageCompany" alt="">
                  </v-flex>
                  <v-flex xs9 sm8 class="pa-2">
                    <v-flex xs12 sm12>
                      <label class="title font-weight-black indigo--text ">{{ job.job_title }}</label>
                    </v-flex>
                    <v-flex xs12 sm12 class="mb-1">
                      <label class="subheading font-weight-medium black--text">{{ job.company_name }}</label>
                    </v-flex>
                    <v-flex xs12 sm12>
                      <label class="body-2 grey--text ">{{ job.amphoe }}, {{ job.province }} </label>
                    </v-flex>                   
                  </v-flex>
                  <v-flex xs12 sm2>
                    <v-layout row wrap justify-end>
                      <v-btn color="deep-orange " v-if="chk" dark small depressed class="body-2" @click="$store.commit('setDialogJob', !$store.getters.getDialogJob);id=job.id">สมัครงานนี้</v-btn>
                      <v-btn color="deep-orange " v-if="!chk" dark small depressed class="body-2" @click="$store.commit('setSnackbar', {show: true, color: 'error', text: 'จำเป็นต้องเข้าสู่ระบบสมาชิกก่อน!'})">สมัครงานนี้</v-btn>
                    </v-layout>
                    <v-layout row wrap justify-end class="px-2">
                      <label class="font-weight-bold">{{ job.num ?  job.num + ' อัตรา' : '' }}</label>
                    </v-layout>                  
                  </v-flex>                 
                </v-layout>
                <v-flex xs12 sm12 class="detail-bottom">
                  <v-layout row wrap>
                    <v-flex xs6 sm6 class="px-3 py-1">
                      <span class="caption">{{ job.created_at }}</span>
                    </v-flex>
                    <v-flex xs6 sm6 class="px-3 py-1 text-sm-right text-xs-right">
                      <router-link :to="'/detailjob/'+job.id" class="caption">ดูเพิ่มเติม <v-icon small color="indigo ">fas fa-angle-right</v-icon></router-link>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-flex>
            </div>
            <v-flex xs12 sm12 class="mt-3 text-sm-center text-xs-center">
              <v-pagination
                circle
                v-model="pagination.page"
                :length="pages"
                :total-visible="10"
                v-if="jobs.length > 0"
              ></v-pagination>
              <span v-else>'ไม่มีข้อมูล'</span>
            </v-flex>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
    <RegisterJob :id="id"></RegisterJob>
  </div>
</template>

<script>
import RegisterJob from './RegisterJob.vue';
export default {
  components: {
    RegisterJob
  },
  data () {
    return {
      id: null,
      jobs: [],
      jobs_data: [],
      jobs_type: [],
      pagination: {
        page: 1,
        rowsPerPage: 10
      },
      search: '',
      select: '',
      company: '',
      chips: {
        chip1: false,
        chip2: false,
        chip3: false,
        chip4: false,
        chip5: false,
        chip6: false,
        chip7: false,
        chip8: false
      },
      textChip: {
        chip1: '',
        chip2: '',
        chip3: ''
      },
      btsSilom: [
        'บางหว้า',
        'วุฒากาศ',
        'ตลาดพลู',
        'โพธิ์นิมิตร',
        'วงเวียนใหญ่',
        'ธนบุรี',
        'สะพานตากสิน',
        'สุรศักดิ์',
        'ช่องนนทรี',
        'ศาลาแดง',
        'ราชดำริ',
        'สยาม',
        'สนามกีฬาแห่งชาติ'
      ],
      btsSukumwit: [
        'หมอชิต',
        'สะพานควาย',
        'อารีย์',
        'สนามเป้า',
        'อนุสาวรีย์ชัยสมรภูมิ',
        'พญาไท',
        'ราชเทวี',
        'สยาม',
        'ชิดลม',
        'เพลินจิต',
        'นานา',
        'อโศก',
        'พร้อมพงษ์',
        'ทองหล่อ',
        'เอกมัย',
        'พระโขนง',
        'อ่อนนุช',
        'บางจาก',
        'ปุณณวิถี',
        'อุดมสุข',
        'บางนา',
        'แบริ่ง'
      ],
      mrtBlue: [
        'หัวลำโพง',
        'สามย่าน',
        'สีลม',
        'ลุมพินี',
        'คลองเตย',
        'ศูนย์การประชุมแห่งชาติสิริกิติ์',
        'สุขุมวิท',
        'เพชรบุรี',
        'พระราม 9',
        'ศูนย์วัฒนธรรมแห่งประเทศไทย',
        'ห้วยขวาง',
        'สุทธิสาร',
        'รัชดาภิเษก',
        'ลาดพร้าว',
        'พหลโยธิน',
        'สวนจตุจักร',
        'กำแพงเพชร',
        'บางซื่อ',
        'เตาปูน'
      ],
      mrtViolet: [
        'คลองบางไผ่',
        'ตลาดบางใหญ่',
        'สามแยกบางใหญ่',
        'บางพลู',
        'บางรักใหญ่',
        'บางรักน้อยท่าอิฐ',
        'ไทรม้า',
        'สะพานพระนั่งเกล้า',
        'แยกนนทบุรี 1',
        'บางกระสอ',
        'ศูนย์ราชการนนทบุรี',
        'กระทรวงสาธารณสุข',
        'แยกติวานนท์',
        'วงศ์สว่าง',
        'บางซ่อน',
        'เตาปูน'
      ]
    }
  },
  computed: {
    chk () {
      return this.$store.getters.getUser.email
    },
    chkChip() {
      return Object.values(this.chips).includes(true);
    },
    pages () {
      return Math.ceil(this.jobs.length / this.pagination.rowsPerPage);
    },
    from () {
      if (this.jobs.length) {
        return ((this.pagination.page-1)*this.pagination.rowsPerPage) + 1
      } else {
        return 0
      }
    },
    to () {
      if (this.jobs.length) {
        const t = this.jobs.length-(this.pagination.page-1)*this.pagination.rowsPerPage;
        if (t < 10) {
          return this.pagination.rowsPerPage*(this.pagination.page - 1) + t;
        } else {
          return this.pagination.page*this.pagination.rowsPerPage
        }
      } else {
        return 0
      }
    }
  },
  methods: {
    searchKeyword () {
      if (this.search !== '') {
        this.textChip.chip1 = this.search
        this.chips.chip1 = true
      } else {
        this.chips.chip1 = false
      }
      this.fillter()
    },
    change () {
      this.textChip.chip2 = this.select
      this.chips.chip2 = true
      this.fillter()
    },
    searchCompany () {
      if (this.company !== '') {
        this.textChip.chip3 = this.company
        this.chips.chip3 = true;
      } else {
        this.chips.chip3 = false
      }
      this.fillter()
    },
    selectTypeJob () {
      this.chips.chip2 = false
      this.fillter()
    },
    fillter () {
      this.jobs = this.jobs_data
      if (this.chips.chip1) {
        this.jobs = this.jobs.filter(x => x.job_title.includes(this.textChip.chip1))
      }
      if (this.chips.chip2) {
        this.jobs = this.jobs.filter(x => x.job_type === this.select)
      }
      if (this.chips.chip3) {
        this.jobs = this.jobs.filter(x => x.company_name.includes(this.textChip.chip3))
      }
      if (this.chips.chip4) {
        this.jobs = this.jobs.filter(x => this.btsSilom.includes(x.bts))
      }
      if (this.chips.chip5) {
        this.jobs = this.jobs.filter(x => this.btsSukumwit.includes(x.bts))
      }
      if (this.chips.chip6) {
        this.jobs = this.jobs.filter(x => this.mrtBlue.includes(x.mrt))
      }
      if (this.chips.chip7) {
        this.jobs = this.jobs.filter(x => this.mrtViolet.includes(x.mrt))
      }
      if (this.chips.chip8) {
        this.jobs = this.jobs.filter(x => x.arl !== null)
      }
    }
  },
  beforeMount() {
    axios.get('/api/show')
      .then(res => {
        console.log(res.data.jobs)
        this.jobs = res.data.jobs
        this.jobs_data = res.data.jobs
        this.jobs_type = this.jobs.map(x => x.job_type).filter((item, pos, self) => {return self.indexOf(item) == pos})
      })
      .catch(err => {console.log(err.response)})
  }
}
</script>


<style lang="scss" scoped>

  .height-chkbox{
    height: 16px;
  }
  .detail-bottom{
    color: #616161;
    background: #f9f9f9;
  }
  .detail-job {
    background: #b3d4fc;
    text-shadow: none;
  }
  .border-img {
    border:1px solid #dae1e1;
  }
  .div-card {
    border-radius: 3px;
    box-shadow: 0 2px 1px rgba(0,0,0,.17);
  }
  .fix-height {
    height: 65px;
  }
  .col {
    float: left;
  }

  .row:after {
    content: "";
    display: table;
    clear: both;
  }
</style>

