<template>
  <div class="header-top">
    <div class="title">
      <h2>
        {{ title }}
        <span>{{ desc }}</span>
      </h2>
    </div>
    <div class="oper-btns" v-if="user.info">
      <div class="user-menu">
        <img :src="user.info.avatar ? user.info.avatar : defAvatar" />
        <el-dropdown>
          <div style="outline: none">
            <span class="oper-down">{{ user.info.nickName }}</span>
            <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
            <el-icon><ArrowDown /></el-icon>
          </div>
          <template v-slot:dropdown>
            <el-dropdown-menu class="menu-items-user">
              <el-dropdown-item @click="updatePwdHandler">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout"
                ><span style="color: #fa5555">退出登录</span></el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { openErrorMsg } from "@/request";
import { user, logout as logoutRaw } from "@/store/user";
import defAvatar from "@/assets/image/top_my.png";
import { refreshRole, roleId } from "@/store/role";
import { RouteName, router } from "@/router";
import { confirm } from "@/helper/message";
import { updatePwd } from "@/view/system/quisk";
import { title, desc } from "@/store/system";

refreshRole();

const loginoutRaw = async () => {
  await logoutRaw();
  roleId.value = "";
  router.replace({ name: RouteName.login });
};
const logout = async () => {
  if (await confirm("确定要退出登录吗？")) {
    loginoutRaw();
  }
};
const updatePwdHandler = async () => {
  if (await updatePwd({})) {
    openErrorMsg("密码修改成功，请重新登录。");
    loginoutRaw();
  }
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
