<template>

  <VDropdown right spaced class="user-dropdown profile-dropdown">
    <template #button="{ toggle }">
      <a
        tabindex="0"
        class="is-trigger dropdown-trigger"
        aria-haspopup="true"
        @keydown.space.prevent="toggle"
        @click="toggle"
      >
<!--        <VAvatar picture="/images/avatars/svg/user-alt-light.svg" />-->
        <img style="width: 40px; height: 40px" src="/images/avatars/svg/user-alt-light.svg" alt="">
      </a>
    </template>

    <template #content>
      <div class="dropdown-head">
        <img style="width: 30px; height: 30px" src="/images/avatars/svg/user-alt-light.svg" alt="">

        <div class="meta">
          <span>{{ username }}</span>
          <span>Product Manager</span>
        </div>
      </div>

      <RouterLink :to="{ name: 'profile' }" class="dropdown-item is-media">
        <div class="icon">
          <i aria-hidden="true" class="lnil lnil-user-alt"></i>
        </div>
        <div class="meta">
          <span>Profile</span>
          <span>View your profile</span>
        </div>
      </RouterLink>

      <hr class="dropdown-divider" />

      <div class="dropdown-item is-button">
        <VButton
          class="logout-button"
          icon="feather:log-out"
          color="primary"
          role="menuitem"
          raised
          fullwidth
          @click="handleClick()"
        >
          Logout
        </VButton>
      </div>
    </template>
  </VDropdown>
</template>

<script type="ts">

import axios from "axios";

export default {
  data(){
    return{
      username:null,
    }
  },

  methods:{
    handleClick() {
      localStorage.removeItem('token')
      this.$store.dispatch('user', null)
      this.$router.push('/')
    }
  },
  async created() {
    const response = await axios.get('https://mylifeline.tech/api/users/get', {
      headers: {
        'x-access-token': localStorage.getItem('token')
      }
    })
    this.user = response.data
    response.data.map((item)=>{
      this.username = item.username
    })
    console.log('PROFILE : ' + response.data)
  }

}
</script>
