<template>
    <!-- 语言 -->
    <div class="name-box font12">
        <el-dropdown trigger="click" class="triangle-box" @command="handleCommand" :max-height="300">
            <div>
                {{ name }}
                <el-icon class="triangle">
                    <i-ep-arrow-down />
                </el-icon>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="(item, index) in langs" :key="index" :command="item.id" :value="item.country_name">
                        {{ item.country_name }}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
    <!-- 用户名 -->
    <div class="name-box font12">
        <el-dropdown trigger="click" class="triangle-box">
            <div>
                {{ userStore.username }}
                <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 { ref } from "vue";
import { logoutApi } from "@/api/modules/login";
import { useMsg } from "@/hooks/useMsg";
import { useUserStore } from "@/stores/modules/user";
import { ElMessageBox } from "element-plus";
import { outLogin } from "@/utils/outLogin";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { getLanguageListApi, getLanguageCutoverApi } from "@/api/modules/global";
import { HOME_URL } from "@/config";
import { useRouter } from "vue-router";

import { useTabsStore } from "@/stores/modules/tabs";
const tabStore = useTabsStore();
const userStore = useUserStore();
const router = useRouter();
const keepAliveStore = useKeepAliveStore();
document.cookie = `lang=zh_cn`;
const langs = ref<any>([]);
const name = ref("");

// 站点列表
const getLanguageList = async () => {
    const result = await getLanguageListApi();
    if (result?.code === 0) {
        const { data } = result;
        langs.value = data;
        let id = userStore?.languageType ? userStore?.languageType : data[0]?.id;
        getLanguageCutover(id, "noCLick");
    }
};
getLanguageList();

// 站点切换接口
const getLanguageCutover = async (id: any, type: any) => {
    const result = await getLanguageCutoverApi(id);
    if (result?.code === 0) {
        userStore.setLanguageType(id);
        let names = langs?.value?.filter((item: any) => {
            return item.id === id;
        });
        name.value = names[0]?.country_name;
        if (type === "click") {
            tabStore.setTabs([
                {
                    icon: "",
                    title: "首页",
                    path: "/admin/index",
                    name: "home",
                    close: true
                }
            ]);
            keepAliveStore.setKeepAliveName();
            setTimeout(() => {
                router.push(HOME_URL);
            }, 500);
        }
    }
};

// 站点切换事件
const handleCommand = (val: string) => {
    //切换语言将清空所有标签页面

    ElMessageBox.confirm("切换语言将清空所有标签页面?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(async () => {
        await getLanguageCutover(val, "click");
    });
};

// 退出登录
const logout = () => {
    ElMessageBox.confirm("您是否确认重新登录?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(async () => {
        // 1. 退出登录
        const result: any = await logoutApi();
        if (result?.code === 0) {
            outLogin();
        } 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>
