<!-- UserDropdown 用户下拉菜单 -->
<script setup lang="ts">
import { useRouter } from 'vue-router';
import Popover from '@/components/Popover/index.vue';
import { useUserStore } from '@/stores';
import { useLockScreenStore } from '@/stores/modules/lockScreen';

const router = useRouter();
const userStore = useUserStore();
const lockStore = useLockScreenStore();

/* 弹出面板 开始 */
const popoverStyle = ref({
  width: '200px',
  padding: '4px',
  height: 'fit-content',
});
const popoverRef = ref();

// 弹出面板内容
const popoverList = ref([
  {
    key: '1',
    title: '离开锁屏',
    icon: 'Lock',
  },
  {
    key: '2',
    title: '个人中心',
    icon: 'User',
  },
  {
    key: '3',
    divider: true,
  },
  {
    key: '4',
    title: '退出登录',
    icon: 'SwitchButton',
  },
]);

// 点击
function handleClick(item: any) {
  switch (item.key) {
    case '1':
      popoverRef.value?.hide?.();
      lockStore.lock();
      break;
    case '2':
      // 跳转到个人中心
      popoverRef.value?.hide?.();
      router.push('/profile');
      break;
    case '4':
      popoverRef.value?.hide?.();
      ElMessageBox.confirm('退出登录不会丢失任何数据，你仍可以登录此账号。', '确认退出登录？', {
        confirmButtonText: '确认退出',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'el-button--danger',
        cancelButtonClass: 'el-button--info',
        roundButton: true,
        autofocus: false,
      })
        .then(async () => {
          await userStore.logout();
          ElMessage({
            type: 'success',
            message: '退出成功',
          });
        })
        .catch(() => {});
      break;
    default:
      break;
  }
}

/* 弹出面板 结束 */
</script>

<template>
  <Popover
    ref="popoverRef"
    placement="bottom-end"
    trigger="clickTarget"
    :trigger-style="{ cursor: 'pointer' }"
    popover-class="popover-content"
    :popover-style="popoverStyle"
  >
    <!-- 触发元素插槽 -->
    <template #trigger>
      <div class="user-info">
        <div class="user-avatar">
          {{ userStore.userInfo?.nickName?.charAt(0) || userStore.userInfo?.username?.charAt(0) || 'U' }}
        </div>
        <div class="user-detail">
          <span class="user-name">{{ userStore.userInfo?.nickName || userStore.userInfo?.username || '未登录' }}</span>
          <span class="user-role">{{ userStore.userInfo?.roles?.[0]?.roleName || userStore.userInfo?.deptName || '企业员工' }}</span>
        </div>
        <el-icon class="user-arrow">
          <ArrowDown />
        </el-icon>
      </div>
    </template>

    <div class="popover-content-box shadow-lg">
      <div v-for="item in popoverList" :key="item.key" class="popover-content-box-items h-full">
        <div
          v-if="!item.divider"
          class="popover-content-box-item flex items-center h-full gap-8px p-8px pl-10px pr-12px rounded-lg hover:cursor-pointer hover:bg-[rgba(0,0,0,.04)]"
          @click="handleClick(item)"
        >
          <el-icon :size="16">
            <component :is="item.icon" />
          </el-icon>
          <div class="popover-content-box-item-text font-size-14px text-overflow max-h-120px">
            {{ item.title }}
          </div>
        </div>

        <div v-if="item.divider" class="divder h-1px bg-gray-200 my-4px" />
      </div>
    </div>
  </Popover>
</template>

<style scoped lang="scss">
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 10px;
  transition: all var(--transition);
  &:hover {
    background: #f0eeeb;
  }
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1d5af3, #858bff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.user-detail {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.user-role {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.3;
}

.user-arrow {
  font-size: 12px;
  color: #a8a49c;
  transition: transform var(--transition);
}

.popover-content-box {
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
</style>
