<template>
  <div>
    <v-layout row wrap  fill-height align-center class="colornav pt-1">
      <v-flex xs12 sm10 offset-sm1>
        <v-toolbar flat color="#0d253d"> <!--v-if="page == 'app'"-->
          <v-toolbar-title class="">
            <router-link to="/"><img src="../../../public/images/logocoop.png" class="" width="140"></router-link>
          </v-toolbar-title>
          <v-spacer></v-spacer>
          <router-link to="/">
          <v-btn v-if="!responsive" flat color="white" class="mx-2 px-2">
            <v-icon>home</v-icon>
          </v-btn>   
          </router-link>
          <router-link to="/showjob">
            <v-btn v-if="!responsive" flat color="white" class="mx-2 px-2 body-2 font-weight-bold">
              <span class="body-2 font-weight-bold">หางานทั้งหมด</span>
            </v-btn>
          </router-link>
          <router-link to="/employer">
          <v-btn v-if="!responsive" flat color="white" class="mx-1 px-1 body-2 font-weight-bold">
            <span class="body-2 font-weight-bold">สำหรับผู้ประกอบการ</span>
          </v-btn>
          </router-link>
          <v-btn v-if="!currentUser" flat color="white" class="mx-1 px-1 body-2 font-weight-bold" @click.stop="login()">
            <span class="body-2 font-weight-bold">เข้าสู่ระบบ</span>
          </v-btn>
          <v-btn v-if="!currentUser" flat color="white" class="mx-1 px-1 body-2 font-weight-bold" @click.stop="register()">
            <span class="body-2 font-weight-bold">สมัครสมาชิก</span>
          </v-btn>
          <v-btn v-else dark color="yellow darken-2" @click="logout()" class="black--text">
            <v-icon>account_circle</v-icon>&nbsp;{{ currentUser }}
          </v-btn>
        </v-toolbar>
      </v-flex>
    </v-layout>
    <login v-if="dialog === 'login'"></login>
    <register v-if="dialog === 'register'"></register>
  </div>
</template>

<script>
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
export default {
  props: ['page'],
  components: {
    'login': Login,
    'register': Register
  },
  data () {
    return {
      responsive: false,
      dialog: 'login'
    }
  },
  computed: {
    currentUser () {
      return this.$store.getters.getUser.name
    }
  },
  mounted () {
    this.onResponsiveInverted()
    window.addEventListener('resize', this.onResponsiveInverted)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.onResponsiveInverted)
  },
  methods: {
    onResponsiveInverted () {
      if (window.innerWidth < 991) {
        this.responsive = true
      } else {
        this.responsive = false
      }
    },
    logout () {
      this.$store.dispatch('logout')
    },
    login () {
      this.dialog = 'login'
      this.$store.commit('setDialog', !this.$store.getters.getDialog)
    },
    register () {
      this.dialog = 'register'
      this.$store.commit('setDialog', !this.$store.getters.getDialog)
    }
  }
}
</script>


<style lang="scss" scoped>
  .colornav{
    background-color:#0d253d;
  }
</style>
