<template>
  <div>
  <v-layout row wrap>
    <v-flex xs12 sm9 class="pa-1">
      <v-flex xs12 sm12 class="div-card white pa-4">
        <v-layout row wrap>
          <v-flex xs12 sm10 >
            <span class="headline font-weight-bold indigo--text">{{ detail_data.job_title }}</span>
          </v-flex>
          <v-flex xs12 sm2>
            <v-btn color="deep-orange " v-if="!!localStorage.getItem('access_token')" @click="$store.commit('setDialogJob', !$store.getters.getDialogJob);" dark small depressed class="body-2">สมัครงานนี้</v-btn>
            <v-btn color="deep-orange " v-if="!localStorage.getItem('access_token')" @click="$store.commit('setSnackbar', {show: true, color: 'error', text: 'จำเป็นต้องเข้าสู่ระบบสมาชิกก่อน!'})" dark small depressed class="body-2">สมัครงานนี้</v-btn>
          </v-flex>
        </v-layout>
          <v-flex xs12 sm8>
            <span class="subheading font-weight-medium">{{ detail_data.company_name }}</span>
          </v-flex>
          
        
        
        <v-flex xs12 sm12>
          <span class="body-2 grey--text">{{ detail_data.addr }} ตำบล{{ detail_data.tambon }} อำเภอ{{ detail_data.amphoe }} จังหวัด{{ detail_data.province }} {{ detail_data.zipcode }}</span>
        </v-flex>
        <v-flex xs12 sm12 class="mt-3 font-weight-bold subheading brown--text">
          <v-icon small color="brown">fas fa-building</v-icon> เกี่ยวกับเรา
        </v-flex>
        <v-flex xs12 sm12 class="body-1 mt-1">
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ detail_data.about ? detail_data.sabout : '-' }}
        </v-flex>
        <v-flex xs12 sm12 class="mt-2 ">
          <span class="font-weight-bold subheading red--text">รายละเอียดงาน</span>
          <v-flex xs12 sm12 class="body-1 px-4">
            <b>รับสมัคร :</b> {{ detail_data.num ? detail_data.num + ' ตำแหน่ง' : '-' }}
          </v-flex>
          <v-flex xs12 sm12 class="body-1 px-4">
            <b>ประเภทธุรกิจ :</b> {{ detail_data.job_type }}
          </v-flex>
          <v-flex xs12 sm12 class="body-1 px-4">
            <b>ตำแหน่งงาน :</b> {{ detail_data.department }}
          </v-flex>
          <v-flex xs12 sm12 class="body-1 px-4">
            <b>สาขาวิชาที่เปิดรับ :</b> {{ detail_data.branch ? detail_data.branch : '-' }}
          </v-flex>
          <v-flex xs12 sm12 class="body-1 px-4">
            <b>ค่าตอบแทน/เงินเดือน :</b> {{ detail_data.salary ? detail_data.salary : '-' }}
          </v-flex>
          <v-flex xs12 sm12 class="body-1 px-4">
            <b>วันทำงาน :</b> {{ detail_data.day ? detail_data.day : '-' }}
          </v-flex>
          <v-flex xs12 sm12 class="body-1 px-4">
            <b>เวลาทำงาน :</b> {{ detail_data.time ? detail_data.time : '-' }}
          </v-flex>
        </v-flex>
        <v-flex xs12 sm12 class="mt-2 ">
          <span class="font-weight-bold subheading red--text">คุณสมบัติ</span>
          <v-flex xs12 sm12 class="body-1 px-4">
            <b>เพศ :</b> {{ detail_data.gender ? detail_data.gender : '-' }}
          </v-flex>
          <v-flex xs12 sm12 class="body-1 px-4">
            <b>ระดับการศึกษา :</b> {{ detail_data.degree ? detail_data.degree : '-' }}
          </v-flex>
          <v-flex xs12 sm12 class="body-1 px-4">
            <b>เกรดเฉลี่ย :</b> {{ detail_data.gpax ? detail_data.gpax : '-' }}
          </v-flex>
          <v-flex xs12 sm12 class="body-1 px-4">
            <b>ระยะเวลาการทำงาน :</b> {{ detail_data.phase ? detail_data.phase : '-' }}
          </v-flex>
          <v-flex xs12 sm12 class="body-1 px-4">
            <b>คุณสมบัติเพิ่มเติม : </b> 
            <v-flex xs12 sm12 class="body-1 px-4">
            <pre class="body-1">{{ detail_data.feature ? detail_data.feature : '-' }}</pre>
            </v-flex>
          </v-flex>

        </v-flex>
        <v-flex xs12 sm12 class="mt-2 ">
          <span class="font-weight-bold subheading red--text">หน้าที่รับผิดชอบ</span>
          <v-flex xs12 sm12 class="body-1 px-4">
            <pre class="body-1">{{ detail_data.role ? detail_data.role : '-' }}</pre>
          </v-flex>

        </v-flex>
        <v-flex xs12 sm12 class="mt-2 ">
          <span class="font-weight-bold subheading red--text">สวัสดิการ</span>
          <v-flex xs12 sm12 class="body-1 px-4">
            <pre class="body-1">{{ detail_data.welfare ? detail_data.welfare : '-' }}</pre>
          </v-flex>

        </v-flex>
        
      </v-flex>
    </v-flex>
    <v-flex xs12 sm3 class="pa-1 ">
      <v-flex xs12 sm12 class="div-card white pa-2">
        <v-flex xs12 sm12 class=" font-weight-bold subheading mb-1 mt-2">
          <v-icon small >fas fa-mobile-alt</v-icon> ข้อมูลติดต่อ 
          <v-divider></v-divider>
        </v-flex>
        <v-flex xs12 sm12 class="text-xs-center text-sm-center ">
          <img width="180" class="" :src="detail_data.imageCompany" alt="">
        </v-flex>
        <v-flex xs12 sm12 class="text-xs-center text-sm-center font-weight-bold caption mb-1">
          {{ detail_data.company_name }}
        </v-flex>
        <v-flex xs12 sm12 class=" body-1 px-2">
           <v-icon small>fas fa-user</v-icon> คุณ {{ detail_data.company_owner }}
        </v-flex>
        <v-flex xs12 sm12 class=" body-1 px-2">
          <v-icon small>fas fa-envelope</v-icon> {{ detail_data.email }}
        </v-flex>
        <v-flex xs12 sm12 class=" body-1 px-2">
          <v-icon small>laptop_mac</v-icon> {{ detail_data.website ? detail_data.website : '-' }}
        </v-flex>
        <v-flex xs12 sm12 class=" body-1 px-2">
          <v-icon small>phone</v-icon> โทร. {{ detail_data.phone_no ? detail_data.phone_no : '-' }}
        </v-flex>
        <v-flex xs12 sm12 class=" body-1 px-2">
          <v-icon small>fas fa-fax</v-icon> แฟกซ์. :{{ detail_data.fax ? detail_data.fax : '-' }}
        </v-flex>
        <v-flex xs12 sm12 class=" font-weight-bold subheading mt-2 my-1">
          <v-icon small >fas fa-street-view</v-icon> แผนที่ตั้งบริษัท 
          <v-divider></v-divider>
          <GmapMap v-if="detail_data.lat" style="width: 100%; height: 200px;" :zoom="15" :center="{lat: detail_data.lat*1, lng: detail_data.long*1}">
            <GmapMarker
                :position="{lat: detail_data.lat*1, lng: detail_data.long*1}"
            />
          </GmapMap>
        </v-flex>
        <v-flex xs12 sm12 class=" font-weight-bold subheading mt-2 my-1">
          <v-icon small >fas fa-plane</v-icon> การเดินทาง 
          <v-divider></v-divider>
        </v-flex>
        <v-layout row wrap justify-center class="pa-1" fill-height align-center>
          <v-flex xs6 sm6 class="text-sm-center text-xs-center">
            <img src="/images/bts.png" width="50" height="50" alt="">
            <v-flex xs12 sm12>
              {{ detail_data.bts ? detail_data.bts : 'ไม่มี' }}
            </v-flex>
          </v-flex>
          <v-flex xs6 sm6 class="text-sm-center text-xs-center">
            <img src="/images/mrt.png" width="50" height="50" alt="">
            <v-flex xs12 sm12>
              {{ detail_data.mrt ? detail_data.mrt : 'ไม่มี' }}
            </v-flex>
          </v-flex>
        </v-layout>
        <v-layout row wrap justify-center class="pa-1" fill-height align-center>
          <v-flex xs6 sm6 class="text-sm-center text-xs-center">
            <img src="/images/arl.png" width="50" height="50" alt="">
            <v-flex xs12 sm12>
               {{ detail_data.arl ? detail_data.arl : 'ไม่มี' }}
            </v-flex>
          </v-flex>
          <v-flex xs6 sm6 class="text-sm-center text-xs-center">
            <img src="/images/bus.png" width="50" height="50" alt="">
            <v-flex xs12 sm12>
               {{ detail_data.bus ? detail_data.bus : 'ไม่มี' }}
            </v-flex>
          </v-flex>
        </v-layout>
        <v-flex xs12 sm12 class="px-3 font-weight-bold">
          การเดินทางเพิ่มเติม :  
          <v-flex xs12 sm12 class="body-1 px-2" >
            <pre class="body-1">{{ detail_data.another ? detail_data.another : '-' }}</pre>
          </v-flex>
        </v-flex>
        
      </v-flex>
    </v-flex>
  </v-layout>    
  <RegisterJob :id="$route.params.id"></RegisterJob>
  </div>
</template>

<script>
import RegisterJob from './RegisterJob.vue';
export default {
  components: {
    RegisterJob
  },
  data () {
    return {
      detail_data: {}
    }
  },
  beforeMount () {
    axios.get(`/api/detail/${this.$route.params.id}`)
      .then(res => {
        this.detail_data = res.data.job
      }).catch(err => {console.log(err.response)})
  }
}
</script>


<style lang="scss" scoped>
  .border-logo{
    border:1px solid #e1e1e1;
  }
  .div-card {
    border-radius: 3px;
    box-shadow: 0 2px 1px rgba(0,0,0,.17);
  }
</style>

