<template>
  <div>
    <v-layout row wrap  class="bodyborder pa-3 mb-2">
      <v-flex xs12 sm6>
        <v-flex xs12 sm12 class="subheading">
          ยินดีต้อนรับ
        </v-flex>
        <v-flex xs12 sm12 class="font-weight-bold black--text subheading">
          {{user}}
        </v-flex>
      </v-flex>
      <v-flex xs12 sm6>
        <v-flex xs12 sm12  class="grey--text body-1 text-xs-left text-sm-right">
          Lasted Login
        </v-flex>
        <v-flex xs12 sm12  class="body-1 text-xs-left text-sm-right">
          {{date}}
          <v-divider inset vertical></v-divider>
          {{time}}
        </v-flex>
      </v-flex>     
    </v-layout>
    <v-layout row wrap  class="bodyborder pa-3 mb-2" align-center fill-height>
        <v-flex xs8 sm8>
          <span class=" subheading font-weight-bold indigo--text"><v-icon color="indigo">person_pin</v-icon> ข้อมูลบัญชีผู้ใช้</span>
        </v-flex>
        <v-flex xs4 sm4 class="text-sm-right text-xs-right">
          <v-btn v-if="exists" small depressed color="orange darken-2" dark @click="$router.push('/employer/createjob')">
            <v-icon dark small>fas fa-plus</v-icon>&nbsp;ประกาศงาน
          </v-btn>
          <v-btn v-if="!exists" small depressed color="orange darken-2" dark @click="$store.commit('setSnackbar', {show: true, color: 'error', text: 'จำเป็นต้องกรอกข้อมูลบริษัทก่อน!'})">
            <v-icon dark small>fas fa-plus</v-icon>&nbsp;ประกาศงาน
          </v-btn>
        </v-flex>
        <v-flex xs12 sm12>
          <v-divider ></v-divider>
        </v-flex> 
      <v-layout row wrap align-center fill-height class="pa-3">
        <v-flex xs4 sm1 class="text-sm-center text-xs-center">
          <v-icon size="60px">far fa-newspaper</v-icon>
        </v-flex>        
        <v-flex xs6 sm2>
          <v-flex xs12 sm12 class="subheading font-weight-light">
            งานทั้งหมด
          </v-flex>
          <v-flex xs12 sm12 class="subheading font-weight-black" >
            {{countJob}} งาน
          </v-flex>
        </v-flex>
        <v-flex xs4 sm1 class="text-sm-center text-xs-center">
          <v-icon size="60px">far fa-credit-card</v-icon>
        </v-flex>        
        <v-flex xs6 sm2>
          <v-flex xs12 sm12 class="subheading font-weight-light">
            งานที่เปิดรับสมัคร
          </v-flex>
          <v-flex xs12 sm12 class="subheading font-weight-black" >
            {{countJob}} งาน
          </v-flex>
        </v-flex>
        <v-flex xs4 sm1 class="text-sm-center text-xs-center">
          <v-icon size="60px">far fa-address-card</v-icon>
        </v-flex>        
        <v-flex xs6 sm1>
          <v-flex xs12 sm12 class="subheading font-weight-light">
            ผู้ที่สมัครงาน
          </v-flex>
          <v-flex xs12 sm12 class="subheading font-weight-black" >
            0 คน
          </v-flex>
        </v-flex>
        <v-flex xs12 sm4 class="text-sm-center text-xs-center">
          <v-btn  small depressed color="success" dark @click="$router.push('/employer/managejob')">
            <v-icon dark small>fas fa-cogs</v-icon>&nbsp;จัดการข้อมูลงาน
          </v-btn>
          
          <v-btn  small depressed color="primary" dark>
            <v-icon dark small>fas fa-users</v-icon>&nbsp;จัดการข้อมูลผู้สมัคร
          </v-btn>
        </v-flex> 
      </v-layout>   
    </v-layout>
    <v-layout row wrap class="bodyborder pa-3">
      <v-flex xs12 sm12 >
        <span class=" subheading font-weight-bold indigo--text"><v-icon color="indigo">business</v-icon> ข้อมูลบริษัท</span>
        <v-divider ></v-divider>
      </v-flex>     
      <v-layout row wrap class="pa-3">
        <v-flex sm3 xs12 class="text-sm-center text-xs-center">
            <img :src="companies.imageCompany" alt="" height="160">
        </v-flex>
        <v-flex xs12 sm9 class="px-3">
          <v-flex xs12 sm12>
            <label class="font-weight-bold subheading green--text">{{ companies.company_name }}</label>
          </v-flex>
          <v-flex xs12 sm12>
            <label class="body-2">{{ companies.addr }} {{ companies.tambon }} {{ companies.amphoe }} {{ companies.province }} {{ companies.zipcode }}</label>
          </v-flex>
          <v-flex xs12 sm12 class="mt-1">
            <label class="caption"><v-icon small>email</v-icon> {{ companies.email }}</label>
          </v-flex>
          <v-flex xs12 sm12>
            <label class="caption"><v-icon small>desktop_mac</v-icon> {{ companies.website ? companies.website : ' - ' }}</label>
          </v-flex>
          <v-flex xs12 sm12>
            <label class="caption"><v-icon small>phone</v-icon> โทร. {{ companies.phone_no ? companies.phone_no : ' - ' }}</label>
          </v-flex>
          <v-flex xs12 sm12>
            <label class="caption"><v-icon small>print</v-icon> แฟกซ์. : {{ companies.fax ? companies.fax : ' - ' }}</label>
          </v-flex>
          <v-flex xs12 sm12>
            <v-btn small depressed dark color="red" @click="$router.push('/employer/configcompany')">
              <v-icon dark >settings</v-icon> แก้ไขข้อมูล
            </v-btn>
          </v-flex>
        </v-flex>
      </v-layout> 
        
    </v-layout>
  </div>
</template>

<script>
export default {
  data () {
    return {
      user: null,
      exists: false,
      countJob: 0,
      companies: {
        about: null,
        addr: null,
        amphoe: null,
        another: null,
        arl: null,
        bts: null,
        bus: null,
        company_name: null,
        company_owner: null,
        created_at: null,
        email: null,
        fax: null,
        id: null,
        imageCompany: null,
        imageMap: null,
        lat: null,
        long: null,
        mrt: null,
        phone_no: null,
        province: null,
        tambon: null,
        updated_at: null,
        user_id: null,
        website: null,
        zipcode: null
      }
    }
  },
  computed: {
    date () {
      return this.$store.getters.getTime.date
    },
    time () {
      return this.$store.getters.getTime.time
    }
  },
  beforeMount() {
    this.$store.dispatch('checkEmployer')
      .then(res => {
        this.user = res.username
        axios.get(`/api/companys/${res.id}`)
          .then(res => {
            console.log(res)
            this.exists = res.data.exists
            this.countJob = res.data.count
            if (res.data.exists) {
              this.companies = res.data.company
            } else {
              this.companies.phone_no = res.data.company.tel
              this.companies.email = res.data.company.email_employers
              this.companies.company_name = res.data.company.company_name
            }
            if (!this.companies.imageCompany) {
              this.companies.imageCompany = 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png'
            }
          })
          .catch(err => {
            console.log(err.response)
          })
      })
  }
}
</script>


<style lang="scss" scoped>

  .bodyborder{
    border: 1px solid #dcdcdc;
    border-radius: 3px;
  }
</style>
