<template>
    <!-- 公司名 -->
    <div class="name-box font12" style="padding-top: 2px">
        <span style="margin-right: 10px; margin-left: 10px">
            {{ userStore?.userInfo?.corp?.corp_name ? userStore?.userInfo?.corp?.corp_name : "" }}
        </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 logout = () => {
    ElMessageBox.confirm("您是否确认重新登录?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(async () => {
        const result: any = await logoutApi();
        if (result?.code === 0) {
            userStore.$reset();
            //清除本地
            localStorage.clear();
            location.href = usePathUrl();
        }
    });
};
</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>
