<template>
  <ion-page>
    <m6-header />
    <ion-content :fullscreen="true">
      <div v-if="me">
        <p>ID: {{ me.id }}</p>
        <p>Name: {{ me.name }}</p>
        <p>Email: {{ me.email }}</p>
        <p>Is staff: {{ me.is_staff }}</p>
      </div>
    </ion-content>

    <m6-footer />
  </ion-page>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { IonPage, IonContent } from "@ionic/vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

import { mapGetters, mapActions } from "vuex";

export default defineComponent({
  name: "UserInfo",
  components: {
    IonContent,
    IonPage,
    "m6-header": Header,
    "m6-footer": Footer,
  },
  computed: {
    ...mapGetters("auth", ["isLogged", "me"]),
  },
  created() {
    if (!this.isLogged) window.location.href = "/sign";

    this.getMe();
  },
  methods: {
    ...mapActions("auth", ["getMe"]),
  },
});
</script>
