<template>
  <div class="ui--form-login login-info">
    <header class="mb-4">
      <img :src="$CONTEXT + '/static/image/main/simbol.png'" class="mb-3 ui--brand-simbol" alt="System Simbol" />
      <router-link :to="{ name: 'mainIndexPage' }" tag="span" class="brand-text cursor-pointer">
        {{ title }}
      </router-link>
    </header>
    <hr class="mb-4" />
    <div class="message">
      <p>{{ $t('sdl.common.message.succLogout') }}</p>
      <p>{{ $t('sdl.common.label.reloginmsg') }}</p>
    </div>
    <router-link :to="$CONTEXT + '/login'" tag="button" class="btn btn-lg btn-primary">{{ $t('sdl.common.label.loginshortcut') }}</router-link>
  </div>
  <!-- Footer -->
  <footer class="ui--footer-container">
    <p class="text-muted">
      {{ $t('sdl.common.message.onlyAuthUserLegalSanctions') }}
    </p>
    <span>&copy; Samsung</span>
  </footer>
</template>
<script>
import { mapActions } from 'vuex';
import axios from 'axios';
import SDLUtil from '@/utils/SDLUtil';

export default {
  data() {
    return {
      title: SDLUtil.getMsgProp('sdl.common.projectName'),
    };
  },
  methods: {
    ...mapActions(['logout']),
    logoutApi() {
      axios
        .put(`${SDLUtil.API_URL}/auth/logout`)
        .then(({ data }) => {
          console.log(data);
        })
        .catch(err => {
          console.error(err);
        });
    },
  },
  created() {
    this.logoutApi();
    this.logout();
    document.querySelector('body').classList.remove('register-wrap');
    document.querySelector('body').classList.add('ui--login-wrap');
  },
};
</script>
<style></style>
