<template>
  <CDropdown
      inNav
      class="c-header-nav-items"
      placement="bottom-end"
      add-menu-classes="pt-0"
  >
    <template #toggler>
      <CHeaderNavLink>
        <div class="c-avatar">
          <img
              src="/img/avatars/avatar.png"
              class="c-avatar-img"
              alt=""
              title="حساب کاربری"
          />
        </div>
      </CHeaderNavLink>
    </template>
    <CDropdownHeader tag="div" class="text-center" color="light">
      <strong v-if="$auth.loggedIn">{{ $auth.user.first_name }}</strong>
    </CDropdownHeader>

    <!--    <CDropdownItem :to="{name: 'admin-users'}">-->
    <!--      <CIcon name="cil-user"/>-->
    <!--      <span>پروفایل</span>-->
    <!--    </CDropdownItem>-->

    <CDropdownItem @click="logOut">
      <CIcon name="cil-lock-locked"/>
      <span>خروج از حساب</span>
    </CDropdownItem>
  </CDropdown>
</template>

<script>
export default {
  name: 'TheHeaderDropdownAccnt',
  data() {
    return {
      itemsCount: 42
    }
  },
  methods: {
    logOut() {
      this.$confirm('میخواهید از حساب کاربری خارج شوید؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      }).then(async () => {
        try {
          await this.$auth.logout()
          window.location.replace('/admin/login')
        } catch (e) {
          console.log(e?.response?.data)
        }
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: 'عملیات لغو شد'
        })
      })
    }
  }
}
</script>

<style scoped>
.c-icon{
  margin-right: 0.3rem;
}
</style>
