<template>
    <div class="ten-name">{{ dada.dadaTenantName || '' }}</div>
    <el-dropdown trigger="click" type="primary">
      <div class="flex-center cursor">
        <img src="@/assets/user-icon.svg" style="width: 28px" alt="" />
        <span class="ml-8">{{ dada?.nickName }}</span>
        <el-icon class="el-icon--right">
          <CaretBottom />
        </el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu class="avatar-dropdown">
          <el-dropdown-item @click="logout">
            退出
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <UserPwdDialog ref="UserPwdDialogRef" />
  </template>
  <script setup lang="ts">
  import { ref } from 'vue'
  import useStore from '@/stores'
  import { useRouter } from 'vue-router'
  import UserPwdDialog from '../../user-pwd-dialog/index.vue'
  const { dada } = useStore()
  const router = useRouter()
  
  const UserPwdDialogRef = ref()
  
  const logout = () => {
    dada.logout().then(() => {
      // 清空分类的缓存
      localStorage.removeItem('dadaTenantId')
      localStorage.removeItem('dadaToken')
      localStorage.removeItem('token')
      router.push({ name: 'login' })
    })
  }
  
  </script>
  <style lang="scss" scoped>
  .avatar-dropdown {
    min-width: 210px;
  
    .userInfo {
      padding: 12px 11px;
    }
  
    :deep(.el-dropdown-menu__item) {
      padding: 12px 11px;
      &:hover {
        background: var(--app-text-color-light-1);
      }
    }
  }
  .ten-name {
    width: 250px;
    height: 28px;
    text-align: right;
    line-height: 28px;
    position: relative;
    margin-right: 40px;
    color: #333333;
    white-space: nowrap;
    &:after {
      display: inline-block;
      content: '';
      width: 1px;
      height: 20px;
      background: rgba(0, 0%, 0%, 0.2);
      position: absolute;
      right: -20px;
      top: 5px;
    }
  }
  </style>
  