<template>
  <el-dropdown trigger="click">
    <div class="avatar">
      <img src="@/assets/images/logo.jpg" alt="avatar" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="openDialog('infoRef')">
          <el-icon><User /></el-icon>个人信息
        </el-dropdown-item>
        <el-dropdown-item @click="openDialog('passwordRef')">
          <el-icon><Edit /></el-icon>修改密码
        </el-dropdown-item>
        <el-dropdown-item divided @click="logout">
          <el-icon><SwitchButton /></el-icon>退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <!-- infoDialog -->
  <InfoDialog ref="infoRef" />
  <!-- passwordDialog -->
  <PasswordDialog ref="passwordRef" />
</template>

<script setup>
  import { ref } from 'vue';
  import { LOGIN_URL } from '@/config';
  import { useRouter } from 'vue-router';
  // import { logoutApi } from "@/api/modules/login";
  import { useUserStore } from '@/stores/modules/user';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import InfoDialog from './InfoDialog.vue';
  import PasswordDialog from './PasswordDialog.vue';

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

  // 退出登录
  const logout = () => {
    ElMessageBox.confirm('您是否确认退出登录?', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      await userStore.logout();

      // 重定向到登陆页
      router.replace(LOGIN_URL);
      ElMessage.success('退出登录成功！');
    });
  };

  // 打开修改密码和个人信息弹窗
  const infoRef = ref(null);
  const passwordRef = ref(null);
  const openDialog = (ref) => {
    if (ref == 'infoRef') infoRef.value?.openDialog();
    if (ref == 'passwordRef') passwordRef.value?.openDialog();
  };
</script>

<style scoped lang="scss">
  .avatar {
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: relative;
    &::before {
      width: 0;
      height: 0;
      position: absolute;
      content: '';
      display: block;
      right: -10px;
      bottom: 10px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid #5a5e66;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
