<template>
    <!-- 公司名 -->
    <div class="name-box font12" style="padding-top: 2px">
        <span style="margin-right: 10px; margin-left: 10px">
            {{ NAMES[userStore.userInfo?.identity] }}
        </span>
    </div>

    <!-- 用户名 -->
    <div class="name-box font12">
        <el-dropdown trigger="click" class="triangle-box">
            <div>
                {{ userStore.userInfo.nickname }}
                <el-icon class="triangle">
                    <i-ep-arrow-down />
                </el-icon>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="logout">
                        <el-icon> <i-ep-switch-button /> </el-icon>重新登录
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { logoutApi } from "@/api/modules/login";
import { useMsg } from "@/hooks/useMsg";
import { useUserStore } from "@/stores/modules/user";
import { ElMessageBox } from "element-plus";
import { usePathUrl } from "@/hooks/usePathUrl";
const userStore: any = useUserStore();

const NAMES: Record<string, any> = {
    1: userStore?.userInfo?.companyName,
    2: userStore?.userInfo?.supplierName,
    3: userStore?.userInfo?.customerName
};

//通知单点退出登录
const getUcOffline = (redirectUrl: any) => {
    let httpUrl = import.meta.env.VITE_SINGLE_URL + "uc/offline";
    fetch(httpUrl, {
        method: "POST",
        credentials: "include",
        keepalive: true,
        headers: {
            Authorization: userStore.phpToken,
            "Refresh-Authorization": userStore.refreshToken
        }
    })
        .then((res: any) => {
            if (res.status === 200) {
                useMsg("success", "退出登录成功 ！");
                setTimeout(() => {
                    console.log(redirectUrl, "=redirectUrl=");
                    location.href = redirectUrl;
                    userStore.$reset();
                    // 3.清除 本地
                    localStorage.clear();
                }, 500);
            }
        })
        .catch(() => {
            useMsg("error", "退出登录失败,请稍后再试 ！");
        });
};
// 退出登录
const logout = () => {
    ElMessageBox.confirm("您是否确认重新登录?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(async () => {
        //1.退出登录
        const result: any = await logoutApi();
        if (result.status === 200 || result.status === 40003 || result.status === 401) {
            //4.通知单点退出登录
            getUcOffline(usePathUrl());
        } else {
            useMsg("error", result.message);
        }
    });
};
</script>

<style scoped lang="scss">
.name-box {
    position: relative;
    display: flex;
    align-items: center;
    color: #303133;
    cursor: pointer;
    ::v-deep(.el-dropdown) {
        color: #303133;
    }
}
.name-box::before {
    position: absolute;
    top: 50%;
    display: block;
    height: 20px;
    content: "";
    border-left: 1px solid #e4e7ed;
    transform: translateY(-50%);
}
.triangle-box {
    margin: 0 10px;
}
.triangle {
    margin-left: 3px;
    transition: transform 0.3s ease; /* 添加动画过渡效果 */
}
.triangle-box:hover .triangle {
    transform: rotate(180deg); /* 鼠标悬停时旋转180度 */
}
</style>
