<template>
  <v-layout>
    <v-flex class="text-center">
      <div
        v-if="me">
        <v-btn @click="logout">로그아웃</v-btn>
      </div>
      <div
        v-else>
        <div
          v-if="tryLogin">
          <login-component/>
          <v-btn @click="changeTryLogin">회원가입</v-btn>
        </div>
        <div
          v-else>
          <sign-up-component/>
          <v-btn @click="changeTryLogin">로그인</v-btn>
        </div>
      </div>
	<v-btn @click="socialLogin">소셜로그인</v-btn>	
    </v-flex>
  </v-layout>
</template>

<script>
  import LoginComponent from "../components/LoginComponent";
  import SignUpComponent from "../components/SignUpComponent";

  export default {
    data() {
      return {
        tryLogin: true,
      }
    },
    computed: {
      me() {
        return this.$store.state.user.me
      }
    },
    components: {
      LoginComponent,
      SignUpComponent,
    },
    methods: {
      changeTryLogin() {
        this.tryLogin = !this.tryLogin
      },
      async logout() {
        try {
          await this.$store.dispatch('user/logout');
          await this.$router.replace('/');
        } catch (e) {
          console.error(e);
        }
      },
      async socialLogin(){
	try{
         if(process.client){
                console.log('zzz')
		window.open('http://ec2-54-180-112-94.ap-northeast-2.compute.amazonaws.com:8080/accounts/google/login/')
	}
         console.log('z')
	 await this.$store.dispatch('user/socialLogin');
	 await this.$router.replace('/');
	}catch(e){
	 console.error(e);
	}
	},
    }
  }

</script>