<template>
  <div class="flex items-center">
    <img :src="avatar[0].url || defaultAvatar" alt="" width="32" height="32" class="mr-[8px] rounded-[50%]" />
    <t-dropdown :min-column-width="128" trigger="click">
      <template #dropdown>
        <t-dropdown-menu>
          <!-- <t-dropdown-item class="operations-dropdown-container-item" @click="handleClick('pswd')">
            <img :src="iconLock" alt="" width="16" height="16" class="mr-[10px]" />修改密码
          </t-dropdown-item> -->
          <t-dropdown-item class="operations-dropdown-container-item" @click="handleClick('logout')">
            <img :src="iconLogout" alt="" width="16" height="16" class="mr-[10px]" />退出登录
          </t-dropdown-item>
        </t-dropdown-menu>
      </template>
      <span class="text-[14px] cursor-pointer mr-[24px]">{{ userName }} <CaretDownSmallIcon class="ml-[8px]" /></span>
    </t-dropdown>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/stores/modules/user'
import { DialogPlugin } from 'tdesign-vue-next'
import { LOGIN_URL } from '@/config'
// import iconLock from '@/assets/images/common/icon-lock.png'
import iconLogout from '@/assets/images/common/icon-logout.png'
import defaultAvatar from '@/assets/images/avatar.gif'

const router = useRouter()
const userStore = useUserStore()
const userName = computed(() => userStore.userInfo?.userName)
const avatar = computed(() => [{ url: userStore.userInfo?.avatar }])

const handleClick = (e: string) => {
  if (e === 'logout') {
    const confirmDia = DialogPlugin.confirm({
      header: '系统提示',
      body: '确定退出登录吗？',
      confirmBtn: '确定',
      cancelBtn: '取消',
      onConfirm: () => {
        // 请求成功后，销毁弹框
        userStore.setToken('')
        router.push(LOGIN_URL)
        confirmDia.destroy()
      },
      onClose: () => {
        confirmDia.hide()
      }
    })
  } else {
    console.log(e)
  }
}
</script>

<style lang="less">
.operations-dropdown-container-item .t-dropdown__item-text {
  display: flex;
  align-items: center;
}
</style>
