<template>
  <div class="header__user">
    <el-dropdown popper-class="header__dropdown">
      <p class="cimfont cim-gerenzhongxin1 c-p header__user--avatar"></p>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleLoginout">
            <i class="cimfont cim-tuichudengluxian"></i>退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const store = useStore()
const router = useRouter()
const handleLoginout = () => {
  store.dispatch('userModule/loginOut').then((response: any) => {
    const { data: res } = response
    if (res.code === 'success') {
      ElMessage({
        type: 'success',
        message: '退出成功',
        duration: 1000,
        onClose: () => {
          router.push({ path: '/login' })
        }
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.header__user {
  height: 100%;
  line-height: 56px;
  &--avatar {
    height: 100%;
    line-height: 56px;
    color: $--color-minor;
    font-size: 20px;
    &:hover {
      color: $--color-white;
    }
  }
}
.header__dropdown {
  ul {
    background: $--color-black;
    color: $--color-white;
    :deep(li.el-dropdown-menu__item) {
      color: $--color-white;
    }
  }
}
</style>
<style lang="scss">
.header__dropdown {
  .el-popper__arrow {
    display: none;
  }
  .el-dropdown-menu__item:not(.is-disabled):focus {
    background: $--color-minor;
  }
}
</style>
