<template>
  <div class="user-seting">
    <el-dropdown placement="bottom-start">
      <span class="el-dropdown-link">
        <img class="userimg" src="@/assets/avatar.jpg" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <!-- <el-dropdown-item @click="restore">
            还原数据
          </el-dropdown-item>   -->
          <el-dropdown-item @click="editPassword"> 修改密码 </el-dropdown-item>
          <el-dropdown-item @click="loginOut"> 退出登录 </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <span class="name">{{ userstore.name }}</span>
  </div>
  <EditPassword
    ref="editPasswordRef"
    @confirm-password="hanleConfirmPassword"
  />
</template>
<script setup lang="ts">
import { loginOutApi, resetPasswordApi, restoreApi } from "@/api/user/user";
import useInstance from "@/hooks/useInstance";
import { useMessage } from "@/hooks/useMessage";
import { cleanSession, getToken } from "@/utils/auth";
import EditPassword from "@/components/EditPassword/index.vue";
import { getUserId } from "@/utils/auth";
import { ref, reactive, unref } from "vue";
import { UpdatePasswordDto } from "@/api/user/UserModel";
import { useReturnData } from "@/utils/useReturnData";
import { userStore } from "@/store/user";
import { tabStore } from "@/store/tabs";
const tabstore = tabStore()
const userstore = userStore()
const { resData } = useReturnData()
const { global } = useInstance();
const editPasswordRef = ref<{ show: Fn }>();
// 修改密码
const editPassword = () => {
  const userId = getUserId();
  unref(editPasswordRef)?.show(userId);
};
const hanleConfirmPassword = async (
  params: UpdatePasswordDto,
  onclose: Fn,
  setLoading: Fn
) => {
  try {
    const res = await resetPasswordApi(params);
    const resCode = resData(res, "操作成功");
    if (resCode !== 500) {
      onclose();
    }
  } finally {
    setLoading(false);
  }
};
//退出登录
const loginOut = async () => {
  let confirm = await global.$myconfirm("确定退出登录吗?");
  if (confirm) {
    //跳到登录
    //清空session
    cleanSession();
    tabstore.resetTabsList()
    window.location.href = "/";
    // let parm = {
    //     token: getToken()
    // }
    // let res = await loginOutApi(parm)
    // if (res && res.code == 200) {
    //     //跳到登录
    //     window.location.href = "/login";
    //     //清空session
    //     cleanSession();
    // }
  }
};
//还原数据
const restore = async () => {
  let confirm = await global.$myconfirm("确定还原数据吗?");
  if (confirm) {
    let res = await restoreApi();
    if (res && res.code == 200) {
      //信息提示
      global.$message({ message: res.msg, type: "success" });
    }
  }
};
</script>
<style scoped lang="scss">
.user-seting {
  display: flex;
  align-items: center;
  .name {
    margin-left: 12px;
    margin-right: 8px;
    font-size: 14px;
    color: #000000d9;
  }
  .el-dropdown-link {
    .userimg {
      height: 34px;
      width: 34px;
      border-radius: 50%;
    }
  }
}
</style>
